为了方便在微博上看小黄图，我写了一段JS

傷城~ 2022-05-24 02:18 43阅读 0赞

微博上有些博主喜欢在发色图时反色防止和谐，但是我又懒得打开PS，于是就想到了用JS自动将图片反色（JS是真的能为所欲为的）

![色图][70]

图片处理就用Canvas操作图片数据，把RGB取反就完事了。这里涉及到跨域，还好微博的图床是允许主站CORS的

![CORS][]

最后为了操作简单，就监听了打开右键菜单的事件，这样在图片上按一下右键就可以反色了。Chrome里Ctrl + Shift + J，把下面代码输入到控制台就可以用了，如果想更偷懒还可以写成浏览器扩展

(function () { 
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
    
      function invertImg (originImg) { 
        if (!(originImg instanceof window.Image)) {
          return
        }
    
        // 跨域
        let img = new window.Image()
        img.crossOrigin = 'anonymous'
        img.onerror = () => window.alert('载入图片失败，可能是跨域问题？')
        img.onload = () => {
          [canvas.width, canvas.height] = [img.width, img.height]
          ctx.drawImage(img, 0, 0)
    
          // 反色
          let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
          for (let i = 0; i < imgData.data.length; i += 4) {
            imgData.data[i] = ~imgData.data[i] & 0xFF
            imgData.data[i + 1] = ~imgData.data[i + 1] & 0xFF
            imgData.data[i + 2] = ~imgData.data[i + 2] & 0xFF
          }
          ctx.putImageData(imgData, 0, 0)
          originImg.src = canvas.toDataURL()
        }
    
        if (originImg.src.startsWith('data:')) {
          img.src = originImg.src
        } else {
          // 防缓存
          img.src = originImg.src + (originImg.src.indexOf('?') === -1 ? '?_t=' : '&_t=') + new Date().getTime()
        }
      }
    
      // 监听右键菜单
      document.addEventListener('contextmenu', event => {
        if (event.target instanceof window.Image) {
          event.preventDefault()
          invertImg(event.target)
        }
      })
    })()

[70]: /images/20220524/321667ec05594152bdb449be7e0a220a.png
[CORS]: /images/20220524/c7318bd9fe7146d694a002f306d28351.png