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

Posted 2023-03-13

【中文标题】使用 getImageData 和 putImageData 进行 HTML5 画布缩放

【英文标题】：HTML5 Canvas Scaling using getImageData and putImageData

【发布时间】：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。

谢谢 阿杰

【参考方案1】：

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

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

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