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)
  }
 })
},