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

这显然没有任何形式的错误检查，甚至没有最佳实践指南，但我会让你来实现它。