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

标签 javascript html canvas getimagedata

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

最佳答案

您可以将 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/ .

关于javascript - 如何在 HTML Canvas 中缩放图像数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3448347/

相关文章:

JavaFX - 移动小距离时跟随鼠标口吃的绘制形状

javascript - aframe 动态加载 .dae

javascript - CSS/Javascript 自动滚动到顶部

javascript - 这是否像人们感觉的那样低效?

javascript - 单击图像以显示内容

html - 垂直均匀分布列表项

javascript - 使用 Javascript 在 HTML5 中重绘 Canvas

Javascript - 在嵌套对象中查找对象引用的路径

javascript - 在两列中左右浮动不同数量的元素,即使高度不同

javascript - 消除 HTML5 Canvas 绘图中的辉光?