JS Function with parameters image, width, height and return a resized base 64 image data

Question

I am trying to create a function that takes in base 64 image data with a width and height and return a resized base 64 image data with the given width and height in javascript. Essentially it is

function imageResize(img, width, height) {
    var newImg; 
    //PLAN:transform img with new width and height.
    // - change width
    // - change height
    // - convert back to base 64 data
    return newImg;
}

I tired following this post but it didn't work out for me. I am currently doing research to find ways to transform images in js and will update post as I find new leads. Is there a function that already does what I am trying to do? If not one or more of the components in my pseudocode? Any advice is much appreciated.

Here is the current function that I've tried to implement but it returns a blank canvas without the actual img drawn on it.

function imageResize(img, width, height) {

            /// create an off-screen canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            /// set its dimension to target size
            canvas.width = width;
            canvas.height = height;

            /// draw source image into the off-screen canvas:
            ctx.drawImage(img, 0, 0, width, height);

            /// encode image to data-uri with base64 version of compressed image
            return canvas.toDataURL();
        }

How do I solve this issue?

@ChrisHodges I don't want to have to change or add my html elements, I was wondering if it was possible to create a js function for it. — stcho, Aug 15 '14 at 21:49

score 0 · Answer 1 · answered Aug 15 '14 at 23:22

This implementation works great for me.

function imageToDataURL(image, width, height) {
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(image, 0, 0, width, height);
        return canvas.toDataURL();
}

score 0 · Answer 2 · edited May 23 '17 at 10:26

Is your image loaded when you draw it onto the canvas ?

You have to call the drawImage method after your image has been loaded, so into the handler function of the onload event of your image, like so :

// You create your img
var img = document.createElement('img');

// When the img is loaded you can treat it ;)
img.src = 'your_data_url/your_url';

function imageResize(img, width, height) {

        /// create an off-screen canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        /// set its dimension to target size
        canvas.width = width;
        canvas.height = height;
        img.onload = function() { 
            /// draw source image into the off-screen canvas:
            ctx.drawImage(this, 0, 0, width, height); 
            var dataUrl = ctx.toDataURL();
            // Here you can use and treat your DataURI
        };
    }

JavaScript is an asynchronous language, which means that it will not interrupt the execution of your code when object such as images or videos are loaded.

In place it will trigger an event called "load" when the loading of the object is finished, and will call an event handler (a function that you previously defined) when the object will be loaded.

P.S Please see my answer on this question : https://stackoverflow.com/a/26884245/4034886

If you have another problem with that code dont hesitate to ask me ;)

Sorry for my crappy english btw.

JS Function with parameters image, width, height and return a resized base 64 image data

2 Answers2