问题描述
我的网页中有一个画布;我在这个画布中创建了一个新的图像数据,然后我通过 myImgData.data[] 数组修改了一些像素.现在我想缩放这个图像并使它更大.我尝试缩放上下文,但图像仍然很小.是否有可能做到这一点?谢谢
您可以将 imageData 绘制到新画布上,缩放原始画布,然后将新画布绘制到原始画布上.
这样的事情应该可以工作:
var imageData = context.getImageData(0, 0, 100, 100);var newCanvas = $("").attr("宽度", 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/.>
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
You could draw the imageData to a new canvas, scale the original canvas and then draw the new canvas to the original canvas.
Something like this should work:
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);
Here's a functioning demo http://jsfiddle.net/Hm2xq/2/.
这篇关于如何在 HTML 画布中缩放 imageData?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!