You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.2 KiB
142 lines
3.2 KiB
<template>
|
|
<view>
|
|
<view class="" v-for="(item,index) in imageList" :key="index">
|
|
<image mode="aspectFill" :src="item" @click="prevwImage(item)" class="imageStyle imageWrapper">
|
|
</image>
|
|
</view>
|
|
<!-- 加号 -->
|
|
<view class="padding-xl">
|
|
<image src="../../static/1.png" mode="widthFix" class="imageStyle" @click="imageRecording"></image>
|
|
</view>
|
|
<!-- 水印 -->
|
|
<canvas style="border: 1px solid green;position: absolute;left: -5000px;" :style="{'width':w,'height': h}"
|
|
canvas-id="firstCanvas" ref="mycanvas"></canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
w: 0,
|
|
h: 0,
|
|
imgPath: "",
|
|
imageList: [],
|
|
nowTime: Date.now(),
|
|
type: "tpurl"
|
|
}
|
|
},
|
|
methods: {
|
|
//拍照:压缩
|
|
imageRecording() {
|
|
let that = this;
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'], //选择图片的大小
|
|
sourceType: ['camera'], //选择图片的来源
|
|
success: res => {
|
|
//图片数组
|
|
let tempFilePath = res.tempFilePaths;
|
|
uni.compressImage({
|
|
src: tempFilePath[0],
|
|
quality: 30,
|
|
width: '40%',
|
|
height: '40%',
|
|
success: res2 => {
|
|
that.getImageInfo(res2.tempFilePath);
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
})
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
})
|
|
},
|
|
//获取压缩图片信息
|
|
getImageInfo(e) {
|
|
let that = this;
|
|
uni.getImageInfo({
|
|
src: e,
|
|
success: (res) => {
|
|
that.canvasWather(res)
|
|
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
})
|
|
},
|
|
//水印
|
|
canvasWather(res) {
|
|
let that = this;
|
|
let ctx = uni.createCanvasContext('firstCanvas', this);
|
|
that.imgPath = res.path
|
|
that.w = res.width / 2 + 'px';
|
|
that.h = res.height / 2 + 'px';
|
|
let userInfo = uni.getStorageSync('userInfo');
|
|
let realName = userInfo.realName;
|
|
this.nowTime = Date.now();
|
|
setTimeout(() => {
|
|
// this.ymd = this.$refs.ymdHms.dateShow;
|
|
//初始化画布
|
|
ctx.fillRect(0, 0, res.width / 2, res.height / 2);
|
|
// //将图片src放到cancas内，宽高为图片大小
|
|
ctx.drawImage(res.path, 0, 0, res.width / 2, res.height / 2);
|
|
ctx.beginPath()
|
|
ctx.setFontSize(10)
|
|
ctx.setFillStyle('red');
|
|
let firstY = res.height / 2 - 60;
|
|
ctx.fillText('记录人1：di', 10, res.height / 2 - 60)
|
|
ctx.fillText('记录人2：di', 10, res.height / 2 - 50)
|
|
ctx.draw(false, () => {
|
|
uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
|
|
canvasId: 'firstCanvas',
|
|
success: (res) => {
|
|
that.saveFile(res);
|
|
},
|
|
fail: (err) => {
|
|
|
|
}
|
|
})
|
|
})
|
|
}, 500)
|
|
},
|
|
//保存本地
|
|
saveFile(res) {
|
|
let that = this;
|
|
uni.saveFile({
|
|
tempFilePath: res.tempFilePath,
|
|
success: (res2) => {
|
|
//图片列表获取
|
|
that.imageList.push(res2.savedFilePath)
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
})
|
|
},
|
|
prevwImage(path) {
|
|
let url = [path]
|
|
uni.previewImage({
|
|
urls: url,
|
|
success: (res) => {
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.imageWrapper {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
|