延时监火加水印

pages/application/eight-assignments/hotwork/delay-fire-monitoring/delay.vue

@@ -62,8 +62,8 @@
                     <view class="title">照片：</view>
                     <button class="cu-btn bg-blue margin-tb-sm sm" @click="ChooseImage" v-if="addForm.imgList.length === 0">点击上传</button>
                     <view v-else>
-                      <view class="bg-img" v-for="(item,index) in addForm.imgList" :key="index" @tap="ViewImage" :data-url="item">
+                      <view class="bg-img" v-for="(item,index) in addForm.imgList" :key="index" @tap="ViewImage" :data-url="addForm.imgList[index].filePath">
-                        <image :src="item" style="width: 200upx ;height: 200upx"></image>
+                        <image :src="addForm.imgList[index].filePath" style="width: 200upx ;height: 200upx"></image>
                         <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                           <text class='cuIcon-close'></text>
                         </view>
@@ -127,6 +127,10 @@
         </view>
       </view>
     </view>
+	<view style="width: 0;height: 0;overflow: hidden;position:fixed;left: 200%;">
+		<canvas canvas-id="firstCanvas" :style="{border:'1px solid #000000',width: width,height: height}"
+			class="canvas"></canvas>
+	</view>
   </view>
 </template>
 
@@ -143,6 +147,7 @@ import {
 import sign from '@/components/sign/sign.vue';
 import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
 import tkiTree from "@/components/select-tree/select-tree.vue"
+import gcoord from '@/common/gcoord.js'
 
 export default {
   components: {
@@ -176,6 +181,8 @@ export default {
       successorFireWatcherList:[],
       treeNode: [],
       tkiTreeShow: false,
+	  width: '',
+	  height: ''
     }
   },
   onLoad(event) {
@@ -278,16 +285,94 @@ export default {
       uni.chooseImage({
         count: 1, //默认9
         sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-        sourceType: ['camera', 'album'], //从相册选择
+        sourceType: ['camera'], //从相册选择
         success: (res) => {
-          if (this.addForm.imgList.length != 0) {
+			uni.showLoading({
-            this.addForm.imgList = this.addForm.imgList.concat(res.tempFilePaths)
+				title: '加载中',
-          } else {
+				mask: true
-            this.addForm.imgList = res.tempFilePaths
+			})
-          }
+			_this.setimg(res.tempFilePaths[0],0)
+          //if (this.addForm.imgList.length != 0) {
+          //  this.addForm.imgList = this.addForm.imgList.concat(res.tempFilePaths)
+          //} else {
+          //  this.addForm.imgList = res.tempFilePaths
+          //}
         }
       });
     },
+	setimg(path,e){
+	  var _this = this
+	  let newDate = new Date();
+	  let year = newDate.getFullYear() //年
+	  let month = newDate.getMonth() + 1 //月
+	  let day = newDate.getDate() //日
+	  const hour = newDate.getHours();
+	  const minute = newDate.getMinutes();
+	  const second = newDate.getSeconds();
+	  let date = year + '-' + month + '-' + day +
+	      '- ' + hour + ':' + minute + ':' + second
+	  uni.getImageInfo({
+	    src: path,
+	    success: res => {
+	      // console.log(res);
+	      _this.width = res.width/3 + 'px';
+	      _this.height = res.height/3 + 'px';
+		   console.log(_this.height);
+	      if (res.width < 800) {
+	        uni.hideLoading()
+	        uni.showToast({
+	          title: '图片尺寸不能小于800',
+	          icon: 'none'
+	        })
+	        return
+	      }
+	      //初始化画布
+	      const ctx = uni.createCanvasContext('firstCanvas', _this);
+	      ctx.fillRect(0, 0, res.width, res.height);
+	      ctx.drawImage(res.path, 0, 0, res.width/3, res.height/3);   //将图片src放到cancas内，宽高为图片大小
+	      ctx.setFontSize(10);
+	      // ctx.globalAlpha = 1;
+	      ctx.setFillStyle('red');
+	      let textToWidth = (res.width/3) - 100;
+	      let textToHeight = (res.height/3) - 20;
+	      ctx.fillText(date, textToWidth, textToHeight);
+	      setTimeout(() => {// 这个不加异步 第一次的图片显示不出来
+	        ctx.draw(false, () => {
+	          setTimeout(() => {
+	            uni.canvasToTempFilePath({
+	              canvasId: 'firstCanvas',//将画布中内容转成图片，即水印与图片合成
+	              x: 0,
+	              y: 0,
+	              width: res.width,
+	              height: res.height,
+	              destWidth: res.width,
+	              destHeight: res.height,
+	              success: ress => {
+					  console.log("水印合成完成");
+	                if (e == 0 ) {
+	                  let img = {};
+	                  img.id = '';
+	                  img.filePath = ress.tempFilePath;
+					  _this.addForm.imgList = _this.addForm.imgList.concat(img)
+	                  uni.hideLoading()
+	                } else {
+	                  let img = {};
+	                  img.id = '';
+	                  img.filePath = ress.tempFilePath;
+	                  _this.imgList1.push(img)
+	                  uni.hideLoading()
+	                }
+	              },
+	              fail: (err) => {
+	                console.log(err);
+	              }
+	            });
+	          }, 500);
+	        });
+	      },300);
+	    }
+	  });
+	},
     ViewImage(e) {
       uni.previewImage({
         urls: this.addForm.imgList,
@@ -327,7 +412,7 @@ export default {
       })
       uni.uploadFile({
         url: basePath+'/app/hotworkapplicationdelayed/add',
-        filePath: this.addForm.imgList[0],
+        filePath: this.addForm.imgList[0].filePath,
         name: 'FFILE',
         formData: {
           ...this.addForm,