vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片

uni-app微信小程序图片加水印，点击看这篇

需求场景： 要求上传图片，并给图片添加水印。传给后端的也是有水印的图片。

逻辑步骤： 通过input上传图片，拿到图片的信息和base64，将图片绘制到画布上，在画布上添加文字（既水印），最后将画布导出成图片，得到的src就是一张有水印的图片。

文末代码可直接复制使用！！！

此代码可直接复制使用！！！有效的记得点个赞收藏支持下！

<template>
  <div class="content">
    <input type="file" class="box-orc-input" @change="uploadPic($event)" />
    <div>
      <img class="img_box" :src="imgsrc" alt="">
      <div>原图base：{{imgsrc}}</div>
    </div>
    <div>
      <img class="img_box" :src="img2" alt="">
      <div>水印图base：{{img2}}</div>
    </div>

  </div>
</template>

<script>
function ie9 () {
  if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
    return true
  } else {
    return false
  }
}
export default {
  data () {
    return {
      imgsrc: '',//原图片地址
      img2: '',//水印图片地址
    }
  },
  methods: {
    // 通过input上传图片
    uploadPic (event) {
      console.log(event)
      if (event.target.files[0].type != 'image/png' && event.target.files[0].type != 'image/jpg' && event.target.files[0].type != 'image/jpeg') {
        return this.$message.warning('请选择上传图片，格式支持：.png 或 .jpeg 或 .jpeg')
      }
      if (ie9()) {
        this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。')
        retrun
      }
      //iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。
      let inputDOM = event.target
      let _this = this
      var reader = new FileReader()
      reader.readAsDataURL(inputDOM.files[0])
      reader.onload = function (e) {
        _this.imgsrc = e.target.result//这是原图的base

        _this.getImgWay(e)
        inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后 34行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是图片文件）   )
      }
    },
    // 根据图片的base获取图片的信息
    getImgWay (e) {
      // console.log(e)
      let _this = this
      // 组装img图片
      var base = e.target.result //图片的base64码，可以直接赋值给img的src
      let res = base.split(',')
      var image = new Image()
      image.src = base //base64数据--赋值

      console.log('原图片信息', image)
      image.onload = function () {
        _this.imgToCanvas(image)
      }
      return false
    },
    // 把image 转换为 canvas对象
    imgToCanvas (image, btn_type, YYZZ) {
      let _this = this
      // 创造画布
      var canvas = document.createElement("canvas")
      canvas.width = image.width
      canvas.height = image.height
      var cxt = canvas.getContext("2d")
      // 将图片绘制上去
      cxt.drawImage(image, 0, 0) // 第一个参数是图片（不能是src 否则会报错，是src的话需要先new Image()，具体看上个getImgWay方法） 第二、三是图片在画布位置 第四、五是将图片绘制成多大宽高（不写四五就是原图宽高）
      // 给画布上添加水印文字
      cxt.font = "20px Georgia"
      cxt.fillText("--水印文字 可自定义--", (image.width - 200), (image.width / 10), 300)
      //将画布导出成图片
      _this.canvasToImg(canvas, btn_type, YYZZ)
      return canvas
    },
    //canvas转换为image
    canvasToImg (canvas) {
      let _this = this
      console.log(4, canvas)
      var src = canvas.toDataURL("image/jpeg")
      console.log('将绘有水印和img的canvas 转成图片获取到src', src)
      _this.img2 = src
      return src
    },
  }
}
</script>

<style>
.img_box {
  /* width: 100px;
  height: 100px; */
}
.content {
  padding: 20upx;
}
.photo,
.photo image {
  display: inline-block;
  width: 220upx;
  height: 220upx;
}
.btnAddPhoto {
  width: 220upx;
  height: 220upx;
  border: dashed 1px #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50upx;
}
canvas {
  border: solid 1px gray;
  position: absolute;
  left: 5000upx;
}
</style>