深圳网站建设民治大道,有什么做详情页的参考网站,诀窍的网站,网络营销具有什么特点目录 需求背景实现地理位置添加水印 ios补充 需求背景
需求#xff1a;拍照后给图片添加水印, 水印包含经纬度、用户信息、公司logo等信息。 效果图#xff1a;
方案#xff1a;使用canvas添加水印。 具体实现#xff1a;上传图片组件是项目里现有的#xff… 目录 需求背景实现地理位置添加水印 ios补充 需求背景
需求拍照后给图片添加水印, 水印包含经纬度、用户信息、公司logo等信息。 效果图
方案使用canvas添加水印。 具体实现上传图片组件是项目里现有的主要还是使用uni.chooseImage这里不做赘述。 在上传图片组件中增加一个参数判断是否添加水印在获取到图片、上传到后端之前对图片进行加工。
实现
在模板中添加canvas。 template
templateview classmd-upload!-- 其他组件上传图片逻辑 --canvas v-ifwaterMarkParams.display canvas-idwaterMarkCanvas :stylecanvasStyle //view
/templateprops
props: {//其他props参数。。。waterMask: { // 是否添加水印type: Boolean,default: () false}},其他的一些数据
//这个放data
waterMarkParams: {display: false, // 控制 canvas 创建与销毁canvasWidth: 300, // 默认宽度canvasHeight: 225 // 默认高度
},
latitude: ,
longitude: ,
address: ,
orgFullName: ,
userName: ,
currentTime: //这个放computed
canvasStyle() {
return {position: fixed, // 移除到屏幕外left: 9999px,width: this.waterMarkParams.canvasWidth px,height: this.waterMarkParams.canvasHeight px};
}地理位置
这里有一个小问题尝试了很多方法都没办法在success回调中去绘制canvas退而其次选择在mounted里去获得地理位置不知道有没有更好的写法欢迎指正。 注如果要获取地理位置type只能选择gcj02而且这个type只适用于app用h5开发调试会显示不出来。
mounted() {uni.getLocation({type: gcj02,geocode: true,success: (res) {//经纬度this.longitude res.longitude; this.latitude res.latitude;//拼接地址this.address res.address.province res.address.city res.address.district res.address.street res.address.streetNum res.address.poiName;}})},添加水印
入参的src是uni.chooseImage的success回调里返回的path
// 添加水印async getWaterMark(src) {//绘图方法startfunction fillText(context, x, y, content, font, fontStyle, textAlign) {context.save();context.font font;context.fillStyle fontStyle;context.textAlign textAlign;context.fillText(content, x, y);}function fillCircle(context, x, y, r, fillStyle) {context.save();context.beginPath();context.arc(x, y, r, 0, 2 * Math.PI);context.fillStyle fillStyle;context.fill();context.closePath();}function fillRect(context, x, y, width, height, fillStyle) {context.save();context.fillStyle fillStyle;context.fillRect(x, y, width, height);}//绘图方法endlet that this;that.waterMarkParams.display true;this.currentTime moment().format(YYYY-MM-DD HH:mm:ss); //获取当前时间if(!this.orgFullName){ //获取运营商信息await this.getOrgFullName();}this.userName uni.getStorageSync(userInfo).userTitle; //获取用户信息return new Promise((resolve, reject) {// 获取图片信息配置 canvas 尺寸uni.getImageInfo({src,success: (res) {try {console.log(成功获取图片信息,res);// 修复部分手机(如红米9)手机屏幕比较窄拍摄出来的图片水印压缩着覆盖的问题that.waterMarkParams.canvasWidth Math.max(res.width, 886);that.waterMarkParams.canvasHeight res.height;// 等待 canvas 元素创建that.$nextTick(async () {let context uni.createCanvasContext(waterMarkCanvas, that);const { canvasWidth, canvasHeight } that.waterMarkParams;// 绘制前清空画布context.clearRect(0, 0, canvasWidth, canvasHeight);// 将图片src放到cancas内宽高必须为图片大小context.drawImage(src, 0, 0, canvasWidth, canvasHeight, canvasWidth, canvasHeight);const fangweiY 320;// 保证水印能完整显示出来 x是画布宽度两倍 y是画布高度减去防伪码位置和字体大小const [x, y] [canvasWidth / 2, canvasHeight - (fangweiY 100)];// 坐标原点移动到画布左下角context.translate(0, canvasHeight);const icon_site require(./site.png);const icon_camera require(./camera.png);const icon_icon require(./icon.png);context.drawImage(icon_site, 40,-360,30,46);fillText(context, 80, -326, this.siteName, 500 40px Microsoft YaHei, white, left);fillRect(context, 40, -290, 10, 260, #FF0000);fillText(context, 70, -250, 时间 this.currentTime, 30px Microsoft YaHei, white, left);fillText(context, 70, -190, 运维商 this.orgFullName, 30px Microsoft YaHei, white, left);fillText(context, 70, -130, 经纬度 that.longitude , that.latitude, 30px Microsoft YaHei, white, left);if(that.address.length 15){ //地址过长时截断显示fillText(context, 70, -70, 地址 that.address.slice(0,15), 30px Microsoft YaHei, white, left);fillText(context, 70, -40, that.address.slice(15), 30px Microsoft YaHei, white, left);}else {fillText(context, 70, -70, 地址 that.address, 30px Microsoft YaHei, white, left);}//移动到右下角let textLength that.userName.length * 30;context.translate(canvasWidth, 0);if(that.address.length 15){context.drawImage(icon_icon, -180, -130,72,35);fillText(context, -40, -100, 光伏, 30px Microsoft YaHei, white, right);context.drawImage(icon_camera, -1 * textLength - 130, -70,38,34);fillText(context, -40, -40, that.userName 拍摄, 30px Microsoft YaHei, white, right);}else{context.drawImage(icon_icon, -180, -160,72,35);fillText(context, -40, -130, 光伏, 30px Microsoft YaHei, white, right);context.drawImage(icon_camera, -1 * textLength - 130, -100,38,34);fillText(context, -40, -70, that.userName 拍摄, 30px Microsoft YaHei, white, right);}// 一定要加上一个定时器否则进入到页面第一次可能会无法正常拍照后几次才正常setTimeout(() {// 本次绘画完重开开始绘画并且在绘画完毕之后再保存图片不然页面可能会出现白屏等情况context.draw(false, () {console.log(!!!!!开始绘画, canvasWidth, canvasHeight);uni.canvasToTempFilePath({canvasId: waterMarkCanvas,fileType: jpg,width: canvasWidth,height: canvasHeight,destWidth: canvasWidth,destHeight: canvasHeight,success: ({ tempFilePath }) {console.log(绘制成功);that.waterMarkParams.display false;resolve(tempFilePath);},fail: (err) {reject(err);console.log(err);}},that);});}, 1000);console.log(完成绘制);});} catch (error) {console.log(error);}},fail: (err) {reject(err);console.log(err);}});});},最后用这个方法返回的url替换原本上传时的url就是添加了水印的图片
let waterUrl await this.getWaterMark(lists[i].url);
lists[i].filePath waterUrl;ios补充
如果ios出现了图片空白把方法里的定时器时间加长我从1000加到了2500uni.chooseImage也选择压缩不要选择原图
