Save detection image

[arduino-man]

Not sure if this is a feature request or if I am just not finding this on the documentation but:

Is it possible to save the picture where the QR Code was detected to disk? Like download it to the client side for example?

At the moment I am using the following code as a hack workaround but the resolution is really bad for some reason:

function onScanSuccess(decodedText, decodedResult) { // handle the scanned code as you like, for example: console.log(Code matched = ${decodedText}, decodedResult); var canvas = document.getElementById("qr-canvas"); var img = canvas.toDataURL("image/png"); document.write('<img src="'+img+'"/>'); }

[ROBERT-MCDOWELL]

document.write() is considered as deprecated and unsecure for modern browser. rather than to use toDataUrl() whiy not use the a video frame capture like this:

function captureFrame(){
    const canvas = document.getElementById('canvas');
    const video = document.getElementById('video');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight); // for drawing the video element on the canvas
    /** Code to merge image **/
    const playImage = new Image();
    playImage.src = 'path to image asset';
    playImage.onload = () => {
        const startX = (video.videoWidth / 2) - (playImage.width / 2);
        const startY = (video.videoHeight / 2) - (playImage.height / 2);
        canvas.getContext('2d').drawImage(playImage, startX, startY, playImage.width, playImage.height);
        canvas.toBlob() = (blob) => {
            // Canvas element gives a callback to listen to the event after blob is prepared from canvas
            const img = new Image();
            img.src = window.URL.createObjectUrl(blob); // window object with static function of URL class that can be used to get URL from blob
        };
    };
}

[arduino-man]

Thank you.

Should I run this during onScanSuccess?

[ROBERT-MCDOWELL]

yes why not, as this you run the function once.

[ROBERT-MCDOWELL]

you can even do it in a worker and hide the canvas and / or video

[arduino-man]

Thank you, I will try your code and report back most likely this coming Monday.

[arduino-man]

playImage.src = 'path to image asset';

What is the purpose of this line?

[arduino-man]

I think I wasn't clear in my description of the issue, sorry.

I am trying to save the picture where the QR code was detected when using a webcam. So basically, save a high resolution picture of the last frame where the QR code was detected in.

[ROBERT-MCDOWELL]

playImage.src = 'path to image asset'; is to show the image on the page, but you can remove it and use download to save it. you will get the same quality of the video you set to. so if your webcam is set to 1280x720 you will get the same resolution as you catch a frame and save it as image.