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

Question

我正在使用canvas 将图像转换为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

你的代码看起来绝对没问题。不知道为什么你不起作用。也许，您的浏览器存在一些问题。也许尝试使用不同的。您还可以使用自定义事件，该事件在图像转换完成时触发。

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