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)
      // 给画布上添加水印文字
      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>

原博主：点击查看

需求： 微信小程序，上传图片，成功后图片有水印，既图片的网络地址也有水印。
上传图片使用uni-app的uni.chooseImage（）方法，水印是用canvas。

以下代码可以直接使用：（注意：如果遇到canvas无效或者图片不显示问题：可能就是你在自定义组件内使用canvas，但是没有传递第二个参数this导致的，详见已知问题和解决办法）

<template>
  <view class="content">
    <view v-for="(photo,index) in photoData" :key="index" class="photo">
      <image :src="photo" @click="previewPhoto(photo,photoData)"></image>
      <view class="closeA" @tap="deletePhoto(index)">&times;</view>
    </view>
    <view class="btnAddPhoto" @click="btnAddPhoto">+</view>
    <!-- 获取有水印的图片过程 必须使canvas显示 获取完成后在隐藏掉canvas 配合canvas样式定位 使其错位 -->
    <!-- canvas的隐藏 在小程序中 使用 v-if或display：none 都不生效   使用hidden属性 true隐藏 false显示 -->
    <canvas :style="{width:canvasWidth,height:canvasHeight}" canvas-id="myCanvas" :hidden='flagC'></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flagC: false,
      photoData: [],
      photoArray: [],
      canvasWidth: '',
      canvasHeight: '',
      photoIndex: 0
    }
  },
  onLoad() {
  },
  methods: {
    // 添加图片事件
    btnAddPhoto() {
      this.photoIndex = 0;
      let ctx = uni.createCanvasContext('myCanvas');
      uni.chooseImage({
        count: 6,
        sourceType: ['album', 'camera'],
        success: res => {
          this.photoArray = res.tempFilePaths;
          uni.showLoading({
            title: "图片加载中..."
          })
          this.callAddWaterMart();
        }
      })
    },

    // 调用添加水印的函数
    callAddWaterMart() {
      this.addWaterMark(() => {
        if (this.photoIndex < this.photoArray.length - 1) {
          this.photoIndex++;
          this.callAddWaterMart()
        } else {
          uni.hideLoading()
        }
      })
    },

    // 添加水印
    addWaterMark(callback) {
      this.flagC = false
      uni.getImageInfo({
        // 注意此时的地址是正常的图片地址 以下是给图片添加水印返回新的url地址
        src: this.photoArray[this.photoIndex],
        success: res => {
          this.canvasWidth = `${res.width}px`;
          this.canvasHeight = `${res.height}px`;
          var ctx = uni.createCanvasContext('myCanvas');
          // 在自定义组件内 需要传递第二参数 this canvas才生效
          // var ctx = uni.createCanvasContext('myCanvas', this);
          ctx.clearRect(0, 0, res.width, res.height);
          ctx.beginPath();
          ctx.drawImage(this.photoArray[this.photoIndex], 0, 0, res.width, res.height);

          // 为图片添加水印
          ctx.translate(res.width / 2, res.height / 2);
          ctx.rotate(45 * Math.PI / 180);

		  //这部分是水印的大小位置和数量
          let horizontal = res.width / 4;
          let vertical = res.height / 3;
          let fonstsize = res.width / 30;
          for (let i = 0; i <= 2; i++) {
            for (let j = 0; j <= 2; j++) {
              ctx.beginPath();
              ctx.setFontSize(fonstsize);
              ctx.setFillStyle("rgba(255,255,255,0.3)");
              // ctx.fillText("-仅供保险投保使用-", i * horizontal - res.width / 2, j * vertical - res.height / 2);
              ctx.fillText("--仅供保险投保使用--", (i * horizontal - res.width / 2) * 2, j * vertical - res.height / 2, fonstsize*15*2);
            }
          }

          // 开始绘制添加水印的图片并显示在页面中
          ctx.draw(false, () => {
            setTimeout(() => {
              console.log("asdf");
              uni.canvasToTempFilePath({
                canvasId: "myCanvas",
                success: res => {
                  // 注意此时的地址是加了水印的图片地址（直接url输入浏览器也可以查看包含水印）
                  console.log(123,res.tempFilePath)
                  this.flagC = true
                  this.photoData.push(res.tempFilePath);
                  callback();
                }
              })
            // 在自定义组件内 需要传递第二参数 this canvas才生效
           // }, this)
            }, 500)
          });
        }
      })
    },

    // 预览图片
    previewPhoto(url, list) {
      uni.previewImage({
        current: url,
        urls: list.map(item => item)
      })
    },

    // 删除图片
    deletePhoto(index) {
      this.photoArray.splice(index, 1);
      this.photoData.splice(index, 1);
      console.log(this.photoArray)
    }
  }
}
</script>

<style>
.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>

未知问题： 小程序模拟器上，上传第一张图片没问题，再次上传第二张图片，会发现第二张图片显示出来的是两张图片的叠加图；但是在真机使用时候，却不会出现也不影响（故没有处理，猜测解决方案：可以再每次上传图片处理水印时候，使用不同的canvas元素，不要使用同一个去做水印）；

已知问题：
1.若canvas图片渲染不出来，也就是uni.createCanvasContext（）方法无效
2.或ctx.draw（）无效，
3.或uni.canvasToTempFilePath（）接口总是失败；
4.或拿不到图片的tempFilePath；以上问题都是一个原因导致

（查看uni-app文档或者微信小程序canvas文档 ，可知原因：1.是需要在template模板里有canvas元素；2.是在自定义组件或者公共组件内，必须传递第二个参数this）。

解决办法就是： createCanvasContext和canvasToTempFilePath两个地方的方法需要传递第二参数this
既

var ctx = uni.createCanvasContext('myCanvas', this);

uni.canvasToTempFilePath({获取图片的内容代码 详见下面}, this)

截图是uni-app的文档：

微信小程序工具 操作上传一张图：

未知问题演示：上传第二张图：（叠加图片问题只会在小程序模拟器中出现，在实际真机使用中不会影响）

随着自媒体的迅速发展，不少摄影爱好者的优质照片有了新的发表平台，图片的增加繁荣了自媒体平台，但同时也出现了不少剽窃他人图片的现象，原来只发原片的摄影爱好者，纷纷开始在自己的图片上打上水印，今天小编给大家介绍一款加水印的软件，具体步骤如下：

步骤一：我们在浏览器上搜索“水印云”，点击“立即体验”。

步骤二：注册一个账号并登录，点击“图片加水印”；

步骤三：点击“添加文件”，并本地上传图片；

步骤四：选择右上角“添加图片水印”，并上传要添加的水印，如图所示；

水印大小可以根据视觉效果来进行调节，调节好字号之后点击“开始加水印”， 水印加好之后点击“下载文件”即可保存到本地电脑。

效果图如下：