标准的HTML文件上传工作方式如下：
<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"
name="form" url="someurl">
<input type="file" name="file" id="file" />
</form>
在我的情况下，我将一张图片加载到HTML5画布中，并希望将其作为文件提交到服务器。
我可以这样做：
var canvas; // some canvas with an image
var url = canvas.toDataURL();
这给了我一个以base64形式的image/png图像。
我该如何以与input type="file"相同的方式将base64图像发送到服务器？
问题在于，base64文件与input type="file"内部的文件类型不同。
我能否以某种方式转换base64，使得服务器上的文件类型与之相同？
出于安全原因，您无法直接设置文件输入元素的值。
如果要使用文件输入元素：
或者，您可以使用Ajax来POST画布数据：
您问了blob相关的问题：
var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
var file=new Blob([new Uint8Array(array)], {type: 'image/png'});
var formdata = new FormData();
formdata.append("myNewFileName", file);
$.ajax({
url: "uploadFile.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
}).done(function(respond){
alert(respond);
});
注意：blob通常在最新的浏览器中得到支持。
需要将画布图像转换为base64，然后从base64转换为二进制。使用.toDataURL()和dataURItoBlob()实现此操作。
这是一个相当棘手的过程，需要将几个SO答案、各种博客文章和教程拼凑在一起。
针对Ateik的评论，这里有一个示例，可以复制原始帖子，以防您无法查看原始链接。您还可以在此处fork我的项目。
代码很多，但我正在做的核心是获取画布元素：
<canvas id="flatten" width="800" height="600"></canvas>
将其上下文设置为2D
var snap = document.getElementById('flatten');
var flatten = snap.getContext('2d');
function postCanvasToURL() {
// Convert canvas image to Base64
var img = snap.toDataURL();
// Convert Base64 image to binary
var file = dataURItoBlob(img);
}
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});
}如果您只需要 base64，则可以停在那里，而在我的情况下，我需要再次转换为二进制，以便我可以传递数据到 Twitter（使用 OAuth）而无需使用数据库。结果发现，您可以在 Twitter 上发布二进制文件，这非常酷，Twitter 会将其转换回图像。
最后这就是对我有效的方法。
canvas.toBlob((blob) => {
let file = new File([blob], "fileName.jpg", { type: "image/jpeg" })
}, 'image/jpeg');
目前在规范中（截至2017年4月支持度很低）
Canvas.toBlob();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
编辑：
该链接提供了一个 polyfill（从措辞上看似乎较慢），其代码与 @pixelomo 的答案大致等效，但具有与本地 toBlob 方法相同的 API：
基于 toDataURL 的低性能 polyfill：
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var canvas = this;
setTimeout(function() {
var binStr = atob( canvas.toDataURL(type, quality).split(',')[1] ),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++ ) {
arr[i] = binStr.charCodeAt(i);
}
callback( new Blob( [arr], {type: type || 'image/png'} ) );
});
}
});
}
使用方式如下：
canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality
canvas.toBlob(function(blob){...}); // PNG
if form.is_valid():
url = form.cleaned_data['url']
url_decoded = b64decode(url.encode())
content = ContentFile(url_decoded)
your_model.model_field.save('image.png', content)
const canvas = document.querySelector("canvas");
canvas.toBlob(blob => {
const file = new File([blob], "image.png");
});
我过去经常很简单地做这件事
var formData = new FormData(),
uploadedImageName = 'selfie.png';
canvas.toBlob(function (blob) {
formData.append('user_picture', blob, uploadedImageName);
$.ajax({
data: formData,
type: "POST",
dataType: "JSON",
url: '',
processData: false,
contentType: false,
});
});
使用toBlob和TypeScript的2023年答案：
const dataBlob = await new Promise<Blob | null>(
(resolve) => canvas.toBlob(
(blob) => resolve(blob),
"image/png",
)
);
canvas.toBlob()：将 canvas 元素中的内容转换为 Blob（二进制大对象） 对象。了解更多请访问 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob - Ray Nicholus