的drawImage和調整，以帆布

我有一個形象，這是1836 X 3264我想drawImage()以帆布和調整到739 X 1162的drawImage和調整，以帆布

閱讀我認爲這可能與下列來完成的文檔後：

ctx.drawImage(image, 0, 0, 739, 1162);

我也曾嘗試：

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

兩個只顯示整個圖像的一小部分，而不是萎縮下來。

如何通過值來調整從1836 x 3264 - > 739 x 1162？

來源

2013-03-03 Philip Kirkbride

這應有助於：HTTP：//計算器。 com/questions/2303690/resizing-an-image-in-an-html5-canvas – bfavaretto 2013-03-03 23:52:44

你看起來是正確的，所以你可以仔細檢查一下錯誤的地方。

[編輯：附加的思想]：是你的形象實在1836x3264，而不是3264x1836]

這裏是工作代碼和一個小提琴：http://jsfiddle.net/m1erickson/MLGr4/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    img=new Image(); 
    img.onload=function(){ 
     canvas.width=400; 
     canvas.height=300; 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300); 
    } 
    img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg"; 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=100 height=100></canvas> 
</body> 
</html>

來源

2013-03-04 02:30:02 markE

感謝代碼是正確的。這只是手機系統處理畫布的一個小故障。 – 2013-03-24 00:50:56

@PhilipKirkbride你能告訴我們這個手機故障是什麼以及你如何修復它？ – palsch 2016-08-24 15:13:39

這個答案幫助我意識到我正在設置'canvas.style.width'和'height'而不是'canvas.width'。改變這一點有助於'ctx.drawImage'按預期縮放呈現，而不是在canvas本身具有維度屬性之前進行的拉伸。 – crowjonah 2017-11-10 21:21:24

的drawImage和調整，以帆布

回答

相關問題