使用 getImageData 和 putImageData 进行 HTML5 画布缩放答案

【问题标题】：HTML5 Canvas Scaling using getImageData and putImageData使用 getImageData 和 putImageData 进行 HTML5 画布缩放
【发布时间】：2012-10-13 08:26:31
【问题描述】：

有没有办法使用 getImageData 和 putImageData 来缩放画布。下面是代码的 sn-p。

var c=document.getElementById("myCanvas"); var c2=document.getElementById("myCanvas2"); var ctx=c.getContext("2d"); var ctx2=c2.getContext("2d"); ctx.fillStyle="红色"; ctx.fillRect(10,10,50,50); 函数复制（）{ var imgData=ctx.getImageData(10,10,50,50); ctx2.translate(133.333,0); ctx2.scale(0.75,1); ctx2.putImageData(imgData,10,70); }

我已经试过了http://jsbin.com/efixur/1/edit。

谢谢阿杰

【问题讨论】：

标签： html html5-canvas getimagedata putimagedata

【解决方案1】：

getImageData() 和 putImageData() 是为原始像素操作提供的，因此无法进行缩放（除非您在 Javascript 中编写自定义缩放器）。

您想要的是使用drawImage()，然后使用另一个<canvas> 作为源而不是<img>。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Scaling

【讨论】：