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

 水印内容为： 时间  基地库

仅支持app，加水印在其他平台加不上，只能显示原图片

// 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>

• detail：Array         包含图片列表fileLists 的数组 
• libraryName： String  水印中的基地库

 调用的时候

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

 写的还有很多不足，仅满足项目使用

最后

以上就是眼睛大花生最近收集整理的关于上传图片时添加水印的组件的全部内容，更多相关上传图片时添加水印内容请搜索靠谱客的其他文章。