Question

我正在尝试将很多PNG图像转换为Base64，然后通过发布请求将它们发送到我的服务器端应用程序。

我已经查了一下，我发现这个函数已经在这里完成了D-Link DWM-156，这正是我想要的：

function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
    var canvas = document.createElement('CANVAS'),
    ctx = canvas.getContext('2d'), dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
    canvas = null; 
};
img.src = url;}

我这样使用它：

convertImgToBase64URL(model.cells[i].attrs.image["xlink:href"], function(base64Img){
            // Base64DataURL
            console.log(base64Img)
        });

正如您所看到的，每个单元格都包含一个图像，我需要在通过发布请求发送之前将其转换为base64，我的问题是如何将PNG图像数组转换为Base64并等待它们完成然后发送我的数组，我知道这是一个ajax请求，我不能同步这样做，因为它不是很自然的javascript，但我似乎无法找到解决方案。如何正确完成？

Answer 1

问题基本归结为：How can I wait for a set of asynchronous callback functions

由于这是简单的Javascript代码，等待部分实现起来有点复杂（在该答案中也有例子），一个非常好用的选项来自answer suggesting using async.js。

另一种可能性是使用Promise库并将函数回调包装在promise中，然后等待所有库完成（通常所有库都支持这样的实用程序函数）

Answer 2

最好的方法是在转换数据后手动提交表单。

convertImgToBase64URL(model.cells[i].attrs.image["xlink:href"], function(base64Img){
        // Base64DataURL
        console.log(base64Img)
        $('#img2b64').submit()

    });

将图像数组png转换为Base64

2 个答案: