How pass blob imageData rather than Url

[beshoo]

I have canvas data, as blob, how can i pass it to this library?

const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const width = 300;
      const height = 311;

      const image = new Image();
      image.src = url;
      image.onload = () => {
        ctx.drawImage(image, 0, 0);
        let imageData = ctx.getImageData(0, 0, 300, 311);
        console.log(imageData);
        let code = jsQR(imageData.data, width, height);
        if (code) {
          console.log("Found QR code", code);
        }

[strukturart]

I have a similar problem, it would be good if you could use jsQR to read the content of a QR code.

  let read_from_file = (data) => {
    let reader = new FileReader();
    console.log(data);
    reader.readAsDataURL(data);

    reader.onload = function () {
      let img = new Image();
      img.src = reader.result;
      img.onload = function () {
        console.log(img.width, img.height);
        var barcodeCanvas = document.createElement("canvas");
        var barcodeContext = barcodeCanvas.getContext("2d");
        barcodeContext.drawImage(img, 0, 0);
        var imageData = barcodeContext.getImageData(
          0,
          0,
          img.width,
          img.height
        );

        var idd = imageData.data;

        let code;
        console.log(idd);
        let m = 0;
        let intv = setInterval(() => {
          m++;
          try {
            code = jsQR(idd, img.width, img.height);
            console.log(code);
          } catch (e) {
            console.log(e);
          }

          if (code || m > 20) clearInterval(intv);
        }, 1000);
      };
    };

    reader.onerror = function () {
      console.log(reader.error);
    };
  };

[beshoo]

To pass the canvas data to the jsQR function, you can use the getImageData method of the canvas context to retrieve an ImageData object, which represents the pixel data for the canvas. You can then pass the data property of the ImageData object, along with the width and height of the canvas, to the jsQR function.

Here's an example of how you can do this:

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const width = 300;
const height = 311;

const image = new Image();
image.src = url;
image.onload = () => {
  ctx.drawImage(image, 0, 0);
  let imageData = ctx.getImageData(0, 0, 300, 311);
  let code = jsQR(imageData.data, width, height);
  if (code) {
    console.log("Found QR code", code);
  }
}

This code creates a canvas element, loads an image from the specified url, and then draws the image onto the canvas. It then retrieves the pixel data for the canvas using the getImageData method and passes this data, along with the width and height of the canvas, to the jsQR function. If a QR code is found, it will be logged to the console.

[strukturart]

in which format does the raw data have to be? in my example i tried https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs but i always get null as a result.

[beshoo]

The data property of the ImageData object represents the pixel data for the canvas as a one-dimensional array of integers, where each integer represents the color of a single pixel in the canvas. The jsQR function expects this data to be in the RGBA format, with each pixel represented by four consecutive integers in the array, representing the red, green, blue, and alpha values of the pixel, respectively.

It looks like you're trying to use a data URL as the source for the image that you're drawing onto the canvas. A data URL is a URI scheme that allows you to include the data for a file directly in the URL, rather than linking to an external file.

To use a data URL as the source for an image, you can set the src attribute of the Image object to the data URL, like this:

const image = new Image();
image.src = "data:image/png;base64,iVBORw0KGg....";

Keep in mind that the data URL must be properly formatted and must include the correct MIME type and encoding for the data that it contains. If the data URL is not formatted correctly, or if the MIME type or encoding is incorrect, the image may not be displayed correctly, or may not be displayed at all.

If you're still having trouble getting the jsQR function to work with your canvas data, it might be helpful to check the console for error messages or to log the imageData object to the console to see if there are any issues with the pixel data that you're passing to the jsQR function.