在html畫布中繪制的圖像不是完整尺寸

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

這是您的解決方案

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

您可以將canvas圖像事件的高度和寬度作為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 個解決方案

解決方案1
0 已采納 2017-04-21 16:42:35

解決方案2
0 2017-04-21 16:50:49

在html畫布中繪制的圖像不是完整尺寸

問題描述

2 個解決方案

解決方案1 0 已采納 2017-04-21 16:42:35

解決方案2 0 2017-04-21 16:50:49

解決方案1
0 已采納 2017-04-21 16:42:35

解決方案2
0 2017-04-21 16:50:49