Canvas toDataURL（）函数完成后执行函数

Question

I'm converting images to base64 using canvas. What i need to do is convert those images and then show the result to the user (original image and base64 version). Everything works as expected with small images, but when i try to convert large images (>3MB) and the conversion time increases, the base64 version is empty. This might be is caused because the result is shown before the toDataURL() function is completed.

I need to show the result after all the needed processing has ended, for testing purposes.

Here's my code:

var convertToBase64 = function(url, callback)
{
    var image = new Image();

    image.onload = function ()
    {
        //create canvas and draw image...

        var imageData = canvas.toDataURL('image/png');          
        callback(imageData);
    };

    image.src = url;
};


convertToBase64('img/circle.png', function(imageData)
{
    window.open(imageData);
});

Even though i'm using image.onload() with a callback, i'm unable to show the result after the toDataURL() has been processed.

What am i doing wrong?

UPDATE: I tried both the solutions below and they didn't work. I'm using AngularJS and Electron in this project. Any way i can force the code to be synchronous? Or maybe some solution using Promises?

UPDATE #2: @Kaiido pointed out that toDataURL() is in fact synchronous and this issue is more likely due to maximum URI length. Since i'm using Electron and the image preview was for testing purposes only, i'm going to save the file in a folder and analise it from there.

Answer 1

Your code seems absolutely fine. Not sure why isn't working you. Maybe, there are some issues with your browser. Perhaps try using a different one. Also you could use a custom event , which gets triggered when the image conversion is competed.

// using jQuery for custom event

function convertToBase64(url) {
    var image = new Image();
    image.src = url;
    image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0);
        var imageData = canvas.toDataURL();
        $(document).trigger('conversionCompleted', imageData);
    };
};

convertToBase64('4mb.jpg');
$(document).on('conversionCompleted', function(e, d) {
    window.open(d);
});

Answer 2

This approach might work for you. It shows the image onscreen using the native html element, then draws it to a canvas, then converts the canvas to Base64, then clears the canvas and draws the converted image onto the canvas. You can then scroll between the top image (original) and the bottom image (converted). I tried it on large images and it takes a second or two for the second image to draw but it seems to work...

Html is here:

<img id="imageID">
<canvas id="myCanvas" style="width:400;height:400;">
</canvas>

Script is here:

var ctx;
function convertToBase64(url, callback)
{
  var image = document.getElementById("imageID");
  image.onload = function() {
    var canvas = document.getElementById("myCanvas");
    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    ctx = canvas.getContext("2d");
    ctx.drawImage(image,0,0);
    var imageData = canvas.toDataURL('image/png');
    ctx.fillStyle ="#FFFFFF";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    callback(imageData);
  };
  image.src = url;
};

var imagename = 'images/bigfiletest.jpg';

window.onload = function () {
  convertToBase64(imagename, function(imageData) {
    var myImage = new Image();
    myImage.src = imageData;
    ctx.drawImage(myImage,0,0);    
  });
}

Note that I also tried it without the callback and it worked fine as well...