Canvas toDataURL（）函數完成后執行函數

Question

我正在使用畫布將圖像轉換為base64。 我需要做的是轉換這些圖像，然后將結果顯示給用戶（原始圖像和base64版本）。 小圖像可以正常工作，但是當我嘗試轉換大圖像（> 3MB）且轉換時間增加時，base64版本為空。 這可能是由於在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 ，該競爭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);    
  });
}

請注意，我也嘗試了沒有回調的情況，並且效果也很好...