javascript - 基于所选图像的动态 Canvas 高度和宽度

Question

我正在尝试根据所选图像绘制 Canvas 图像

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

这会将文件写入 Canvas ，但我面临的问题是，它只将图像写入 Canvas 的高度和宽度。

如何让 Canvas 宽度高度自动设置为所选图像的高度和宽度

JSFIDDLE DEMO

与原始图像相比，正在绘制的图像非常巨大

Answer 1

由于我没有足够的积分，我无法评论之前的答案。

您应该更新 Canvas dom 元素的高度和宽度。

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

工作演示:jsfiddle