写一个微博上传图片自动加密解密工具

微博的和谐太厉害了，有时候发色图加了反色还是会被和谐，于是我就想写一个简单的程序用来自动加密解密图片

GitHub 库在这里：weibo-img-crypto

添加加密解密处理

加密

我的目的是在上传图片时自动加密，但是上传时的处理函数是在闭包里的，JS 好像没有办法访问闭包里没有导出的东西，所以无法动手脚。经过逆向分析，微博上传图片时调用了 FileReader.readAsDataURL 将图片二进制数据转为 Base64，然后再上传，所以可以 hook 这个函数加入加密图片的处理：

  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')

  // Hook FileReader.readAsDataURL
  let originalReadAsDataURL = window.FileReader.prototype.readAsDataURL
  window.FileReader.prototype.readAsDataURL = function (file) {
   
    if (file.type.startsWith('image/') && file.type !== 'image/gif') { // 暂时不支持GIF
      // Hook onloadend
      let originalOnloadend = this.onloadend
      this.onloadend = () => {
        let img = new window.Image()
        img.onload = () => {
          [canvas.width, canvas.height] = [img.width, img.height]
          ctx.drawImage(img, 0, 0)

          // 加密
          let imgData = ctx.getImageData(0, 0, img.width, img.height)
          encrypt(imgData.data)
          ctx.putImageData(imgData, 0, 0)

          // 替换上传的图片
          originalOnloadend({target: {result: canvas.toDataURL()}})
        }
        img.src = this.result
      }
    }
    originalReadAsDataURL.call(this, file)
  }

其中 encrypt() 就是加密图片的函数了，这个之后再介绍

解密

我打算做成在图片上点击鼠标右键就解密，这个可以直接抄我之前写的反色图片的代码。只是涉及到图片的跨域，没什么好讲的