我一直在尝试重新实现一个像Mozilla Hacks站点上的那样的 HTML5 图像上传器，但它适用于 WebKit 浏览器。部分任务是从canvas对象中提取图像文件并将其附加到FormData对象以进行上传。
问题是虽然canvas具有toDataURL返回图像文件表示的函数，但 FormData 对象仅接受来自File API 的File 或 Blob 对象。
Mozilla 解决方案在 上使用了以下仅限 Firefox 的功能canvas：
var file = canvas.mozGetAsFile("foo.png");
...在 WebKit 浏览器上不可用。我能想到的最佳解决方案是找到某种方法将 Data URI 转换为 File 对象，我认为这可能是 File API 的一部分，但我一生都找不到这样做的方法。
是否可以？如果没有，有什么替代方案吗？
谢谢。
在玩了几件事之后，我设法自己解决了这个问题。
首先，这会将 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);
BlobBuilder 和 ArrayBuffer 现在已弃用，以下是使用 Blob 构造函数更新的顶部注释代码：
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
这个适用于 iOS 和 Safari。
您需要使用 Stoive 的 ArrayBuffer 解决方案，但不能使用 BlobBuilder，如 vava720 所示，所以这里是两者的混搭。
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' });
}
Firefox 有canvas.toBlob()和canvas.mozGetAsFile()方法。
但其他浏览器没有。
我们可以从画布中获取 dataurl，然后将 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 一起使用来处理您的画布或 dataurl。
例如：
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为非 Gecko 引擎浏览器创建一个方法。
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
);
我的首选方式是canvas.toBlob()
但无论如何，这是使用 fetch ^^ 将 base64 转换为 blob 的另一种方法，
var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
fetch(url)
.then(res => res.blob())
.then(blob => {
var fd = new FormData()
fd.append('image', blob, 'filename')
console.log(blob)
// Upload
// fetch('upload', {method: 'POST', body: fd})
})