浏览器之间的CSS过滤器invert不一致

问题描述

我有以下图片（jpeg，300x300）

使用javascript，我将其分割成一个10x10的相等小方块的网格，每个方块为30x30。首先，我使用以下算法反转了一些小方块（随机选择）

  const invert = img => {
  const invertedCanvas = createCanvas(img.width,img.height)
  const invertedCanvasCtx = invertedCanvas.getContext('2d')
  invertedCanvasCtx.drawImage(img,0)
  const invertedImageData = invertedCanvasCtx.getimageData(0,img.width,img.height)
  for (let i = 0; i < invertedImageData.data.length; i += 4) {
    // r channel
    invertedImageData.data[i] = 255 - invertedImageData.data[i]
    // g channel
    invertedImageData.data[i + 1] = 255 - invertedImageData.data[i + 1]
    // b channel
    invertedImageData.data[i + 2] = 255 - invertedImageData.data[i + 2]
    // a channel
    invertedImageData.data[i + 3] = invertedImageData.data[i + 3]
  }

  invertedCanvasCtx.putimageData(invertedImageData,0)

  return invertedCanvas
}

第二，我通过将这些小方块绘制到画布上并通过toDataURL()将其导出为png来创建一个精灵表。

最终结果是一个如下所示的Spritesheet（PNG，300x300）。

最后，我使用Spritesheet将小方块用作某些div元素的背景图像。

<div style="background: url(spritesheet.png) {left} {top}"></div>

如果我用作div背景的小方块已被反转（变成蓝色），则可以通过在div样式中添加filter: invert(1)使其再次变为黄色。

现在，问题是在Firefox和Safari中，我可以通过CSS invert（）函数将蓝色反转为原来的黄色。相反，在Chrome中，我注意到原始的黄色小方块和通过将CSS invert（）函数应用于蓝色的方块获得的黄色小方块之间的颜色差异。

看看原始的黄色正方形和绿色的Chrome正方形（png，600x600）的马赛克：

似乎CSS invert（）函数的实现是特定于浏览器的。有人可以确认这一点，如果我怀疑是真的，可以给我一些关于不同的CSS invert（）函数实现的提示吗？

<div style="display: grid; grid-template-columns: repeat(10,1fr); width: 300px; height: 300px">
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px 0px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -240px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -180px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -270px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -210px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -30px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -270px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -210px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -90px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -60px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -60px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -150px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px 0px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -30px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -240px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -150px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -270px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -180px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -30px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -150px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -270px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px 0px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -270px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -180px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -30px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -270px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px 0px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -120px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -60px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -120px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -240px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -60px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -90px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px 0px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -210px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -30px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -60px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -120px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -90px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -150px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -240px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -150px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -150px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px 0px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -120px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -180px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -120px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -210px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -120px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -210px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -240px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -30px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -150px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -240px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -240px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -90px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -30px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -180px -210px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -270px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -270px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -180px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -210px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -60px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px 0px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -30px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -90px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -180px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -180px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -150px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -30px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -210px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -150px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -30px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -120px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -90px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px -180px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -270px 0px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -120px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -120px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px 0px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -210px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -90px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -120px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -150px -210px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -120px -240px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -180px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -210px -90px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -240px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -270px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -150px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px 0px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -60px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -180px; filter: invert(1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -90px -60px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -90px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) 0px -240px"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -30px -90px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -270px; transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -240px -60px; filter: invert(1); transform: scale(-1,-1)"></div>
  <div style="background: url(https://i.postimg.cc/nLTL1vRR/atlas.png) -60px -60px; filter: invert(1); transform: scale(-1,-1)"></div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvas css-filters html javascript

浏览器之间的CSS过滤器invert不一致

问题描述

解决方法

相关问答