Question

我开发了 Photoshop扩展程序，可以将图像发送到服务器。

编辑：Photoshop中的扩展程序来自定义GUI的 html 文件， js 文件基本上与任何js文件相同，但它也可以启动photoshop功能，从photoshop执行。

我需要从用户的文件系统发送图像（从C：\ path \到\ images）

要对图像进行编码，我将它们转换为dataURL（base64）。

问题在我第一次将图片转换为dataURL时发生。但在第二次，它，它设法转换图像，一切都很好。第一次没有加载图像。

我有一个图像所在的文件夹，我想从那里上传图片，我使用了一个在照片上运行的循环并将它们设置为<img src=path>，然后通过{{1 }}

我的代码：

<canvas>

我试图通过延迟延迟转换：

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

JQuery准备好了：

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

Img.complete

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

（在最后一个例子中，代码卡在循环中）

将功能放入：

while(!img.complete)
    continue;

没有任何效果.. 我尝试了一切，请告诉我要改变什么以及如何解决这个问题。

编辑：在我看来，在代码加载图片的唯一方法

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

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

Javascript img到base64不加载

1 个答案: