在另一个图像上绘制带有透明点的图像 - 在 Chrome >= 104 中失去透明度

2024-02-27

我的应用程序在 Chrome 104、105 中停止工作。任何人都可以确认此问题吗?

steps:

  • 透明 DataArray: Uint8ClampedArray = new Uint8ClampedArray(w, h);
  • 插入一些值,为透明点保留 0,0,0,0
  • 将图像数据放在上下文中
  • 在另一个保存图像的上下文上绘制图像 =>预期(并且工作到104)-仅替换非透明点 => chrome 104 - 用白色替换透明点
const canvasMain = document.getElementById('main');
const contextMain = canvasMain.getContext('2d');

const canvas2 = document.createElement('canvas')
const context2 = canvas2.getContext('2d');

const drawData = () => {
  console.log("draw data")
  contextMain.putImageData(canvasDataInitial,  0, 0);

  const dataArray = new Uint8ClampedArray(w * h * 4);
  for (let i = 0; i < w * h; i = i + 4) {
    dataArray[i] = 0;
    dataArray[i + 1] = 150;
    dataArray[i + 2] = 35;
    dataArray[i + 3] = i > w * h / 3 ? 0 : 255;
  }
  canvas2.width = w;
  canvas2.height = h;
  context2.putImageData(new ImageData(dataArray, w, h), 0, 0);

  contextMain.drawImage(canvas2, 0, 0);
}

let canvasDataInitial;
let w,h;
const image = new Image();

image.onload = () => {
  w = image.width;
  h = image.height;

  contextMain.drawImage(image, 0, 0, w, h);
  
  canvasDataInitial = contextMain.getImageData(0, 0, canvasMain.width, canvasMain.height);

  drawData();
  drawData();
  setTimeout(drawData, 1000);
}

image.src = 'data:image/png;base64,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';
<!doctype html>
<html>
<body>
  <canvas id="main" width="200" height="200" ></canvas>
</body>

</html>

答案是“是的,已确认”。上面的代码片段证明 Chrome 的行为不同且奇怪。已报告至 chromium buglist。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在另一个图像上绘制带有透明点的图像 - 在 Chrome >= 104 中失去透明度 的相关文章

随机推荐