vue项目之上传图片添加水印

1、封装添加水印方法

/**
 * 添加水印
 * @param {blob} file
 * @param {string} el
 * @returns {Promise}
 */
export async function addWaterMarker(file, el = '#markImg') {
  return new Promise(async (resolve, reject) => {
    try {
      // 先压缩和旋转图片
      file = await compressor(file)
      // 将文件blob转换成图片
      let img = await blobToImg(file)

      // 创建canvas画布
      let canvas = document.createElement('canvas')
      canvas.width = img.naturalWidth
      canvas.height = img.naturalHeight
      let ctx = canvas.getContext('2d')

      // 填充上传的图片
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 生成水印图片
      const markEle = document.querySelector(el)
      const markWidth = markEle.clientWidth
      const scale = canvas.width * 0.25 / markWidth
      // 先缩放水印再转成图片
      markEle.style.transform = `scale(${scale})`
      const markImg = await htmlToCanvas(markEle)

      // 填充水印
      ctx.drawImage(markImg, canvas.width - markImg.width - 15 * scale, canvas.height - markImg.height - 15 * scale, markImg.width, markImg.height)

      // 将canvas转换成blob
      canvas.toBlob(blob => resolve(blob))
    } catch (error) {
      reject(error)
    }

  })
}

function blobToImg(blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.addEventListener('load', () => {
      let img = new Image()
      img.src = reader.result
      img.addEventListener('load', () => resolve(img))
    })
    reader.readAsDataURL(blob)
  })
}


export function htmlToCanvas(el, backgroundColor = 'rgba(0,0,0,.1)') {
  return new Promise(async (resolve, reject) => {
    try {
      const markImg = await html2canvas(el, {
        scale: 2,   //此处不使用默认值window.devicePixelRatio，需跟移动端保持一致
        allowTaint: false,   //允许污染
        useCORS: true,
        backgroundColor //'transparent'  //背景色
      })
      resolve(markImg)
    } catch (error) {
      reject(error)
    }
  })
}

/**
 * 压缩和旋转图片
 * @param {blob} file
 * @param {number} quality  压缩比例
 * @param {number} maxWidth
 * @returns {Promise}
 */
export function compressor(file, quality = 0.6, maxWidth = 750) {
  return new Promise(resolve => {
    new Compressor(file, {
      maxWidth,
      quality,
      success: resolve,
      error(err) {
        console.log(err.message)
      }
    })
  })
}

2、项目中使用

<!-- 图片上传 -->
<div class="flex mt20" v-if="item.questionType === 4">
  <van-uploader
    v-model="item.imgUpload"
    multiple="true"
    lazy-load
    :deletable="!isDisabled"
    :disabled="isDisabled"
    @delete="handleDeleteImg({ ...arguments, item })"
    :before-read="handleBeforeImgUpload"
    :after-read="handleAfterImgUpload"
    @click.native="currentItem = item"
  />
</div>
    
<script>
import {
  getTaskDetail,
  userExecute,
  submitFlow,
  rejectFlow,
} from '@/api/myTask';

import { uploadOSS } from '@/utils/oss';
import { parseTime, addWaterMarker } from '@/utils';

import { ImagePreview } from 'vant';

import Compressor from 'compressorjs';

const fileExtensions = ['xlsx', 'xls', 'docx', 'doc', 'pdf'];

const quality = 0.2; //图片压缩质量

export default {
  methods: {
  // 上传前
   async handleBeforeImgUpload(img, detail) {
      if (!img) {
        return
      }
      return new Promise(async (resolve, reject) => {
        if (Array.isArray(img)) {
          if (img.length > 5) {
            this.$toast('一次最多上传5张，请分批次上传！')
            reject()
          }
          let blobs = []
          for (const file of img) {
            // 大于512k的图片则先压缩
            if (file.size > 512 * 1024 && file.type.includes('image/')) {
              file = await this.compressor(file)
            }
            // 添加水印
            let blob = await addWaterMarker(file)
            blob.name = file.name
            blobs.push(blob)
          }
          resolve(blobs)
        } else {
          // 大于512k的图片则先压缩
          if (img.size > 512 * 1024 && img.type.includes('image/')) {
            img = await this.compressor(img)
          }
          const blob = await addWaterMarker(img)
          blob.name = img.name
          resolve(blob)
        }
      })
    },
    
    // 上传后
    async handleAfterImgUpload(img, detail) {
      try {
        $loading.show()
        if (Array.isArray(img)) {
          img.forEach(async ({ file }, index) => {
            if (!file.name || !file.type.includes('image/')) {
              this.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('上传失败，只能上传照片！')
              // 上传完成
              if (index === img.length - 1) {
                $loading.hide()
              }
              return //forEach里的return相当于continue
            }
            if (file.size > 1024 * 1024 * 10) {
              this.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('文件太大，单个文件不能超过10M！')
              // 上传完成
              if (index === img.length - 1) {
                $loading.hide()
              }
              return
            }
            try {
              const { fileName, url } = await uploadOSS(file)
              this.currentItem.answer.push({
                url,
              })
            } catch (error) {
              this.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('上传失败，请稍后重试！')
              console.error(error)
            }
            // 上传完成
            if (index === img.length - 1) {
              $loading.hide()
            }
          })
        } else {
          if (!img.file.type.includes('image')) {
            this.currentItem.imgUpload.splice(detail.index, 1)
            $loading.hide()
            this.$toast('上传失败，只能上传照片！')
            return
          }
          if (img.file.size >= 1024 * 1024 * 10) {
            this.currentItem.imgUpload.splice(detail.index, 1)
            $loading.hide()
            this.$toast('文件太大，不能超过10M！')
            return
          }
          // 大于512k则先压缩
          let file = img.file
          const { fileName, url } = await uploadOSS(file)
          this.currentItem.answer.push({
            url,
          })
          $loading.hide()
        }
      } catch (error) {
        this.currentItem.imgUpload.splice(detail.index, 1)
        $loading.hide()
        this.$toast('上传失败，请稍后重试！')
        console.error(error)
      }
    }
 }

感谢龙哥的指导；

3、效果如下