gpt4 book ai didi

javascript - 使用 HTML5 canvas 和 getImageData 的透明像素?

转载 作者:搜寻专家 更新时间:2023-11-01 05:14:01 24 4
gpt4 key购买 nike

在我的应用程序中,我需要获取一些图像,对其进行处理,然后保存以备后用。所以我将它们绘制到临时 Canvas 上,然后使用 getImageData 函数获取。但是在输出中透明度丢失了......

这是我的代码:

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

我的 image 有一些透明像素,但在这之后 imageData 中没有透明像素我该如何解决这个问题?

有什么方法可以将 Html Image 转换为 ImageData,以便我可以处理它然后绘制到 Canvas 上?

最佳答案

您的 imageData 应该包含 alpha channel 。

但是,putImageData 将替换上下文中的像素值。它不会将它与上下文中像素的先前值合并,它会替换它。因此,您应该看到 Canvas 后面的像素(在大多数情况下,是 html 页面 body 标签的像素颜色)。

你必须做的:

  • 使用临时 Canvas 获取图像数据是个好方法
  • 根据需要修改图像数据
  • 不要尝试使用 putImageData 将此 imageData 放回 conetext,它不会如您所愿地运行
  • 但是创建一个新的 Image 对象并将 imageData 作为源(是的,它有效:))
  • 使用drawImage绘制图像

代码示例:

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

//modify here the imageData as you need

var img = new Image();
img.src = imageData;
context.drawImage(img, 0, 0); //the true context of the canvas

它应该有效。

关于javascript - 使用 HTML5 canvas 和 getImageData 的透明像素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11611549/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com