javascript - 将数据 URI 转换为文件，然后附加到 FormData

Question

我一直在尝试重新实现一个 HTML5 图像 uploader ，例如 on the Mozilla Hacks网站，但它适用于 WebKit 浏览器。部分任务是从 canvas 对象中提取图像文件并将其附加到 FormData上传对象。

问题在于，虽然 canvas 有 toDataURL 函数来返回图像文件的表示，但 FormData 对象只接受来自 File API 的 File 或 Blob 对象。 .

Mozilla 解决方案在 canvas 上使用了以下仅限 Firefox 的功能:

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

...这在 WebKit 浏览器上不可用。我能想到的最佳解决方案是找到某种方法将 Data URI 转换为 File 对象，我认为这可能是 File API 的一部分，但我一辈子都找不到这样做的东西。

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

Answer 1

在玩了一些东西之后，我自己设法解决了这个问题。

首先，这会将 dataURI 转换为 Blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

从那里，将数据附加到表单以便将其作为文件上传很容易:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);