將圖像數組轉換爲Base64

我試圖將PNG圖像轉換成Base64，然後通過發送請求將它們發送到我的服務器端應用程序。將圖像數組轉換爲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，但我似乎無法找到解決方案。這是如何正確完成的？

來源

2015-06-20 azelix

你總是可以進入封閉地獄...... – Downgoat

你需要確保'ctx'和'dataURL'聲明與'在「的onload」回調var'。 – Pointy

您可以使用jQuery.Deferred（），也可以將這些base64字符串添加到數組中，並通過ajax發送完整的數組。在發送之前，你可以計算''''迭代器並驗證'array_base64 [i]！= null' – mk117

的問題基本上可以歸結爲：How can I wait for a set of asynchronous callback functions

由於這是普通的JavaScript代碼時，等待的部分是有點複雜來實現（也有在回答樣本爲好），一個非常容易使用的選項從answer suggesting using async.js。

另一種可能性是使用無極庫和包裹回調函數在一個承諾，然後等待所有要完成（通常所有的庫有這樣的實用功能支持）

來源

2015-06-20 10:36:30 vvondra

再次被我的手機欺騙！ –

最好的辦法是提交數據轉換後手動形式。

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

    });

來源

2015-06-20 10:39:33 GuillaumeL

從我的理解，問題是如何提交數據時*全部*轉換 – vvondra

Wondra指出，我需要所有的數據一次。 – azelix

所以你必須檢查延期和承諾。它允許你鏈接ajax調用，然後在完成所有請求時使用單個回調。 – GuillaumeL

將圖像數組轉換爲Base64

回答

相關問題