如何缩放图像数据答案

【问题标题】：how to zoom imageData如何缩放图像数据
【发布时间】：2015-07-05 20:32:10
【问题描述】：

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

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

【问题讨论】：

标签： canvas html5-canvas

【解决方案1】：

您是否尝试过 putImageData 并通过重绘进行缩放？

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

【讨论】：

现在我记得你不能缩放现有绘图，只有新绘图可以缩放你可以在这里阅读更多关于这个问题的信息：stackoverflow.com/questions/24429830/…

【解决方案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)

  &lt;canvas id='cv' width=640 height=400&gt;&lt;/canvas&gt;

【讨论】：