2

現在、サイズ変更後にファイルをアップロードするために使用される webapp に取り組んでいます。に取り組んでいるときlocalhost:3000、サイズ変更プロセスは魅力のように機能しますが192.168.0.5:3000、たとえば (または別のドメイン) に取り組んでいるとき、canvas.toDataURL は base64 ではなく空の文字列を返し、サイズ変更は決して終了しません。この問題は、勇敢な盾が有効になっている場合にのみ発生し、ブロックされた要素の背後にある理由はcross site device-recognition.

localhost を使用していないときに、キャンバスがブラウザにアップロードしている画像のサイズを変更し、dataURL と Blob を取得できるようにするにはどうすればよいですか?

アイデアは、入力からファイルを取得し、Canva を介して 16MP にサイズ変更し、このキャンバスの BLOB を取得してバックエンドに送信することです。このファイルを取得するためにPictureCompressファイルを読み取る関数があります。その後、 を作成してリーダー(b64) に設定し、Canvas を作成して 経由で画像のサイズを変更し、新しい base64 を取得してからblob を取得することになっています。 このプロセスは、Web アプリケーションをローカルで実行すると完全に機能しますが、マシン IP にアクセスするように URL を変更すると (ドメイン名でも同じであると予想されます)、機能しなくなります。たとえば、このコードのライブ バージョンがあり、問題が発生しているようです。new FileReader()base64new Image()srcevent.target.resultonloadctx.drawImagecanvas.toDataURL
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