Vue.js - draw multiple image on canvas from screenshots of video

问题

I am having trouble with a feature I want to implement in Vue.js.
What I want to achieve is accessing the webcam and displaying it in a html5 video element. This does work.
Then, I implemented a button that @click runs a method that takes a screenshot. The goal is to take as many screenshots as desired and to display them somewhere on the page.
What I achieved so far is that generally a screenshot can be taken. However, whenever a new screenshot is taken (the button is clicked again) the old one gets overwritten and it only displays the newest taken screenshot. What it is supposed to do is displaying all screenshots along each other.
I have tried many things but keep getting stuck here...

My Gallery.vue file's template looks like this (this is where the screenshots shall be stored and displayed):

<template>
    <div class="gallery" id="mainDiv">
        <canvas class="galleryCanvas" id="galleryCanvas"></canvas>
    </div>
</template>

The method to take exactly one screenshot (called by clicking the button) looks like this:

takePicture() {
            // pick canvas element to "draw" screenshot on
            const pic = document.querySelector("canvas");
            const ctx = pic.getContext("2d");
            // setting picture quality and landscape
            let ratio =
                window.innerHeight < window.innerWidth ? 16 / 9 : 9 / 16;
            // set window width to max. of 1280px
            pic.width = window.innerWidth < 1280 ? window.innerWidth : 1280;
            pic.height = window.innerWidth / ratio;
            var screenshot = ctx.drawImage(
                document.querySelector("video"),
                0,
                0,
                pic.width,
                pic.height
            );
            // array where all screenshots shall be stored
            ..........

To take multiple screenshots and display the all, I tried many things. For instance, setting up an array where all screenshots are being saved in and creating an additional canvas element for each screenshot in this array to display the screenshot in it. This is one of my approaches, but it does not work:

            ..........
            // array where all screenshots shall be stored
            var images = [];
            var screenshotCanvas = document.getElementById("galleryCanvas");
            for (var i = 0; i <= images.length; i++) {
                images.push(screenshot[i]);
                var screenshotsDisplay = document.createElement("IMG");
                screenshotsDisplay.setAttribute("src", images[i]);
                screenshotCanvas.appendChild(screenshotsDisplay);
            }
        }

... and I also tried it like that:

         ..........
         // array where all screenshots shall be stored
            var images = [];
            var screenshotCanvas = document.getElementById("galleryCanvas");
            for (var i = 0; i <= images.length; i++) {
                images.push(screenshot[i]);
                var screenshotsDisplay = document.createElement("CANVAS");
                screenshotCanvas.appendChild(screenshotsDisplay);
            }

...and finally also like that:

            ..........
            // array where all screenshots shall be stored
            var images = new Array();
            var screenshotCanvas = document.getElementById("galleryCanvas");
            for (var i = 0; i <= images.length; i++) {
                images[i] = new Image();
                images[i].src = screenshot[i];
                var screenshotsDisplay = document.createElement("IMG");
                screenshotsDisplay.setAttribute("src", images[i].src);
                screenshotCanvas.appendChild(screenshotsDisplay);
            }

Seems like the array is never filled at all. I am pretty new to Vue.js programming and already spent so much time solving this issue. Thus, I would really appreciate any support.

Thank you in advance!

来源：https://stackoverflow.com/questions/63493329/vue-js-draw-multiple-image-on-canvas-from-screenshots-of-video

标签

javascript

arrays

Vue.js