Javascript img to base64 不加載

Question

我開發了將圖像發送到服務器的Photoshop 擴展。

編輯： photoshop 中的擴展從定義 GUI 的html文件構建， js文件基本上與任何 js 文件相同，但它也可以啟動 photoshop 功能並且它是從 photoshop 執行的。

我需要從用戶的文件系統發送圖像（從 C:\\path\\to\\images）

為了對圖像進行編碼，我將它們轉換為 dataURL (base64)。

問題發生在我第一次將圖像轉換為 dataURL 時。 但是在第二次等中，它設法轉換了圖像，一切都很好。 第一次沒有加載圖像。

我有一個圖像所在的文件夾，我想從那里上傳圖片，我使用了一個在照片上運行的循環並將它們設置為<img src=path> ，然后它通過<canvas>將它們轉換為基於 64。

我的代碼：

function convertLayersToBase64(imgHeight, imgWidth){
    var img = new Image();
    images = [];
    for (var i=0; i<=imagesLength; i++){
        path = folder + "layer " + i +".png";
        img.src = path;
        var canvas = document.createElement("canvas");
        canvas.height = imgHeight;
        canvas.width = imgWidth;
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0); 
        var dataURL = canvas.toDataURL();
        images.push( dataURL );
    }
    return images;
}

我試圖通過延遲來延遲轉換：

function delay(time) {
    var d1 = new Date();
    var d2 = new Date();
    while (d2.valueOf() < d1.valueOf() + time) {
        d2 = new Date();
    }
}

准備好后的 JQuery：

$(function(){
    images.push(getBase64Image());
});

圖像完成

while(!img.complete)
    continue;

（在最后一個例子中，代碼陷入循環）

將函數放入：

img.onload = function(){
    //the function here..
    //when I use this method it succeed to convert
    //only the last image.
}

沒有任何效果..我嘗試了一切，請告訴我要更改什么以及如何解決。

編輯：在我看來，加載圖像的唯一方法是當代碼

Answer 1

函數onload是一個異步操作。 您不能只將images作為convertLayersToBase64函數中的最后一條語句返回。 您應該使用promises ，或者更簡單的方法是使用callback函數。

function convertLayersToBase64(imgHeight, imgWidth, callback){
    var images = [];
    for (var i = 0; i <= imagesLength; i++) {
         var img = new Image();
         img.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.height = imgHeight;
            canvas.width = imgWidth;
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(this, 0, 0); 
            var dataURL = canvas.toDataURL();
            images.push(dataURL);
            if(images.length === imagesLength) {
               callback(images);
            }
        }

        path = folder + "layer " + i +".png";
        img.src = path;
    }
}

你會這樣稱呼它：

convertLayersToBase64(200, 200, function(images) {
     console.log('hii, i got images', images);
});

這顯然沒有任何形式的錯誤檢查，甚至沒有最佳實踐指南，但我會讓你來實現它。