js 图片处理

记一些前端图片处理的列子

图片压缩

注:

我写的传入参数为文件类型 一般为用户上传选中的文件 也可以是其他形式  但是要修改一些代码使图片参数可以写入到img中 因为最终目的是要把图片画在canvas上

图片的处理过程是个异步过程  压缩后的文件resolve出去了 

画布在使用完之后尽量清空一下 避免出现奇怪的bug

影响导出压缩大小的几个因素

导出的图片必须使用jpeg格式 因为png多一层 是一定比jpeg大的

画布的大小也对生成图片质量影响很大  这里我定画布的大小时原图的1/4

最后canvas导出的0.4 指的应该是图片的色彩质量(具体了解比较少)这个参数不影响图片精度 只会让图片的色彩对比度很差

我这套参数压缩下来大概有15倍的压缩效率

关键方法是canvas.toBlob方法

zipImg(files) {
      let that = this
      let img = new Image()
      console.log('开始压缩')
      img.src = URL.createObjectURL(files) //将文件转成url
      return new Promise((resolve, reject) => {
        img.onload = function () {
          //必须等到图片load之后才能画到canvas中
          var canvas = document.createElement('CANVAS')
          var ctx = canvas.getContext('2d')
          canvas.width = img.width / 2
          canvas.height = img.height / 2
          ctx.drawImage(img, 0, 0, img.width / 2, img.height / 2)
          canvas.toBlob(
            (blob) => {
              //压缩图片
              var newFile = new File([blob], files.name, { type: blob.type })
              var formData = new FormData()
              formData.append('file', newFile, newFile.name)
              resolve(newFile)
              canvas.width = 0
            },
            'image/jpeg',
            0.4
          )
        }
      })
    },

图片转base64

canvas画布

注:这里的参数是图片的路径 当然也是可以改的 因为最终目的还是要画到canvas里

关键方法是 canvas.toDataURL方法

convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image()
      img.crossOrigin = 'Anonymous'
      img.onload = function () {
        canvas.height = img.height
        canvas.width = img.width
        ctx.drawImage(img, 0, 0, img.width, img.height)
        var dataURL = canvas.toDataURL(outputFormat || 'image/jpeg', 0.4)
        callback.call(this, dataURL)
        canvas.width = 0
      }
      img.src = url
    },

reader

直接fileReader读取成base64 不过有浏览器好像不支持 

                    const reader = new FileReader()
                    reader.readAsDataURL(formData.getAll('file')[0])
                    reader.onload = function (e) {
                        console.log(this.result)
                    formData=null
                    }

图片流转成文件格式

直接new一个File对象就可以了 blob是图片流 

              var newFile = new File([blob], files.name, { type: blob.type })
    

附一些有关知识博客:URL.createObjectURL

FileReader简介