将数据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 dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });}

Answer 2

火狐canvas.toblob()和canvas.mozGetAsFile()方法。

但其他浏览器没有。

我们可以从画布中获取Dataaurl，然后将dataurl转换为BLOB对象。

这是我的dataURLtoBlob()功能。很短。

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});}

在FormData中使用此函数处理画布或数据。

例如：

var dataurl = canvas.toDataURL('image/jpeg',0.8);var blob = dataURLtoBlob(dataurl);var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");

此外，您还可以创建一个HTMLCanvasElement.prototype.toBlob方法用于非壁虎引擎浏览器。

if(!HTMLCanvasElement.prototype.toBlob){
    HTMLCanvasElement.prototype.toBlob = function(callback, type, encoderOptions){
        var dataurl = this.toDataURL(type, encoderOptions);
        var bstr = atob(dataurl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {type: type});
        callback.call(this, blob);
    };}

现在canvas.toBlob()适用于所有现代浏览器，而不仅仅是Firefox。例如：

canvas.toBlob(
    function(blob){
        var fd = new FormData();
        fd.append("myFile", blob, "thumb.jpg");
        //continue do something...
    },
    'image/jpeg',
    0.8);