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

3 Answers 3

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);
    });