上传图片时添加水印的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
// dUpload
<template>
<view>
<view>
<u-form ref="uForm">
<!-- // 是否允许删除
// 是否展示进度
//图片来源
// 上传前钩子
// 上传携带的头信息，对象形式
// 上传额外携带的参数 -->
<u-form-item label="照片信息:" prop="photo" label-width="160">
<u-upload
width="160"
:source-type="sourceType"
:before-upload="beforeUpload"
:action="action"
:header='upHeader'
:form-data="formData"
:max-count="count"
:show-progress="true"
:size-type="sizeType"
@on-remove="deleteItem"
@on-success='onSuccess'
:file-list="details.fileLists">
</u-upload>
</u-form-item>
</u-form>
<view style="position: absolute;top: -999999px;">
<view>
<canvas style="width: 1000px;height: 1000px;" canvas-id="firstCanvas"></canvas>
</view>
</view>
</view>
</view>
</template>
<script>
import {
baseUrl
} from '../../config/config.js';
// 接口中的前缀，根据实际情况来
export default {
name:"dUpload",
props:{
libraryName:{
type: String,
default: '',
},
detail: {
type: Object,
},
MaxCount: {
type: Number,
default: 3
}
},
data() {
return {
action: 'mongo/save',
upHeader: {},
sizeType: ['compressed'],
// 压缩画质
header: {
'X-Access-Token': uni.getStorageSync('token')
},
formData: {
'biz': 'mobile'
},
sourceType: ['camera'],
imageLists: [],
text: '',
// 时间
details:{},
count: 3,
libraryNames: ''
};
},
created() {
this.action = baseUrl + 'mongo/save'
// 上传图片的接口
const token = uni.getStorageSync("userToken")
// 接口需要的token
this.upHeader = {
'X-Access-Token': token
}
setTimeout(()=>{
this.libraryNames = this.libraryName
this.details = this.detail
this.count = this.MaxCount
},200)
this.details.fileLists = []
this.details.ids = []
},
methods:{
// 上传照片
async beforeUpload(index, list) {
uni.showLoading({
title: '上传中...',
})
var data = await this.getWatermark(index, list);
uni.hideLoading()
return data;
},
//照片添加水印
getWatermark(index, list) {
return new Promise((resolve, reject) => {
var that = this;
uni.getImageInfo({
src: list[index].url,
success: (ress) => {
var myDate = new Date();
this.text = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' +
myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate
.getMinutes() + ':' + myDate.getSeconds()
let ctx = uni.createCanvasContext('firstCanvas'); //创建画布
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(list[index].url, 0, 0, ress.width / 3, ress.height / 3)
ctx.setFontSize(30) //字体大小
ctx.setFillStyle('#ffffff') //字体颜色
let textToWidth = ress.width / 14 * 0.3; //字体宽度
let textToHeight = ress.height / 3 * 0.9; //字体高度
let textToWidths = ress.width / 14 * 0.3; //字体宽度
let textToHeights = ress.height / 2.8 * 0.9; //字体高度
ctx.fillText(this.text, textToWidth, textToHeight) // 设置字体
ctx.fillText(this.libraryNames, textToWidths, textToHeights) // 设置字体
ctx.draw(false, () => {
setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
width: ress.width / 3, // 画布宽
height: ress.height / 3, // 画布高
canvasId: 'firstCanvas',
success: (res) => {
list[index].url = res.tempFilePath
uni.saveImageToPhotosAlbum({ //保存到手机
filePath: res.tempFilePath,
success: (re) => {
resolve(true);
}
})
}
})
}, 500)
});
}
})
})
},
// 清除图片的ids
deleteItem(index, lists, name) {
// this.imgIds = ''
console.log(lists)
this.detail.ids = []
lists.map((item) => {
this.detail.ids.push(item.response.id)
})
setTimeout(()=>{
this.$emit('deleteImageData',this.detail.ids)
//
父组件的deleteImageData方法中需要先清空this.detail.id
},200)
},
// 上传成功之后
onSuccess(data, index, lists, name) {
// this.detail.ids.push(data.id)
// console.log(this.detail,data.id)
console.log(this.libraryName)
console.log(this.libraryNames)
this.$emit('getImageData',data.id)
// 父组件中getImageData方法需要给this.detail.ids一个赋值
uni.showToast({
title: '上传成功',
duration: 2000,
icon: 'none'
})
},
// JS字符串截取（获取指定字符后面的所有字符内容）
getSub(obj) {
let index = obj.lastIndexOf('/')
obj = obj.substring(index + 1, obj.length)
return obj
},
}
}
</script>
<style lang="less">
</style>

1
2
3
4
5
<dUpload ref="dUpload" :libraryName="inData.libraryName" :MaxCount="MaxCount" :detail="inData" @getImageData="getImageData" @deleteImageData='deleteImageData'></dUpload>
import dUpload from '../../../components/dUpload/dUpload.vue'
components: {
dUpload
},