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/

相关文章:

jquery - 使用 jquery 将 HTML 表转换为 ul li

java - 从 servlet 打开 URL

c# - 使用 HtmlAgilityPack 计算特定的子节点

javascript - 一个 canvas 元素可以嵌套多少个 div 有限制吗?

javascript - 保留 Canvas 上图像的原始质量

javascript - 如何在 kendo-ui 网格中制作 actionlink/url.action

javascript - 按钮在后续选项卡上无法在 Highcharts 中重绘图表

javascript - IndexedDB 错误 : IDBObjectStore Symbol could not be cloned

javascript - 按时间顺序对带有日期的多维数组进行排序的最快方法

javascript - 如何提高该功能的性能?