2

我目前正在开发一个 webapp，它将用于在调整大小后上传文件。当我工作时localhost:3000，调整大小的过程就像一个魅力，但是当我工作时192.168.0.5:3000（或另一个域），canvas.toDataURL 返回一个空字符串而不是 base64，并且调整大小永远不会结束。此问题仅在启用勇敢护盾时才会出现，并且阻止元素背后的原因是cross site device-recognition.

当我不使用 localhost 时，我可以为我的画布做些什么来调整我上传到浏览器的图像的大小并获取它的 dataURL 和 Blob？

想法是从输入中获取文件，通过 Canva 将其大小调整为 16MP，然后将此画布的 blob 发送到后端。我有一个PictureCompress函数可以读取文件new FileReader()以获取base64该文件的内容。之后，我正在创建一个new Image()并将其设置src为我的阅读器event.target.result（b64），并且onload我应该创建 Canvas 来调整图像的大小，通过ctx.drawImage获取新的 base64 canvas.toDataURL，然后是 blob。
在本地运行时，此过程在我的 webapp 上完美运行，但是当我更改 url 以访问我的机器 IP（我希望它在域名上相同）时，它不再工作。例如，有此代码的实时版本，CodeBox并且似乎出现了问题。

编辑 ：

  1. 此问题仅在 url 具有端口（192.168.0.5:3000不工作，但192.168.0.5工作）时发生。为什么 ？
  2. 在 Firefox 上，上述修复不起作用：Blocked http://192.168.0.13/ from extracting canvas data because no user input was detected.。是不是因为它不是 https ？未完待续 ...
function Uploader(props) {
  function PictureCompress(file, callback) {
    const fileName = file.name;
    const reader = new FileReader();

    reader.readAsDataURL(file);
    reader.onerror = error => console.warn(error);
    reader.onload = event => {
      const img = new Image();
      img.name = fileName;
      img.onerror = error => console.warn(error);
      img.onload = e => {
        const imageOriginalWidth = e.target.width;
        const imageOriginalHeight = e.target.height;

        const hvRatio = imageOriginalWidth / imageOriginalHeight;
        const vhRatio = imageOriginalHeight / imageOriginalWidth;

        const imageHvRatio = 16000000 * hvRatio;
        const imageVhRatio = 16000000 * vhRatio;

        const newWidth = Math.sqrt(imageHvRatio);
        const newHeight = Math.sqrt(imageVhRatio);

        const canvas = document.createElement("canvas");
        canvas.width = newWidth;
        canvas.height = newHeight;

        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, newWidth, newHeight);

        const base64 = canvas.toDataURL(file.type);
        console.log(base64, newWidth, newHeight, file.type);
        canvas.toBlob(
          blob => {
            console.log(blob);
            callback(blob, base64);
          },
          file.type,
          0.85
        );
      };
      img.src = event.target.result;
    };
  }
  function recursiveUpload(index, files) {
    if (index >= files.length) {
      return;
    }

    const file = files[index];
    PictureCompress(file, resizedFile => {
      resizedFile.name = file.name;
      resizedFile.lastModified = file.lastModified;
      //MY API CALL, NOT THE ISSUE
    });
  }

  return (
      <input type={"file"} onChange={event => recursiveUpload(0, event.target.files)} />
  );
}

谢谢您的帮助 ！

4

0 回答 0