canvas给图片加水印

原理：

单个水印 -> 像背景图一样平铺 -> 全屏水印 (如果直接循环fillText再旋转整个canvas，不太好计算)

实现：

1.单个水印

• 新增一个canvas
• fillText生成单个文字水印waterMarkCanvas-旋转30度

2.全屏水印

• 新增一个canvas
• 填充背景图
• 平铺单个waterMarkCanvas，ctx.createPattern(waterMarkCanvas, 'repeat')

    /**
     * 生成单个水印canvas
     *
     */
    createSingleCanvas() {
      let fontSize = 30
      let waterContent = `水印测试`

      let canvas = document.createElement(`canvas`)
      let ctx = canvas.getContext('2d')
      canvas.width = 300
      canvas.height = 200

      // 设置旋转角度
      ctx.rotate((30 * Math.PI) / 180)

      // 设置基准线
      ctx.textBaseline = 'top'

      // 设置水印文字样式
      ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
      ctx.font = `${fontSize}px Microsoft Yahei`
      ctx.fillText(waterContent, 30, 0)
      return canvas
    },

    /**
     * 生成全屏水印
     *
     * @param {Number} index 图片索引
     */
    createCanvas(index) {
      return new Promise(resolve => {
        let imgDom = this.$refs.imageDom[index]
        let canvas = document.createElement(`canvas`)
        let ctx = canvas.getContext('2d')

        canvas.width = imgDom.naturalWidth
        canvas.height = imgDom.naturalHeight

        // 填充图片
        ctx.drawImage(imgDom, 0, 0, canvas.width, canvas.height)

        // 获取单个水印
        const waterMarkCanvas = this.createSingleCanvas()

        // 平铺单个水印
        ctx.fillStyle = ctx.createPattern(waterMarkCanvas, 'repeat')
        ctx.fillRect(0, 0, canvas.width, canvas.height)

        resolve(canvas.toDataURL('image/png'))
      })
    },

效果：

生成右下角水印

    /**
     * 生成右下角水印
     *
     * @param {Number} index 图片索引
     */
    createCornerCanvas(index) {
      return new Promise(resolve => {
        let imgDom = this.$refs.imageDom[index]
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')

        canvas.width = imgDom.naturalWidth
        canvas.height = imgDom.naturalHeight

        // 设置基准线
        ctx.textBaseline = 'top'

        // 填充背景图
        ctx.drawImage(imgDom, 0, 0, canvas.width, canvas.height)

        // 填充右下角文字
        ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
        ctx.font = `30px Microsoft Yahei`
        ctx.textAlign = 'right'
        ctx.fillText('水印测试', canvas.width - 30, canvas.height - 50)

        resolve(canvas.toDataURL('image/png'))
      })
    },

生成全屏交叉错位水印

    /**
     * 生成单个水印canvas（错落交叉那种）
     *
     */
    createSingleCrossCanvas() {
      let fontSize = 30
      let waterContent = this.form.waterContent

      let canvas = document.createElement(`canvas`)
      let ctx = canvas.getContext('2d')
      canvas.width = 300
      canvas.height = 300

      // 设置旋转角度
      ctx.rotate((30 * Math.PI) / 180)

      // 设置基准线
      ctx.textBaseline = 'top'

      // 设置水印文字样式
      ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
      ctx.font = `${fontSize}px Microsoft Yahei`
      ctx.fillText(waterContent, 30, 0)
      ctx.fillText(waterContent, 220, 70)
      return canvas
    },