获取从 blob URL 生成的黑色图像

Question

我正在使用库react-avatar-editor来创建用户的个人资料图片。 下面是我使用的将裁剪后的图像发送到服务器的代码

const canvasScaled = this.editor.getImageScaledToCanvas(); //a canvas object
canvasScaled.toBlob((blob) => {
  this.setState({
      preview: blob
    },
    () => {
      let data = new FormData();
      const file = new File([blob], "my-image", {
        type: "image/png"
      });
      data.append("file", file);
      axios({
        method: "POST",
        data: data,
        url: "/media",
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then().catch()
    }
  );
})

但是在服务器生成的图像是黑色图像。 测试了许多文件，但结果相同 - 黑色图像。

我的后端服务是用 JAVA 编写的，所以我测试了后端服务是否正确处理图像，我选择了一个简单的文件

<input type="file" accept={"image/png"} onChange={onSelect}/>

<button onClick={() => {
        const data = new FormData();
        data.append("file", this.state.file);
        axios({
            method: "POST",
            data: data,
            url: "/media",
            headers: {
              'Content-Type': 'multipart/form-data'
            }
        }).then().catch()
}}>Send<button>

是的，服务端代码在上面的POST请求中工作正常。 这意味着，我在 react-avatar-editor 处理代码中肯定写了一些错误。

是导致问题的blob吗？ 在文件选择器的情况下如何发送图像？ Base64 还是 Blob？

更新：我注意到一个图像的奇怪行为。 如果我上传这个文件 这被转换为 这不是一个完整的黑色图像。 颜色发生了一些可疑的事情。

要检查库本身是否正在创建黑色图像，我使用canvasScaled.toDataURL("image/png")检查它并将其用于图像，是的，创建的画布没有问题，图像正在渲染。

Answer 1

试试data.append("file", blob); 无需调用new File 。 根据 MDN，

File 对象是一种特定类型的 Blob，可以在 Blob 可以使用的任何上下文中使用。 特别是，FileReader、URL.createObjectURL()、createImageBitmap() 和 XMLHttpRequest.send() 接受 Blob 和文件。

Answer 2

在定义canvasScaled后在第二行中添加它

var ctx = canvasScaled.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);