Javascript, store photo from camera (canvas) to local/server

Question

Issue

I am using javascript from this site.

https://developers.google.com/web/fundamentals/media/capturing-images/#acquire_access_to_the_camera

There are information about canvas, that I can:

Upload it straight to the server
Store it locally
Apply funky effects to the image

How can I for example store from canvas to local or server? And what about funky effects? :)

And is possible store input from camera to file without view camera video tag window?

Thanks.

System

Linux local 5.0.0-29-lowlatency #31-Ubuntu SMP PREEMPT Thu Sep 12 14:13:01 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

Update

And what about saving to specific folder? For example same folder where javascript script is? Is it possible? Thanks.
And question, if is possible evade camera access by user?
And turn on camera without light indicator on notebook, some spy mode?
And it is possible just make photo and save to disk on server when you visit the web page?

@all Tell me, why `-2`? Question is about code, so what is wrong on it? And I think this is quite useful thing. Thanks. — genderbee, Sep 27 '19 at 07:27

score 0 · Accepted Answer · answered Sep 25 '19 at 13:32

You could save the image src as base64 using canvas.toDataURL("img/png"):

captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
    // Get the image src (base64)
    const imgSrc=canvas.toDataURL("img/png");

    // Apply the src to an image element
    const img = new Image();
    img.src = imgSrc

    // Add the newly created image to the DOM
    // A html element with the class .image-holder needs to exist on the page
    document.querySelector('.image-holder').appendChild(img);

    // Store the src in local storage
    localStorage.setItem('imgSrc', imgSrc)
  });

To save it to your local machine you can use something like FileSaver (thanks to this SO answer):

captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);

    // save the file
    canvas.toBlob(function(blob) {
        saveAs(blob, "image-name.jpg");
    });
  });

edit: Working example here https://codepen.io/relativemc/pen/QWLoOZO

Thanks. I tried copy working example, but it just show captured images on site, no saving. See my update please. Error is `Uncaught ReferenceError: saveAs is not defined`. Thank you. — genderbee, Sep 27 '19 at 07:11
And is possible save file `image-name.jpg` with some variable? For example DATE and TIME. Thanks. — genderbee, Sep 27 '19 at 07:25
Modifying a [string](https://www.w3schools.com/js/js_strings.asp) is something that you should look into. Also research built in methods such [Date](https://www.w3schools.com/js/js_date_methods.asp). When you're not sure how to do something you should first attempt to solve the solution yourself, this is how you get better. If you can't solve the solution try google "How to add a date to a string in javascript" for example would lead you straight to the answer. After you've exhausted both options then post the question. — mrmadhat, Sep 27 '19 at 10:26

Javascript, store photo from camera (canvas) to local/server

1 Answers1