2

有没有办法使用 getImageData 和 putImageData 来缩放画布。下面是代码片段。


     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。

谢谢阿杰恩

4

1 回答 1

6

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

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

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

于 2012-10-26T09:04:20.707 回答