獲取從 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);