canvas.toDataURL заблокирован Brave Shield межсайтовым распознаванием устройств - PullRequest
Новая
       66

canvas.toDataURL заблокирован Brave Shield межсайтовым распознаванием устройств

1 голос
/ 11 февраля 2020

В настоящее время я работаю над веб-приложением, которое будет использоваться для загрузки файлов после изменения размера. Когда я работаю с localhost:3000, процесс изменения размера работает как чудо, но когда я работаю, например, с 192.168.0.5:3000 (или другим доменом), canvas.toDataURL возвращает пустую строку вместо base64 и изменение размера никогда не заканчивается. Эта проблема возникает только в том случае, если включены смелые щиты и причина заблокированного элемента - cross site device-recognition.

Что я могу сделать, чтобы мой холст мог изменить размер загружаемого мной изображения в браузер и получить его dataURL и Blob, когда я не использую localhost?

Идея состоит в том, чтобы получить файл из входных данных, изменить его размер до 16MP через Canva и получить BLOB-объект этот холст отправить на бэкэнд. У меня есть функция PictureCompress, которая будет читать файл с new FileReader(), чтобы получить base64 этого файла. После этого я создаю new Image() и устанавливаю src для моего считывателя event.target.result (b64) и, onload Я должен создать холст для изменения размера изображения с помощью ctx.drawImage, получить новый base64 через canvas.toDataURL и затем blob.
Этот процесс прекрасно работает в моем веб-приложении при локальном запуске, но когда я изменяю 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)} />
  );
}

Спасибо за помощь!

...