HTML5 Canvas使用getImageData和putImageData进行缩放

时间:2012-10-23 11:56:09

标签: html5 html5-canvas getimagedata putimagedata

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



     var c=document.getElementById("myCanvas");
        var c2=document.getElementById("myCanvas2");
        var ctx=c.getContext("2d");
        var ctx2=c2.getContext("2d");
        ctx.fillStyle="red";
        ctx.fillRect(10,10,50,50);

        function copy(){
         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 个答案:

答案 0 :(得分:6)

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

您想要的是使用drawImage(),然后使用其他<canvas>作为来源,而不是<img>

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