Canvas toDataURL()函数完成后执行函数

Question

我正在使用画布将图像转换为 base64。我需要做的是转换这些图像，然后将结果显示给用户（原始图像和 base64 版本）。小图像一切正常，但是当我尝试转换大图像（> 3MB）并且转换时间增加时，base64版本为空。 这可能是 is 导致的，因为结果在 toDataURL() 函数完成之前显示。

为了测试目的，我需要在所有需要的处理结束后显示结果。

这是我的代码：

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);
});

即使我使用带有回调的 image.onload()，在处理 toDataURL() 后我也无法显示结果。

我做错了什么？

更新：我尝试了以下两种解决方案，但均无效。我在这个项目中使用 AngularJS 和 Electron。 我可以通过什么方式强制代码同步？ 或者使用 Promises 的一些解决方案？

更新 #2：@Kaiido 指出 toDataURL() 实际上是同步的，这个问题更可能是由于最大 URI 长度。由于我使用的是 Electron 并且图像预览仅用于测试目的，我将把文件保存在一个文件夹中并从那里进行分析。

Answer 1

您的代码看起来绝对没问题。不知道为什么对你不起作用。可能是您的浏览器有问题。也许尝试使用不同的。您也可以使用custom event，它会在图像转换完成时触发。

// 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

这种方法可能适合您。它使用原生 html 元素在屏幕上显示图像，然后将其绘制到画布上，然后将画布转换为 Base64，然后清除画布并将转换后的图像绘制到画布上。然后，您可以在顶部图像（原始）和底部图像（转换后）之间滚动。我在大图像上尝试过，第二张图像需要一两秒钟才能绘制，但它似乎工作......

HTML 在这里：

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

脚本在这里：

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);    
  });
}

请注意，我也尝试过不使用回调，并且效果也很好......