上传图片 -> 画布 -> 图片 - 大小问题

Question

我使用文件阅读器读取用户上传的图片，我将画布调整为图片的宽度和高度。

var img = new Image();
img.src = e.target.result;
var canvas = $('#test-canvas')[0];
$('#test-canvas').width(img.width);
$('#test-canvas').height(img.height);

然后我将图像绘制到画布上。

var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0 canvas.width, canvas.height);

然后我将画布添加到图像中

var uploadImageObj = $('<img id="upload-img">');
uploadImageObj.attr('src', canvas.toDataURL());
uploadImageObj.appendTo('.template');

稍后我计划添加读取exif数据，并将相应地旋转图像。

我遇到的问题是图像始终是默认画布尺寸 (300 x 150) - 为什么？我需要它与上传的图片大小相同吗？

Answer 1

<div class="row">
        <canvas hidden="hidden" id="canvas" width="1280" height="720" >
        </canvas>
</div>