延时监火加水印
zhaoyu
parent
c4db334f66
commit
38b62fb8b2
|
|
@ -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">
|
||||
<image :src="item" style="width: 200upx ;height: 200upx"></image>
|
||||
<view class="bg-img" v-for="(item,index) in addForm.imgList" :key="index" @tap="ViewImage" :data-url="addForm.imgList[index].filePath">
|
||||
<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) {
|
||||
this.addForm.imgList = this.addForm.imgList.concat(res.tempFilePaths)
|
||||
} else {
|
||||
this.addForm.imgList = res.tempFilePaths
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
_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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue