将图像数组转换为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

回答

相关问题