js 为上传的图片添加水印

项目中将该方法提取到单独的文件中 base.js

const base = {}

/**
 * @description: 图片添加水印
 * @param {file} file 图片的file对象
 * @param {Function} callback 因为onload异步的问题 所以采用callback方式  
 */
base.watermark = (file, callback) => { 
  if (!file || !file.name) return false

  // 这个是水印的图片
  let markImg = document.getElementById('waterMark')

  let fileReader = new FileReader()
  fileReader.readAsDataURL(file)
  let img = new Image()
  fileReader.onload = function () {
    img.src = fileReader.result
    img.onload = function() {
      // 图片的清晰度 有关压缩
      let quality = ''
      // 创建canvas进行绘图
      let canvas = document.createElement('canvas'),
          ctx    = canvas.getContext('2d')
      if (img.width <= 3000 && img.width > 1000) {
        quality = 1
        canvas.width  = img.width  / 3
        canvas.height = img.height / 3
      }else{
        quality = 1
        canvas.width  = img.width
        canvas.height = img.height
      }

      // 设置水印的宽高
      let markImgH = canvas.height / 5,
          markImgW = markImgH * 3
      // 首先绘制需要上传至服务器的图
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      // 将水印绘制上去，位置在右下角
      ctx.drawImage(markImg, canvas.width - markImgW, canvas.height - markImgH, markImgW, markImgH)
      // 转为base64格式
      let imgData = canvas.toDataURL(file.type)
      // 转为file对象传递出去
      callback(dataURLtoFile(imgData, file.name))
    }
  }
}

// 将base64转换为文件
function dataURLtoFile(dataurl, filename) { 
  var arr = dataurl.split(','), 
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), 
      n = bstr.length, 
      u8arr = new Uint8Array(n)
  while(n--){
      u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, {type:mime})
}




export default base

上面传入的file为下面这个

 

使用：

base.watermark(file, res => {
    // res及为加完水印的图片对象
    // ...实际的上传方法
})