Dynamically add image to canvas

Question

Good day folks.

Im wondering is there any way to dynamically add image from user computer to canvas.

For example I have:

<canvas id="canvas"></canvas>
<input type="file" id="image-chooser">

If user pick image with input it's added to canvas.

Show me any path to follow, please.

Thank you!

Answer 1

To do this you should be familiar with the HTML5 Canvas API and the File API. And of course, this feature is available in the browsers only support both HTML5 APIs.

The process to do this is:

1. Dispatch a change event to file input element.
2. Get the uploaded file from the event handler and get a data URL by using the FileReader object.
3. Make an img element with the data URL and draw it on the canvas.

I made a simple example on jsfiddle. The code looks like this:

<canvas id="canvas"></canvas>
<input type="file" id="file-input">
<script>
$(function() {
    $('#file-input').change(function(e) {
        var file = e.target.files[0],
            imageType = /image.*/;

        if (!file.type.match(imageType))
            return;

        var reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(file);
    });

    function fileOnload(e) {
        var $img = $('<img>', { src: e.target.result });
        $img.load(function() {
            var canvas = $('#canvas')[0];
            var context = canvas.getContext('2d');

            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            context.drawImage(this, 0, 0);
        });
    }
});
</script>

There are plenty of good tutorials about the File API like this or this.