如何在 HTML 画布中缩放 imageData? [英] How to scale an imageData in HTML canvas?

问题描述

我的网页中有一个画布；我在这个画布中创建了一个新的图像数据，然后我通过 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！