Snippet: Save detection image

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
        };
    };
}

Source: https://github.com/mebjas/html5-qrcode/issues/498#issuecomment-1171725905

trasherdk / html5-qrcode

Snippet: Save detection image #4