Canvas内容转为Blob并上传的核心是调用toBlob()方法生成Blob对象，再通过FormData提交；该方法比toDataURL()更高效，支持指定type和quality，需注意CORS、兼容性及大图处理。
Canvas内容转为Blob并上传，核心是用toBlob()方法生成二进制对象，再通过FormData提交到服务器。
调用toBlob生成Blob对象
toBlob()是Canvas 2D上下文的原生方法，比toDataURL()更高效，避免Base64编码开销，适合大图或频繁上传场景。
- 语法：
canvas.toBlob(callback, type, quality) -
callback接收一个Blob参数，必须是函数；不能直接返回Blob（异步） -
type常用"image/png"或"image/jpeg"；JPEG支持quality（0.1–1.0） - 若未指定type，浏览器默认使用
image/png
构造FormData并上传
获取Blob后，将其附加到FormData中，用fetch或XMLHttpRequest发送。
- 给Blob起个字段名（如
"image"），服务端据此解析文件 - 可额外添加其他字段，如
formData.append("userId", "123") - 使用
fetch时无需设置Content-Type头，浏览器会自动设为multipart/form-data并带上边界
完整示例代码
以下是一个简洁可用的上传流程：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
if (!blob) {
console.error('Canvas转Blob失败');
return;
}
const formData = new FormData();
formData.append('image', blob, 'canvas-draw.jpg'); // 第三个参数为文件名（可选）
fetch('/upload', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => console.log('上传成功:', data))
.catch(err => console.error('上传出错:', err));
}, 'image/jpeg', 0.9);
注意事项与常见问题
实际使用中需留意跨域、尺寸限制和兼容性问题：
-
CORS限制：若Canvas绘制了来自其他域名的图片（如
<img alt="HTML5中Canvas将画布内容转化为Blob对象上传" >），调用toBlob()可能被拒绝（安全策略）。确保图片启用crossOrigin="anonymous" -
移动端兼容性：iOS Safari 6.1+、Android Browser 4.4+ 支持
toBlob()；旧版需用toDataURL()+dataURLtoBlob降级处理 - 内存与超时：超大画布（如4000×3000）生成Blob可能卡顿，建议压缩分辨率或提示用户等待
-
文件名扩展名：第三个参数影响服务端识别类型，建议与
type一致（如image/jpeg对应.jpg）
