如何使用HTML5縮放ImageData？

特別是我有這樣的例子，但它似乎不工作：如何使用HTML5縮放ImageData？

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
your browser does not support the canvas tag </canvas> 

<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;"> 
your browser does not support the canvas tag </canvas> 

<script type="text/javascript"> 

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

var c2=document.getElementById("myCanvas2"); 
var ctx2=c2.getContext("2d"); 

ctx.strokeRect(5,5,25,15); 
var imageData = ctx.getImageData(0,0,c.width, c.height); 


ctx2.putImageData(imageData, 100, 100); 
ctx2.scale(2,2); 
</script> 

</body> 
</html>

不應該RECT得到縮放在第二畫布？

來源

2012-07-09 John Papastergiou

試試下面的代碼：

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

var c2=document.getElementById("myCanvas2"); 
var ctx2=c2.getContext("2d"); 

ctx.strokeRect(5,5,25,15); 

ctx2.scale(2, 2); 
ctx2.drawImage(c, 10, 10);

來源

2012-07-09 08:31:34 Maurice

-1

你需要在你面前做轉型「寫」的形象到畫布上。

ctx2.scale(2,2); 
ctx2.putImageData(imageData, 100, 100);

然後一切都應該正常工作。

來源

2012-10-12 10:38:27 kaljak

這是行不通的。 – Olivier 2014-05-08 20:39:00

ImageData是一個原始像素數組，因此不會受到應用於畫布的縮放/轉換的影響 - 隻影響發送到畫布的新繪圖。您需要將數據複製到新的圖像或畫布，可以根據比例進行調整。請參閱http://stackoverflow.com/questions/24429830/html5-canvas-how-to-change-putimagedata-scale – brichins 2016-06-03 15:18:23

如何使用HTML5縮放ImageData？

回答

相關問題