Принудительный запрос данных разрешений Canvas (Firefox) - PullRequest
Новая
       13

Принудительный запрос данных разрешений Canvas (Firefox)

0 голосов
/ 27 мая 2020

У меня есть очень простые функции, позволяющие пользователю рисовать на холсте, а затем загружать рисунок. Рассматриваемый код был взят из другого вопроса о переполнении стека . Затем я хочу передать изображение своему бэкэнд: 

const canvas = document.getElementById("user-image-canvas");
const dataUrl = canvas.toDataURL("image/png;base64;");

const file = dataURLtoBlob(dataUrl);
let fd = new FormData();
fd.append("image", file);

fetch(drawingsUrl, {
  method: 'POST',
  body: fd
}).then(res => ........

Вот преобразование blob для понимания. 

  // Convert dataURL to Blob object
  function dataURLtoBlob(dataURL) {
    // Decode the dataURL
    var binary = atob(dataURL.split(",")[1]);

    // Create 8-bit unsigned array
    var array = [];
    for (var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }

    // Return our Blob object
    return new Blob([new Uint8Array(array)], { type: "image/png" });
  }

(Возможно, это не оптимально, но работает независимо )

Моя проблема: Каждый раз, когда пользователь Firefox впервые заходит на сайт, у него еще не включены разрешения холста. (Неправильный) поток таков:

  1. Пользователь dr aws на холсте
  2. Пользователь нажимает кнопку, чтобы вызвать указанное выше
  3. Firefox дает запрос холста popup
  4. Одновременно toDataUrl возвращает что-то, представляющее пустой холст
  5. Пустой холст отправляется на POST
  6. Даже если пользователь разрешает это, мы все равно получение пустого изображения

При последующих посещениях проблем не будет.

Могу ли я каким-то образом:

  1. Принудительно запрос разрешения заранее? Я не смог найти соединение в api разрешений .
  2. Попросите DataUrl вернуть обещание, чтобы дождаться, пока пользователь щелкнет всплывающее окно.
...