如何缩放HTML canvas中的imageData？ [英] How to scale an imageData in HTML canvas?

问题描述

我在我的网页上有一个画布;我在这个画布中创建一个新的图像数据，然后我通过myImgData.data []数组修改一些像素。现在我想扩大这个形象，使它更大。我试图通过缩放上下文，但图像保持很小。有可能做到这一点吗？
感谢

I have a canvas in my webpage; I create a new Image data in this canvas then I modify some pixel through myImgData.data[] array. Now I would like to scale this image and make it bigger. I tried by scaling the context but the image remains small. Is it possible to do this? Thanks

推荐答案

您可以将imageData绘制到一个新的画布，缩放原始画布，然后绘制新画布

You could draw the imageData to a new canvas, scale the original canvas and then draw the new canvas to the original 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/ 。

这篇关于如何缩放HTML canvas中的imageData？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！