将数据URI转换为文件，然后追加到FormData

Question

将数据URI转换为文件，然后追加到FormData

我一直在尝试重新实现HTML 5映像上传器论Mozilla的黑客行为站点，但它适用于WebKit浏览器。部分任务是从canvas对象并将其附加到FormData对象进行上载。

问题是canvas有toDataURL函数返回图像文件的表示形式，FormData对象只接受来自文件API.

Mozilla解决方案在canvas:

var file = canvas.mozGetAsFile("foo.png");

.这在WebKit浏览器上是不可用的.我能想到的最好的解决方案是找到一些方法将数据URI转换为File对象，我认为它可能是FileAPI的一部分，但在我的一生中，我无法找到这样的方法。

有可能吗？如果没有，还有其他选择吗？

谢谢。

Answer 1

这个在IOS和Safari中工作。您需要使用Stoive的ArrayBuffer解决方案，但不能像Vava 720所指出的那样使用BloBuilder，下面是两者的mashup。function&nbsp;dataURItoBlob(dataURI)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;byteString&nbsp;=&nbsp;atob(dataURI.split(',')[1]); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ab&nbsp;=&nbsp;new&nbsp;ArrayBuffer(byteString.length); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ia&nbsp;=&nbsp;new&nbsp;Uint8Array(ab); &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;byteString.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ia[i]&nbsp;=&nbsp;byteString.charCodeAt(i); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Blob([ab],&nbsp;{&nbsp;type:&nbsp;'image/jpeg'&nbsp;});}

Answer 2

火狐canvas.toblob()和canvas.mozGetAsFile()方法。但其他浏览器没有。我们可以从画布中获取Dataaurl，然后将dataurl转换为BLOB对象。这是我的dataURLtoBlob()功能。很短。function&nbsp;dataURLtoBlob(dataurl)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;arr&nbsp;=&nbsp;dataurl.split(','),&nbsp;mime&nbsp;=&nbsp;arr[0].match(/:(.*?);/)[1], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bstr&nbsp;=&nbsp;atob(arr[1]),&nbsp;n&nbsp;=&nbsp;bstr.length,&nbsp;u8arr&nbsp;=&nbsp;new&nbsp;Uint8Array(n); &nbsp;&nbsp;&nbsp;&nbsp;while(n--){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;u8arr[n]&nbsp;=&nbsp;bstr.charCodeAt(n); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Blob([u8arr],&nbsp;{type:mime});}在FormData中使用此函数处理画布或数据。例如：var&nbsp;dataurl&nbsp;=&nbsp;canvas.toDataURL('image/jpeg',0.8);var&nbsp;blob&nbsp;=&nbsp;dataURLtoBlob(dataurl);var&nbsp;fd&nbsp;=&nbsp;new&nbsp;FormData(); fd.append("myFile",&nbsp;blob,&nbsp;"thumb.jpg");此外，您还可以创建一个HTMLCanvasElement.prototype.toBlob方法用于非壁虎引擎浏览器。if(!HTMLCanvasElement.prototype.toBlob){ &nbsp;&nbsp;&nbsp;&nbsp;HTMLCanvasElement.prototype.toBlob&nbsp;=&nbsp;function(callback,&nbsp;type,&nbsp;encoderOptions){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dataurl&nbsp;=&nbsp;this.toDataURL(type,&nbsp;encoderOptions); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bstr&nbsp;=&nbsp;atob(dataurl.split(',')[1]),&nbsp;n&nbsp;=&nbsp;bstr.length,&nbsp;u8arr&nbsp;=&nbsp;new&nbsp;Uint8Array(n); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(n--){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;u8arr[n]&nbsp;=&nbsp;bstr.charCodeAt(n); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;blob&nbsp;=&nbsp;new&nbsp;Blob([u8arr],&nbsp;{type:&nbsp;type}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback.call(this,&nbsp;blob); &nbsp;&nbsp;&nbsp;&nbsp;};}现在canvas.toBlob()适用于所有现代浏览器，而不仅仅是Firefox。例如：canvas.toBlob( &nbsp;&nbsp;&nbsp;&nbsp;function(blob){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fd&nbsp;=&nbsp;new&nbsp;FormData(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fd.append("myFile",&nbsp;blob,&nbsp;"thumb.jpg"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//continue&nbsp;do&nbsp;something... &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;'image/jpeg', &nbsp;&nbsp;&nbsp;&nbsp;0.8);