Tag: permission

I have some very simple functionality to allow a user to draw on a canvas, then upload the drawing. The code in question was taken from another Stack Overflow question. I then want to pass the picture to my backend:

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 => ........

Here is the blob conversion, for comprehension.

  // 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" });
  }

(It’s possible that is not optimal, but it works regardless)

My problem is:
Whenever a Firefox user first comes to the site, they do not yet have canvas permissions enabled. The (wrong) flow is this:

1. User draws on canvas
2. User clicks button to trigger the above
3. Firefox gives a canvas request popup
4. Simultaneously, the toDataUrl returns something representing an empty canvas
5. The empty canvas is POSTed
6. Even if the user allows it, we are still getting an empty image

On subsequent visits, there won’t be a problem.

Is there any way I can either:

1. Force the permission request beforehand? I couldn’t find a connection in the permissions api.
2. Have the DataUrl return a promise, to wait for the user clicking the popup.