Javascript 基于选定图像的画布动态高度和宽度

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

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

$（函数（）{
$（“#文件输入”）.change（函数（e）{
var file=e.target.files[0]，
imageType=/image.*/；
如果（！file.type.match（imageType））
返回；
var reader=new FileReader（）；
reader.onload=文件onload；
reader.readAsDataURL（文件）；
});
函数fileOnload（e）{
变量$img=$（'
这会将文件写入画布，但我面临的问题是，它只会将图像写入画布的高度和宽度

如何将画布宽度高度自动设置为所选图像的高度和宽度


此外，与原始图像相比，正在绘制的图像非常巨大
加载图像后，必须获得图像的尺寸（
宽度
和
高度
），并将画布的尺寸设置为其值：

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

由于我没有足够的分数，我不能对前面的答案发表评论

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

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

工作演示：
$（函数（）{
$（“#文件输入”）.change（函数（e）{
var file=e.target.files[0]，
imageType=/image.*/；
如果（！file.type.match（imageType））
返回；
var reader=new FileReader（）；
reader.onload=文件onload；
reader.readAsDataURL（文件）；
});
函数fileOnload（e）{
var$img=$（“@vignesh
$img
在您的代码中是一个jQuery对象，因此需要将其转换为DOM元素。请参阅更新的答案是的，先生，我在我评论的fiddle链接中做了此更改。不确定为什么它不起作用尝试png时大小差异很大images@vignesh我看你的小提琴没有适当的变化。看需要的变化在我的
$(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);
    });
}
});