如何将HTML5 Canvas图片以二进制文件形式发送至服务器？

我明白你遇到的困扰了：用Postman传图片能正常工作，但用Canvas导出的内容POST给服务器就报错，核心问题出在canvas.toDataURL()返回的内容格式上。

toDataURL()返回的是Data URI格式的字符串，也就是开头带着data:image/png;base64,的完整标识，但你的服务器期望的是纯图片数据（要么是二进制文件，要么是不带前缀的base64编码内容），直接传递完整的Data URI就会让服务器识别失败。

下面给你两种针对性的解决方案：

方案一：剥离前缀，传递纯Base64内容 #

只需要把Data URI开头的标识部分去掉，把后面的纯base64编码内容传给服务器即可：

canvas.getContext('2d').drawImage(video, 95, 95, 310, 310, 0, 0, 350, 350);
const request_image = canvas.toDataURL('image/png');
// 移除Data URI的前缀，仅保留base64编码部分
const pureBase64 = request_image.replace(/^data:image\/png;base64,/, '');
$.post({
  url: 'http://localhost:8088/',
  data: pureBase64,
  success: function (res) {
    console.log(123);
    console.log(res);
  }
});

方案二：转为Blob，用FormData模拟常规文件上传（更推荐） #

这种方式和你用Postman上传图片的逻辑完全一致，服务器可以像处理普通文件上传一样解析，兼容性和传输效率都更好：

canvas.getContext('2d').drawImage(video, 95, 95, 310, 310, 0, 0, 350, 350);
// 将Canvas内容转为PNG格式的Blob对象
canvas.toBlob(function(blob) {
  const formData = new FormData();
  // 把Blob添加到FormData，第一个参数是服务器接收的字段名（比如"image"），第三个是文件名
  formData.append('image', blob, 'canvas-screenshot.png');
  
  $.ajax({
    url: 'http://localhost:8088/',
    type: 'POST',
    data: formData,
    // 必须设置这两个参数，否则jQuery会错误处理FormData
    processData: false,
    contentType: false,
    success: function (res) {
      console.log(123);
      console.log(res);
    }
  });
}, 'image/png');

为什么更推荐方案二？ #

• 和Postman的上传逻辑对齐，服务器无需额外适配base64，直接按文件上传处理即可
• Blob是二进制格式，比base64编码小30%左右，传输速度更快
• 现代浏览器都支持canvas.toBlob()，兼容性没问题

你可以根据服务器的接收逻辑选择对应方案，如果服务器原本是处理文件上传的，方案二肯定是最优解。

内容的提问来源于stack exchange，提问作者lfreew1ndl