I am trying to have a canvas image drawn based on the selected image

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

Javascript

$(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 });
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');

        $img.load(function() {
            context.drawImage(this, 0, 0);
        });
    }
});

This writes the file to canvas, but the problem i face is, its writing the image only till the height and width of canvas.

How can i have the canvas width height automatically set to the height and width of the image selected

JSFIDDLE DEMO

Also the image that is being drawn is very huge pared to the original image

I am trying to have a canvas image drawn based on the selected image

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

Javascript

$(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 });
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');

        $img.load(function() {
            context.drawImage(this, 0, 0);
        });
    }
});

This writes the file to canvas, but the problem i face is, its writing the image only till the height and width of canvas.

How can i have the canvas width height automatically set to the height and width of the image selected

JSFIDDLE DEMO

Also the image that is being drawn is very huge pared to the original image

• javascript
• jquery
• html
• css
• canvas

Share Improve this question Follow edited Aug 6, 2015 at 11:10 Vignesh Subramanian asked Aug 6, 2015 at 10:48 Vignesh SubramanianVignesh Subramanian 7,3091414 gold badges9696 silver badges158158 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

As I don't have enough points, I can't ment on previous answer.

You should update the height & width of canvas dom element.

var canvas = document.getElementsByTagName('canvas')[0];
$img.load(function() {
        canvas.width  = this.width;
        canvas.height = this.height;
        context.drawImage(this, 0, 0);
});

Working Demo: jsfiddle

$(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 });
    var canvas = $('#canvas')[0];
    var context = canvas.getContext('2d');

    $img.load(function() {
        canvas.width  = this.width;
        canvas.height = this.height;
        context.drawImage(this, 0, 0);
    });
}
});

You have to get dimensions (width and height) of the image once it loaded and set dimensions of the canvas to their values:

    $img.load(function() {
        canvas.width = this.width;
        canvas.height = this.height;
        context.drawImage(this, 0, 0);
    });