將圖像數組png轉換為Base64

Question

我正在嘗試將許多PNG圖像轉換為Base64，然后通過發布請求將其發送到我的服務器端應用程序。

我查了一下，發現這個函數是作者在這里完成的http://jsfiddle.net/handtrix/yvq5y/ ，它正是我想要的：

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

問題基本上可以歸結為： 我如何等待一組異步回調函數

由於這是純Javascript代碼，因此等待部分的實現有些復雜（該答案中也有示例），因此從建議使用async.js的答案中可以找到一個非常容易使用的選項。

另一種可能性是使用Promise庫並將函數回調包裝在promise中，然后等待所有函數實現（通常，所有庫都支持這種實用程序函數）

Answer 2

最好的方法是在數據轉換后手動提交表單。

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

    });