画布上的图像比原始尺寸大答案

【问题标题】：Image on Canvas is drawn larger than original size画布上的图像比原始尺寸大
【发布时间】：2015-10-20 16:22:18
【问题描述】：

加载我的图像时：

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

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

解决方法是什么？

【问题讨论】：

尝试在画布调用中包含想要的高度和宽度：ctx.drawImage(img, 0, 0, width, height): Canvas Syntax
greendave11 - 不，还是同样的问题。

标签： javascript jquery html html5-canvas

【解决方案1】：

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

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

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

【讨论】：

正如我的问题所述：“在加载我的图像时”我还记录了宽度/高度以确保它是正确的
但是我在加载时记录了宽度和高度，一切都是正确的。
我稍后会添加此编辑。但我刚刚意识到您在画布元素上使用了错误的大小调用。不要为此使用 jQuery。就写canvas.width = img.widthjQuery 正在改变 CSS 样式。
我想你的最后一条评论可能会这样。经测试后接受。

【解决方案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>

【讨论】：

【解决方案3】：

/** with vue3 -(to fix drawing canvas image is larger than actual image size **/
const captureImage = () => {
  let width = video.value.getBoundingClientRect().width;
  let height = video.value.getBoundingClientRect().height;
  let context = canvas.value.getContext('2d')
  canvas.value.width = width
  canvas.value.height = height
  context.drawImage(video.value, 0, 0, width, height)
}

【讨论】：

请在您的回答中添加一些解释。