如何将Blob转换为JPG格式图片？cropper.js转换功能异常求助

我来帮你排查下这段代码的问题，其实是几个关键细节没处理对，导致功能无法正常工作：

原代码的核心错误 #

• 你直接把Blob对象拼到data:image/png;base64,后面了，但Blob是二进制对象，不是base64字符串，这样根本无法生成有效的图片src
• 你向FormData中添加的是DOM元素（img标签），但FormData需要的是Blob/File类型的二进制数据，这是功能失效的关键

修正后的实现方案 #

方案一：直接使用Blob存入FormData（最简洁推荐）

不需要额外创建img元素，直接把裁剪得到的Blob添加到FormData即可，这是最高效的方式：

cropper.getCroppedCanvas().toBlob(function (blob) {
  var formData = new FormData();
  // 直接将Blob添加到FormData，第三个参数可指定上传后的文件名
  formData.append('file', blob, 'cropped-image.png');
  
  // 这里可以继续编写你的上传逻辑，比如用fetch发送请求
  // fetch('/your-upload-api', {
  //   method: 'POST',
  //   body: formData
  // })
  // .then(res => res.json())
  // .then(data => console.log('上传成功', data));
});

方案二：需要预览图片时的处理

如果你确实需要先在页面上预览裁剪后的图片，再存入FormData，可以这么做：

cropper.getCroppedCanvas().toBlob(function (blob) {
  var formData = new FormData();
  var creimag = document.createElement('img');
  
  // 使用URL.createObjectURL生成Blob的临时本地URL，作为图片的src
  creimag.src = URL.createObjectURL(blob);
  // 可以给图片加个样式方便预览
  creimag.style.maxWidth = '300px';
  
  // 将预览图添加到页面
  document.body.appendChild(creimag);
  
  // 依然是把原始Blob添加到FormData，而不是img元素
  formData.append('file', blob, 'cropped-image.png');
  
  // 图片加载完成后，记得释放临时URL的资源，避免内存泄漏
  creimag.onload = function() {
    URL.revokeObjectURL(creimag.src);
  };
});

关键知识点说明 #

• toBlob回调返回的blob已经是裁剪后的图片二进制数据，直接使用它就满足上传需求
• URL.createObjectURL可以快速生成Blob的临时访问地址，适合用于图片预览，但使用后一定要调用URL.revokeObjectURL释放资源
• FormData的append方法第二个参数支持Blob/File对象，第三个参数是可选的文件名，后端可以通过这个参数获取上传文件的名称

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