UI-APP给图片加水印
2022-02-14 10:45:56

<view class="cu-form-group">
                            <view class="grid col-4 grid-square flex-sub">
                                <canvas style="border: 1px solid green;position: absolute;left: -5000px;"
                                    :style="{'width':w,'height': h}" canvas-id="firstCanvas" ref="mycanvas"></canvas>
                                <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
                                    :data-url="imgList[index]">
                                    <image :src="imgList[index]" mode="aspectFill"></image>
                                    <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                                        <text class='cuIcon-close'></text>
                                    </view>
                                </view>
                                <view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
                                    <text class='cuIcon-cameraadd'></text>
                                </view>
                            </view>
                        </view>

data() {
 return {
  w: 0,
  h: 0,
  imgList: [],
},

methods: {
ViewImage(e) {
 uni.previewImage({
  urls: this.imgList,
  current: e.currentTarget.dataset.url
 });
},
DelImg(e) {
 this.imgList.splice(e.currentTarget.dataset.index, 1)
},
ChooseImage() {
 var that = this
 uni.chooseImage({
  count: 1, //默认9
  sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  sourceType: ['camera'], //拍照
  success: (res) => {
   console.log(res);
   //图片数组
   let tempFilePath = res.tempFilePaths;
   let num = 0;
   let inter = setInterval(() => {
    that.setimg(tempFilePath[num]);
    num++;
    if (num == tempFilePath.length) {
     num = 0;
     clearInterval(inter);
    }
   }, 500)
  }
 });
},
},
setimg(e) {
 let date = "-我是水印-";
 let that = this;
 let ctx = uni.createCanvasContext('firstCanvas', this.$scope);
 uni.getImageInfo({
  src: e,
  success: (res) => {
   console.log(res);
   that.w = res.width / 2 + 'px';
   that.h = res.height / 2 + 'px';
   //初始化画布
   setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
    ctx.fillRect(0, 0, that.w, that.h);
    // //将图片src放到cancas内，宽高为图片大小
    ctx.drawImage(res.path, 0, 0, res.width / 2, res.height / 2);
    ctx.rotate(45 * Math.PI / 180);
    //对斜对角线以左部分进行文字的填充
    for (let j = 1; j < 10; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
     ctx.beginPath();
     ctx.setFontSize(20);
     ctx.setFillStyle("rgba(169,169,169,.6)");
     ctx.fillText(date, 0, 50 * j);
     for (let i = 1; i < 10; i++) { //这个for循环代表横向循环，
      ctx.beginPath();
      ctx.setFontSize(20);
      ctx.setFillStyle("rgba(169,169,169,.6)");
      ctx.fillText(date, 80 * i, 50 * j);
     }
    } //两个for循环的配合，使得文字充满斜对角线的左下部分
    // 对斜对角线以右部分进行文字的填充逻辑同上
    for (let j = 0; j < 10; j++) {
     ctx.beginPath();
     ctx.setFontSize(20);
     ctx.setFillStyle("rgba(169,169,169,.6)");
     ctx.fillText(date, 0, -50 * j);
     for (let i = 1; i < 10; i++) {
      ctx.beginPath();
      ctx.setFontSize(20);
      ctx.setFillStyle("rgba(169,169,169,.6)");
      ctx.fillText(date, 80 * i, -50 * j);
     }
    }
    ctx.rotate(-45 * Math.PI / 180);
    ctx.draw(false, () => {
     uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
      canvasId: 'firstCanvas',
      success: (res) => {
       console.log(res);
       that.imgList.push(res.tempFilePath);
　　　　//图片上传
       uni.uploadFile({
        url: baseObj.baseUrl +'/sysUploadFile/uploadFile',
        filePath: res.tempFilePath,
        name: 'multipartFile',
        success: (res) => {
         var url = JSON.parse(
           res.data)
          .result
         console.log(url)
         this.imgList[0] = url
        },
        fail: (e) => {
         console.log(e)
        }
       })
      }
     })
    })
   }, 500)
  }
 })
},