重视网站阵地建设,东莞房价2023年最新房价,百度友情链接,wordpress最好用的用户管理系统要实现的内容#xff1a;手写签名#xff0c;协议内容。点击提交后#xff1a;生成1张图片#xff0c;有协议内容和签署日期和签署人。 实现的效果图如下#xff1a; 1、签名页面 templateview classindexu-navbar title电子协议…要实现的内容手写签名协议内容。点击提交后生成1张图片有协议内容和签署日期和签署人。 实现的效果图如下 1、签名页面 templateview classindexu-navbar title电子协议 :is-backfalse :border-bottomfalse title-color#333 :background{background:}view classpage_navbar_warpimage src../../static/icon/0.png mode classpage_navbar_commonImg click$go(1,1)/image/view/u-navbarimage srchttps://www.*****/xieyi.png mode classbanner/imageview classsignBoxview classtitle签名区/viewview stylewidth: 700rpx;height: 450rpx;l-signature disableScroll backgroundColorrgba(255, 249, 238, .0) refsignatureRef penColor#333 :penSize5 :openSmoothtrue /l-signature/view/viewview classfooterview classbtn1 t-c clickonClick(undo)撤消/viewu-button classbtn2 t-c clickonClick(save) :loadingloading提交/u-button/view/view
/templatescriptexport default {data() {return {loading:false,}},methods:{onClick(type) {if(type openSmooth) {this.openSmooth !this.openSmoothreturn}if (type save) {this.$refs.signatureRef.canvasToTempFilePath({success: (res) {// 是否为空画板 无签名// 生成图片的临时路径// H5 生成的是base64let url res.tempFilePath;console.log(res);if(res.isEmpty){this.$toast(请签名)}else{this.loading true;this.$uploadImage(common/upload, url).then(res {this.loading false;if(res.code 1){this.$go(2,/pages/mine/canvas?signImgres.data.fullurl)}})}}})return}if (this.$refs.signatureRef) this.$refs.signatureRef[type]()}}}
/scriptstyle scoped langscss.index{min-height: 100vh;position: relative;.banner{display: block;width: 585rpx;height: 416rpx;margin: auto;}.signBox{border: 1rpx dashed #BF9350;width: 700rpx;height: 500rpx;margin: 32rpx auto;.title{padding-top: 32rpx;font-size: 40rpx;color: #BF9350;padding-left: 32rpx;}}.footer{position: fixed;left: 0;bottom: 0;width: 750rpx;height: 98rpx;background: #fff;box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.32);padding: 0 50rpx;display: flex;align-items: center;justify-content: space-between;.btn1{width: 300rpx;height: 81rpx;border-radius: 41rpx 41rpx 41rpx 41rpx;border: 1rpx solid #BF9350;font-size: 32rpx;color: #BF9350;}.btn2{width: 300rpx;height: 81rpx;background: #BF9350;border-radius: 41rpx 41rpx 41rpx 41rpx;font-size: 32rpx;color: #fff;}}}
/style2、canvas页面用来合成1张图 templateview classdemou-navbar title电子协议 :is-backfalse :border-bottomfalse title-color#333 :background{background:#FFFAF3}view classpage_navbar_warpimage src../../static/icon/0.png mode classpage_navbar_commonImg click$go(1,1)/image/view/u-navbarcanvas :style{ width: canvasW px, height: canvasH px } canvas-idmyCanvas idmyCanvas/canvasview classfooterview classbtn1 t-c click$go(1,1)取消/viewu-button classbtn2 t-c clicksubmit :loadingloading shapecircle :rippletrue提交/u-button/view/view
/template
scriptexport default {components: {},data() {return {loading:false,canvasW:0, // 画布宽canvasH:0, // 画布高SystemInfo:{}, // 设备信息goodsImg: {}, // 协议图片signImg:{}, // 签名图片signW:120, // 签名图片大小bgImg:{},year:,mon:,date:,tempFilePath:,}},async onLoad(option) {var start new Date();this.year start.getFullYear();this.mon start.getMonth() 1;this.date start.getDate();// 获取设备信息主要获取宽度赋值给canvasW 也就是宽度100%this.SystemInfo await this.getSystemInfo();// 获取协议图片签名二维码图片信息APP端会返回图片的本地路径H5端只能返回原路径this.bgImg await this.getImageInfo(https://www.*******/xieyi.png);this.goodsImg await this.getImageInfo(https://www.*******/bg.png);this.signImg await this.getImageInfo(option.signImg);this.canvasW this.SystemInfo.windowWidth; // 画布宽度// #ifdef APP-PLUSthis.canvasH this.SystemInfo.windowHeight-94-uni.getSystemInfoSync().statusBarHeight; // 画布高度 页面高度-(导航栏固定44pxfooter的50pxAPP内手机双跳栏的高度)// #endif// #ifdef H5this.canvasH this.SystemInfo.windowHeight-94; // #endif// 如果主图二维码图片设备信息都获取成功开始绘制海报这里需要用setTimeout延时绘制否则可能会出现图片不显示。if(this.goodsImg.errMsg getImageInfo:ok this.signImg.errMsg getImageInfo:ok this.SystemInfo.errMsg getSystemInfo:ok){uni.showToast({icon:loading,mask:true,duration:10000,title: 加载中,请稍后,});setTimeout((){var ctx uni.createCanvasContext(myCanvas, this);// 填充背景ctx.drawImage(this.bgImg.path, 0, 0, this.canvasW, this.canvasH) // drawImage(图片路径,x,y,绘制图像的宽度绘制图像的高度)// 绘制协议主图ctx.drawImage(this.goodsImg.path, 50, 60, this.canvasW-100, this.canvasW-180) // drawImage(图片路径,x,y,绘制图像的宽度绘制图像的高度)// 签署日期ctx.setFontSize(16)ctx.setFillStyle(#333)ctx.fillText(签署日期${this.year}年${this.mon}月${this.date}日, 50, this.canvasH -this.signW-80);// 签署人ctx.setFontSize(14)ctx.setFillStyle(#333)ctx.fillText(签署人, 50, this.canvasH -this.signW-40);// 签署人ctx.drawImage(this.signImg.path, 90, this.canvasH-this.signW-80, this.signW, this.signW) // drawImage(图片路径,x,y,绘制图像的宽度绘制图像的高度,二维码的宽,高)ctx.draw(true,(ret){ // draw方法 把以上内容画到 canvas 中。console.log(ret) uni.showToast({icon:success,mask:true,title: 绘制完成,});uni.canvasToTempFilePath({ // 保存canvas为图片canvasId: myCanvas,quality: 1,complete: (res) {console.log(res)// 在H5平台下tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败APP端正常输出临时路径if(res.tempFilePath){this.tempFilePath res.tempFilePath;}},})});},1500)}else{console.log(err)}},methods: {submit(){this.loading true;console.log(需要提交给后台的图片this.tempFilePath)},// 获取图片信息getImageInfo(image) {return new Promise((req, rej) {uni.getImageInfo({src: image,success: function(res) {req(res)},});})},// 获取设备信息getSystemInfo(){return new Promise((req, rej) {uni.getSystemInfo({success: function (res) {req(res)}});})},},}
/scriptstyle scoped langscss.footer{position: fixed;left: 0;bottom: 0;width: 750rpx;height: 50px;box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.32);padding: 0 50rpx;display: flex;align-items: center;justify-content: space-between;background: #fff;.btn1{width: 300rpx;height: 40px;border-radius: 41rpx 41rpx 41rpx 41rpx;border: 1rpx solid #BF9350;font-size: 32rpx;color: #BF9350;}.btn2{width: 300rpx;height: 40px;background: #BF9350;border-radius: 41rpx 41rpx 41rpx 41rpx;font-size: 32rpx;color: #fff;}}
/style备注 1、协议页面内用的l-signature来自于uniapp插件市场 2、canvas页面灵感来自于之前写过的一篇绘制海报文章 3、页面中用到的 xieyi.png协议内容、bg.png底图)、以及签名后的option.signImg签名图都需要后台设置允许跨域。否则H5就会报错画布污染无法生成base64。 这个问题在APP内不存在只有H5会出现。
