从 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") 进行检查，并将其用于图像，可以看到创建的画布没有问题，图像可以被渲染。

- The Coder

Answer 1

在定义canvasScaled之后，将此内容添加到第二行。

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

- Abdelrahman Gobarah

---

现在图片完全是白色的 :D - The Coder

而且 ctx.fillRect(0, 0, canvas.width, canvas.height); 不应该是 ctx.fillRect(0, 0, canvasScaled.width, canvasScaled.height); 吗？ - The Coder

ctx.globalCompositeOperation = 'source-over'将此代码添加进去。 - Abdelrahman Gobarah

没有运气，仍然是一张白色的图片。 - The Coder

Answer 2

尝试在不调用new File的情况下使用data.append("file", blob)。根据MDN的说法，File对象是Blob的一种特殊类型，可以在任何接受Blob的上下文中使用。特别地，FileReader、URL.createObjectURL()、createImageBitmap()和XMLHttpRequest.send()都接受Blob和File。

- Gennady Dogaev

---

起初，我只是这样做，但结果相同。我使用“文件”来模拟正常的文件选择器。 - The Coder