vant 上传图片加水印，并处理ios上传图片旋转问题

首先 

npm i exif-js -S

组件中引入

import EXIF from 'exif-js'

afterRead (file) { // 拍照
      var _this = this
      _this.imgPreview(file)
      setTimeout(() => {
        _this.imgSvg(_this.preImg)
      }, 800)
    },
    imgPreview (file) { // 处理旋转问题
      var _this = this
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      let image = new Image()
      // image.crossOrigin = 'Anonymous'
      var Orientation = ''
      image.onload = function () {
        canvas.height = image.height
        canvas.width = image.width
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
        // 修复ios拍照旋转
        EXIF.getData(image, function () {
          EXIF.getAllTags(this)
          Orientation = EXIF.getTag(this, 'Orientation')
        })
        // if (navigator.userAgent.match(/iphone/i)) {
        if (Orientation !== '' && Orientation !== 1) {
          switch (Orientation) {
            case 6: // 需要顺时针（向左）90度旋转
              _this.rotateImg(this, 'left', canvas)
              break
            case 8: // 需要逆时针（向右）90度旋转
              _this.rotateImg(this, 'right', canvas)
              break
            case 3: // 需要180度旋转
              _this.rotateImg(this, 'right', canvas) // 转两次
              _this.rotateImg(this, 'right', canvas)
              break
          }
        }

        let dataURL = canvas.toDataURL('image/jpeg', 0.1)
        _this.preImg = dataURL
      }
      image.src = file.content
    },
    imgSvg (file) { // 加水印
      let _this = this
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      let image = new Image()
      image.onload = function () {
        canvas.height = image.height
        canvas.width = image.width
        if (image.width >= 3456) {
          _this.watermarkOptions.fontSize = '100px'
        } else if (image.width <= 1436) {
          _this.watermarkOptions.fontSize = '50px'
        } else {
          _this.watermarkOptions.fontSize = '70px'
        }
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)

        ctx.font = `${_this.watermarkOptions.fontSize} Arial`
        ctx.fillStyle = 'white'
        _this.watermarkOptions.text = _this.formatTime(new Date(), 'Y-M-D h:m:s')
        let addressL = _this.watermarkOptions.address
        ctx.textAlign = 'end'
        ctx.textBaseline = 'middle'
        ctx.shadowBlur = 10
        ctx.shadowOffsetX = 10
        ctx.shadowOffsetY = 10
        ctx.shadowColor = 'black'
        let column = Math.ceil(addressL.length / 16)
        ctx.fillText(`${_this.name}`, image.width * 0.2, 120)
        ctx.fillText(`${_this.watermarkOptions.text}`, image.width - 40, image.height - ((column + 1) * 120))

        // 一排最多20个字
        if (addressL.length > 16) {
          for (let i = 0; i <= column; i++) {
            ctx.fillText(`${addressL.substr(i * 20, 20)}`, image.width - 40, image.height + 120 * (i - column))
          }
        }

        let dataURL = canvas.toDataURL('image/jpeg', 1)
        _this.fileList[0].content = dataURL
        _this.preImg = dataURL
      }
      image.src = file
    },
    rotateImg (img, direction, canvas) { // 对图片旋转处理
      // alert(img);
      // 最小与最大旋转方向，图片旋转4次后回到原方向
      var minStep = 0
      var maxStep = 3
      // var img = document.getElementById(pid);
      if (img == null) return
      // img的高度和宽度不能在img元素隐藏后获取，否则会出错
      var height = img.height
      var width = img.width
      // var step = img.getAttribute('step');
      var step = 2
      if (step == null) {
        step = minStep
      }
      if (direction === 'right') {
        step++
        // 旋转到原位置，即超过最大值
        step > maxStep && (step = minStep)
      } else {
        step--
        step < minStep && (step = maxStep)
      }
      // 旋转角度以弧度值为参数
      var degree = step * 90 * Math.PI / 180
      var ctx = canvas.getContext('2d')
      switch (step) {
        case 0:
          canvas.width = width
          canvas.height = height
          ctx.drawImage(img, 0, 0)
          break
        case 1:
          canvas.width = height
          canvas.height = width
          ctx.rotate(degree)
          ctx.drawImage(img, 0, -height)
          break
        case 2:
          canvas.width = width
          canvas.height = height
          ctx.rotate(degree)
          ctx.drawImage(img, -width, -height)
          break
        case 3:
          canvas.width = height
          canvas.height = width
          ctx.rotate(degree)
          ctx.drawImage(img, -width, 0)
          break
      }
    },

let dataURL = canvas.toDataURL('image/jpeg', 0.1)

toDataURL：

canvas.toDataURL(type, encoderOptions);

参数

type 可选

图片格式，默认为 image/png

encoderOptions 可选

在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。