Shot & Filter

Take/Upload a picture, apply one or more filters and save the resulting Image

Built using JavaScript, HTML5, Canvas, CSS3,

  • 231 views
  • 2 comments

More About This Demo From The Author

It's just a small rough example of how to use the Camera API to take a picture, apply some filters and save the resulting image data to the client. It was done in the last 2 evenings of the months, so the code is quite rough. The intent here is to show how easy can be to acquire control of the camera using the Camera API and the canvas.

2 comments so far

Log in to add your own.

  1. bruno50 said,

    Hello, excellent working.
    my obsevations (excuse my English, i'm French).
    in local and remote test of the demo : saving a file is very long and create a file extend with ".part" . when renaming this file by ".jpg" the file is not knowned and the size is very big (7,7Mo for an original file size of 2,7 Mo).
    was it possible to workaround this.
    I think that the problem is coming from the security issue about the <input type file> who mask the full path of the input file.
    so it's impossible to load an image file in a similar application using svg.image(0, 0, 900, 600, value) because "value" must be a full path in SVG format.
  2. dmolin said,

    Hi Bruno50, thanks for your feedback (no worries for your english, we are swimming in the same pool, I'm not native either :D ).
    I get no problems with file extensions when trying to save the picture; the only limitation I have is that it's not possible in any way to set the name of the file (in a 'normal' application you go through an application server but not in this simple example). the ".part" extension is probably something your browser/OS adds for your benefit (well, this is what your OS/browser thinks is better for you..).
    The reason why you get a bigger file is simply because the default PNG format is returned by the browser (and that takes generally more space than, let's say, JPG..).
    This was just a quick example focusing on how you can take images and apply effects using the native API offered by the browser (the save mechanism was the last-minute thing I added just minutes before uploading the code..);
    Thanks anyway for your precious feedback!

About this Demo

Download the Source 211.59 KB · ZIP File

Browse the Source

This demo is released under the GPL license.