在Firefox中調整base64圖像的大小

Question

我仍然是編碼和HTML5的新手。 我有一個包含多個畫布的HTML5階段。 我需要從該階段獲取base64圖像並調整其大小，然后獲取調整后的畫布的base64圖像。 這是我使用的代碼：

stage.toDataURL({
    callback: function(dataUrl) {
        var tmp_img = new Image();
        tmp_img.src = dataUrl;

        //resize image to 45x75
        var canvas = document.getElementById('hidden_canvas');
        canvas.width = 45;
        canvas.height = 75;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(tmp_img, 0, 0, canvas.width, canvas.height);
        dataUrl = canvas.toDataURL();
)};

dataUrl在Chrome中是正確的，但是當我在Firefox中運行代碼時，似乎Firefox沒有生成正確的base64代碼。

我真的很感謝任何幫助

Answer 1

您偶然發現了一個常見問題。

tmp_img.src將tmp_img.src加載到新映像中-但這需要時間。 因此，即使在圖片加載之前，javascript仍會在其下方繼續執行您的代碼。 結果是您有時會在tmp_img完全加載並可以使用之前嘗試ctx.drawImage 。

解決方法是將代碼重構為使用tmp_img.onload 。 當最終可以使用tmp_img時，.onload會觸發一個回調函數。 重構可能看起來像這樣：

var tmp_img = new Image();

tmp_img.onload=function(){

    //resize image to 45x75
    var canvas = document.getElementById('hidden_canvas');
    canvas.width = 45;
    canvas.height = 75;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(tmp_img, 0, 0, canvas.width, canvas.height);
    dataUrl = canvas.toDataURL();

}

tmp_img.src = dataUrl;

// more javascript

JavaScript將按以下順序執行上述代碼：

1. 創建一個新的Image對象
2. 請參閱tmp_img.onload並不要在圖像完全加載后執行該代碼
3. 設置tmp_img.src並開始加載圖像。
4. 繼續“更多javascript”
5. 完全加載映像后，執行.onload回調函數中的所有內容。

看來您正在使用KineticJS，是嗎？

如果是這樣，那么代替stage.toDataURL你可以使用stage.toImage 。 這樣，當執行stage.toImage回調時，您已經加載了圖像（您不必擔心等待圖像加載）。 然后，只需.drawImage KineticJS在回調中提供的圖像即可。