image.src = canvas.toDataURL(“image/png”); Saving issue

Question

How to save image.src = canvas.toDataURL("image/png"); in within the camera div onclick camera result automatically getting saved in the first image src line.

Working Codepen

Answer 1

You are editing the first img tag. But you need to edit the second one.

Change let image = document.querySelector("img"); to let image = document.getElementById("result");

and

Change <img src="" alt="" class="image image--hidden" /> to <img src="" id="result" alt="" class="image image--hidden" />

Answer 2

If I understand correctly, you want to download the image on click . To achieve this you should use an <a /> tag. Try the following:

function save(){

    let a = document.createElement('a');

    a.download = '';

    a.href = canvas.toDataURL("image/png");

    a.click();
}

Now you can use the save function whenever you want, even onclick .