如何缩放imageData

Question

如何缩放imageData？我有160x200的imageData对象，现在我想把它显示为640x400。这必须是快速的，因为完成了每个渲染步骤。

 var imgData = ctx.createImageData(160,200)
 .....

Answer 1

你有没有尝试过putImageData和缩放重绘？

ctx.putImageData(imgData, 0, 0);
ctx.scale(4, 2);
canvas.width = 640;
canvas.height = 200;
ctx.drawImage(canvas, 0, 0);

Answer 2

第一个解决方案是使用中间画布。

但是，您可以避免使用其他画布，只需在主画布上绘制，并在其9参数风格中使用drawImage：

​

var ctx=cv.getContext('2d');

// clear canvas
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,640, 400);

// draw a circle in the 160X200 part
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc (80,100, 80, 0, 6.28)
ctx.fill();

// retrieve image data
var imD = ctx.getImageData(0,0,160,200);

// clear canvas
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,640, 400);

// --------------------

ctx.putImageData(imD, 0, 0);
ctx.drawImage(cv, 0,0, 160, 200, 0, 0, 640, 400)

  <canvas id='cv' width=640 height=400></canvas>

​