目录
前言：实现思路
步骤一、在界面使用uview的u-upload组件、放置canvas标签
步骤二、在afterRead方法中获取照片url，并创建画布生成水印，再将生成水印的照片上传到服务器
1、afterRead方法
2、照片加水印的方法
3、上传照片至服务器
4、处理水印换行操作
最终实现照片加水印效果（水印内容可自定义）：
前言：实现思路
我的实现思路：使用uview的u-upload组件，在上传照片时候会调用afterRead方法，可以获取上传附件的相关属性信息，拿到照片的url之后，调用uni.getImageInfo方法，在uni.getImageInfo的成功回调函数中使用uni.createCanvasContext创建画布，制作水印的文本信息，制作完成后再使用uni.canvasToTempFilePath将画布内容转成图片，再将要上传照片的路径转换成新生成的带有水印照片的url，调用接口完成上传，至此过程结束。
步骤一、在界面使用uview的u-upload组件、放置canvas标签
<u-form-itemlabel="技术/安全交底"requiredprop="JSAQJD"
><u-upload:fileList="JSAQJD"@afterRead="afterRead"@delete="deletePic"name="JSAQJD"multiple:maxCount="3"></u-upload><view style="position: absolute;top: -999999px;"><view><canvas style="width: 1000px;height: 1000px;" canvas-id="myCanvas"></canvas></view></view>
</u-form-item>步骤二、在afterRead方法中获取照片url，并创建画布生成水印，再将生成水印的照片上传到服务器
this[`${e.name}`]其实就是对应的fileList，这里由于上传附件的位置很多，所以最好设置成动态的
1、afterRead方法
async afterRead(e){// file name index//生成水印let data = await this.getWatermark(e.index,e.file[0].url);e.file[0].url = data;let lists = [].concat(e.file)let fileListLen = this[`${e.name}`].lengthlists.map((item)=>{this[`${e.name}`].push({...item,status:'uploading',message:'上传中'})})for(let i=0;i<lists.length;i++){const result_data = await this.uploadFilePromise(lists[i].url)let item = this[`${e.name}`][fileListLen]let img = THUMBNAIL + result_datathis[`${e.name}`].splice(fileListLen,1,Object.assign(item,{status:'success',message:'',url:img}))fileListLen++//附件的uuid更新 需做为空判断this.form[`${e.name}`] += `,${result_data}`}},2、照片加水印的方法
//照片水印
getWatermark(index, list){return new Promise((resolve, reject) => {var that = this;uni.getImageInfo({src: list,success: (ress) => {let ctx = uni.createCanvasContext('myCanvas'); //创建画布//将图片src放到cancas内，宽高为图片大小ctx.drawImage(list, 0, 0, ress.width / 3, ress.height / 3)let textToWidth = ress.width / 3 * 0.03; //字体宽度let textToHeight = ress.height / 3; //字体高度//根据需求，自行设置lineFeed(`拍摄：${that.userinfo.HUMANNAME}`, textToWidth, textToHeight * 0.8,ress.width / 3 * 0.9,ctx)lineFeed(`时间：${getNowDate()}`, textToWidth, textToHeight * 0.85,ress.width / 3 * 0.9,ctx)lineFeed(`地址：${that.address}`, textToWidth, textToHeight * 0.9,ress.width / 3 * 0.9,ctx)ctx.draw(false,()=>{setTimeout(() => {//制作水印需要时间，这里最好设置定时uni.canvasToTempFilePath({//内容转成图片width: ress.width / 3, // 画布宽度height: ress.height / 3, // 画布高度canvasId: 'myCanvas',success: (res) => {list = res.tempFilePathresolve(list);}})}, 500)});}})})
},3、上传照片至服务器
uploadFilePromise(url){let vthis = this;return new Promise((resolve,reject)=>{let a = uni.uploadFile({url:`xxxx/uploadFile.htm`,//设置为自己的后台接口filePath:url,name:'file',formData:{folderId:vthis.recid,//存储路径，用日期标识folderPath:getRq(),recId:vthis.recid,longitude:vthis.form.XZB,latitude:vthis.form.YZB,},success:(res)=>{if(res.statusCode == 200){let o = JSON.parse(res.data)resolve(o.data[0].fileId)}}})})
},4、处理水印换行操作
export function lineFeed(a,x,y,w,context){let chr = a.split("");let temp = ""; let row = [];context.font = 'normal bold 16px Arial,sans-serif 'context.setFillStyle('#FFA500') //字体颜色for(let i = 0; i < chr.length; i++){if( context.measureText(temp).width < w ){;}else{row.push(temp);temp = "";}temp += chr[i];}row.push(temp);for(let r = 0; r < row.length; r++){context.fillText(row[r],x,y+(r+1)*20);}
}至此，前端成功解决照片+水印的功能~~~
