vue中使用canvas添加各类水印

vue使用canvas绘制文字水印背景

1、写watermarker.js文件

/**  水印添加方法  */

const setWatermark = (str1, str2) => {
  const id = '1.23452384164.123412415'

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  const can = document.createElement('canvas')
  // 设置canvas画布大小
  can.width = 150
  can.height = 80

  const cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180) // 水印旋转角度
  cans.font = '15px Vedana'
  cans.fillStyle = '#666666'
  cans.textAlign = 'center'
  cans.textBaseline = 'Middle'
  cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x，y轴
  cans.fillText(str2, can.width / 2, can.height + 22)

  const div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  div.style.top = '40px'
  div.style.left = '0px'
  div.style.opacity = '0.15'
  div.style.position = 'fixed'
  div.style.zIndex = '100000'
  div.style.width = document.documentElement.clientWidth + 'px'
  div.style.height = document.documentElement.clientHeight + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  document.body.appendChild(div)
  return id
}

// 添加水印方法
export const setWaterMark = (str1, str2) => {
  let id = setWatermark(str1, str2)
  if (document.getElementById(id) === null) {
    id = setWatermark(str1, str2)
  }
}

// 移除水印方法
export const removeWatermark = () => {
  const id = '1.23452384164.123412415'
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
}

2、在页面中使用

<template>
  <div>
  </div>
</template>

<script>
import { removeWatermark, setWaterMark } from '../utils/watermaker'

export default {
  name: 'TestWaterMaker',
  mounted () {
    setWaterMark('liergou', '李二狗')
  },
  destroyed () {
    removeWatermark()
  }
}
</script>

<style scoped>

</style>

效果图如下

2、图片添加文字水印

<template>
  <div>
    <input type="file" id="uploadFile" class="clip" accept="image/*" @change="chooseImg">
    <input type="text" placeholder="请输入你要添加的水印文字" class="water-text" v-model="text" @change="conformText()">
    <div>
      <img id="imgsrc" :src="imgsrc" :width="size">
      <img id="imgTextUrl" :src="imgTextUrl" :width="size"><br/>
      下载
      <img id="imgUploadUrl" :src="imgUploadUrl" @click="downLoad()"><br/>
      <div class="conform" @click="confirmImg()">合成图片</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestWaterMaker1',
  data () {
    return {
      imgsrc: '',
      text: '',
      size: 180,
      imgTextUrl: '',
      imgUploadUrl: ''
    }
  },
  methods: {
    // 上传图片
    chooseImg (event) {
      var file = event.target.files[0]
      var reader = new FileReader()
      reader.readAsDataURL(file)
      const _this = this
      reader.onload = function () {
        _this.imgsrc = reader.result
      }
      _this.imgsrc = file
    },
    // 生成水印文字 canvas文字你可以设置为你喜欢的样式
    conformText () {
      var canvas = document.createElement('canvas') // 准备空画布
      var ctx = canvas.getContext('2d')
      ctx.font = '20px Georgia' // canvas字体
      ctx.fillText(this.text, 10, 50)
      var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
      gradient.addColorStop('0', 'magenta')
      gradient.addColorStop('0.5', 'blue')
      gradient.addColorStop('1.0', 'red')
      ctx.fillStyle = gradient
      this.imgTextUrl = canvas.toDataURL('image/png')
    },
    // 合成图片
    confirmImg (url) {
      var canvasAll = document.createElement('canvas')
      // const size = 180
      canvasAll.width = this.size
      canvasAll.height = this.size
      var context = canvasAll.getContext('2d')

      // 这是上传图像
      var imgUpload = new Image()
      var img1 = document.getElementById('imgsrc')
      var img2 = document.getElementById('imgTextUrl')
      context.drawImage(img1, 0, 0, img1.width, img1.height)
      // 再次绘制
      context.drawImage(img2, 0, 130, img2.width, img2.height)
      const that = this
      imgUpload.src = url
      that.imgUploadUrl = canvasAll.toDataURL('image/png')
      /* imgUpload.onload = function () {
        // 绘制
        context.drawImage(img1, 0, 0, img1.width, img1.height)
        // 再次绘制
        context.drawImage(img2, 0, 130, img2.width, img2.height)
        // 回调
        that.imgUploadUrl = canvasAll.toDataURL('image/png')
        console.info(that.imgUploadUrl)
      } */
    },
    downLoad () {
      var a = document.createElement('a')
      a.href = this.imgUploadUrl // 将画布内的信息导出为png图片数据
      a.download = '水印图片' // 设定下载名称 如果不设置a.download 浏览器会尝试打开这张图片 而图片会下载失败
      a.click() // 点击触发下载
    }
  }
}
</script>

<style scoped>

</style>

3、图片添加图片水印

例子两张图片叠加在一起

mounted () {
    const img1 = new Image()
    const that = this
    img1.src = 'data:image/png;base64.........'
    img1.onload = function () {
      const img2 = new Image()
      img2.src = 'data:image/png;base64.........'
      img2.onload = function () {
        const can = document.createElement('canvas')
        can.width = 1080
        can.height = 1080
        const cans = can.getContext('2d')
        cans.drawImage(img1, 0, 0, img1.width, img1.height)
        cans.drawImage(img2, 0, 0, img2.width, img2.height)
        that.imgUploadUrl = can.toDataURL('image/png')
      }
    }
  }