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

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

图片处理就用Canvas操作图片数据，把RGB取反就完事了。这里涉及到跨域，还好微博的图床是允许主站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)
    }
  })
})()