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

但是图像被绘制得比它的原始尺寸大？我试过几张图片，同样的问题。

解决方法是什么？

Answer 1

jQuery将通过CSS调整元素大小，这实际上不会改变画布内部的高度和宽度。这将调整实际画布元素的大小。

var canvas = document.GetElementById('test-canvas');
canvas.width  = img.width;
canvas.height = img.height;

jsFiddle（http://jsfiddle.net/L0drfwgL/）只是展示它按比例绘制它，并调整画布项本身的大小。

Answer 2

看起来你正在从负载上的图像元素中提取图像。您可以使用图像元素中的src而不是重新创建图像对象，然后从元素中获取图像宽度/高度以将图像绘制到画布。

<script>
    $(document).ready(function(){
        $('#testImg').on('load',function(){
            var image = document.getElementById('testImg');
            var canvas = document.getElementById('test-canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx=canvas.getContext("2d");
            ctx.drawImage(image,0,0);
        })
    });

    </script>

画布上的图像绘制得比原始大小大

2 个答案: