vue + vant 上传图片前加水印、压缩图片大小

没有废话直接上代码
另外使用了 image-conversion 来压缩图片

<template>
  <div class="page">
    <div>
      <van-uploader
        :accept="'image/*'"
        :before-read="beforeRead"
        :after-read="onUpload"
      >
        <!-- <van-button type="primary">主要按钮</van-button> -->
      </van-uploader>
    </div>
    <img :src="imgUrl" alt="" style="width: 100%">
  </div>
</template>
<script>
import { compressAccurately } from 'image-conversion'
export default {
  data () {
    return {
      imgUrl: ''
    }
  },
  methods: {
    beforeRead (file) {
      return new Promise((resolve) => {
        const fileName = file.name
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.getImgUrl({
            url: reader.result,
            cb: (base64) => {
              this.imgUrl = base64
              const file = this.base64ToFile(base64, fileName)
              compressAccurately(file, 500).then(res => {
                resolve(res)
              }).catch(() => {
                this.$toast('上传图片失败')
              })
            }
          })
        }
      })
    },
    onUpload (file) {
      console.log('upload', file)
    },
    base64ToFile (urlData, fileName) {
      const arr = urlData.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bytes = atob(arr[1]) // 解码base64
      let n = bytes.length
      const ia = new Uint8Array(n)
      while (n--) {
        ia[n] = bytes.charCodeAt(n)
      }
      return new File([ia], fileName, { type: mime })
    },
    getImgUrl ({
      url = '',
      textAlign = 'center',
      textBaseline = 'center',
      fillStyle = 'rgba(238, 10, 36, 0.5)',
      content = '我是水印哈哈哈',
      font = '40px Arial',
      cb = null,
      textX = 100,
      textY = 70
    }) {
      const img = new Image()
      img.src = url
      img.crossOrigin = 'anonymous'
      img.onload = function () {
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)
        ctx.textAlign = textAlign
        ctx.textBaseline = textBaseline
        ctx.font = font
        ctx.fillStyle = fillStyle
        ctx.translate((img.width + textX) / 2, (img.height + textY) / 2)
        ctx.rotate((Math.PI / 180) * -30)
        ctx.translate(-(img.width + textX) / 2, -(img.height + textY) / 2)
        // 单独绘制水印
        ctx.fillText(content, img.width / 2, img.height / 2)
        // 循环绘制水印
        // for (let i = 0; i < img.height / 120; i++) {
        //   for (let j = 0; j < img.width / 30; j++) {
        //     ctx.fillText(content, i * 200, j * 100, img.width)
        //   }
        // }
        // 将绘制完成的canvas转换为base64的地址
        const base64Url = canvas.toDataURL()
        // return base64Url
        cb && cb(base64Url)
      }
    }
  }
}
</script>

参考链接
1、设置图片中心点旋转
https://blog.csdn.net/u014520...
2、图片转base64
https://blog.csdn.net/qq_2513...
3、vue项目中图片显示前端使用js添加水印
https://blog.csdn.net/weixin_...
4、vue项目中base64转file
https://blog.csdn.net/danby2/...