使用getImageData和putImageData的HTML5画布缩放

HTML5 Canvas Scaling using getImageData and putImageData

有什么方法可以使用getImageData和putImageData缩放画布。以下是代码段。

1
2
3
4
5
6
7
8
9
10
11
12
13

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。

谢谢
阿雅因

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

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

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