javascript - 如何在 HTML Canvas 中缩放图像数据？

Question

我的网页中有一个 Canvas ；我在此 Canvas 中创建一个新的图像数据，然后通过 myImgData.data[] 数组修改一些像素。现在我想缩放此图像并使其变大。我尝试通过缩放上下文，但图像仍然很小。是否有可能做到这一点？谢谢

Answer 1

您可以将 imageData 绘制到新 Canvas ，缩放原始 Canvas ，然后将新 Canvas 绘制到原始 Canvas 。

像这样的东西应该可以工作:

var imageData = context.getImageData(0, 0, 100, 100);
var newCanvas = $("<canvas>")
    .attr("width", imageData.width)
    .attr("height", imageData.height)[0];
    
newCanvas.getContext("2d").putImageData(imageData, 0, 0);
    
context.scale(1.5, 1.5);
context.drawImage(newCanvas, 0, 0);

这是一个功能演示 http://jsfiddle.net/Hm2xq/2/ .