Question

当尝试使用context.drawImage（）函数在画布上绘制图像时，它不是显示在画布上的完整图像（两者都是相同的大小），而是仅显示图像的缩放区域。但是当我将图像附加到DOM时，它会正确显示。你可以看到jsfiddle的区别。顶部图像是画布，底部图像是直接附加到文档正文的图像。

https://jsfiddle.net/3fnq62nx/

这里还有代码片段，这里可能有什么问题？

<html>
<body>
<canvas id="canvas" style="border: 1px solid black">
</canvas>
<script type="text/javascript">
var canvas  = document.getElementById("canvas");
var image = new Image();
image.src = "room_default.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    document.body.appendChild(image);
    var ctx= canvas.getContext("2d");
    ctx.drawImage(image,0,0);
}
</script>
</body>

Answer 1

Here是您的解决方案

var canvas  = document.getElementById("canvas");
var image = new Image();
image.src = "http://cdn.home-designing.com/wp-content/uploads/2011/06/livingroom_i_by_dragon2525-d3ioeyf.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    document.body.appendChild(image);
    var ctx= canvas.getContext("2d");
    ctx.drawImage(image,0,0,image.width,image.height);
}

更新ctx.drawImage(image,0,0,image.width,image.height);

您可以将画布图像的事件的高度和宽度作为drawImage函数的第4和第5个参数传递

Answer 2

    hi please check this your issue resolvevar canvas  = document.getElementById("canvas");
var image = new Image();
image.src = "http://cdn.home-designing.com/wp-content/uploads/2011/06/livingroom_i_by_dragon2525-d3ioeyf.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    document.body.appendChild(image);
    var ctx= canvas.getContext("2d");
    ctx.drawImage(image,0,0,image.width,image.height);
}

在html画布中绘制的图像不是全尺寸的

2 个答案: