哪个网站有手工活做,红酒 网站 模板,好上手的做海报网站,深圳企业网站建设推广外包服务商Vue在线签名 一、目的二、样式三、代码1、依赖2、代码2.1 在线签名组件2.1.1 基础的2.1.2 携带时间水印的 2.2父组件 一、目的 又来了一个问题#xff0c;直接让我在线签名#xff08;还不能存储base64#xff09;#xff0c;并且还得上传#xff0c;我直接***违禁词。 好… Vue在线签名 一、目的二、样式三、代码1、依赖2、代码2.1 在线签名组件2.1.1 基础的2.1.2 携带时间水印的 2.2父组件 一、目的 又来了一个问题直接让我在线签名还不能存储base64并且还得上传我直接***违禁词。 好家伙又回来了这次增加了一个加入时间水印的要求我***。 二、样式 初始样式 点击前往组件忽略写的什么样 这里可以调节画笔颜色什么的也能进行预览点击保存之后 1、这里点击保存按钮我也走了一遍预览签名不走的话这边直接保存了签名图片还在上传无法进行回显了 2、也可以在保存的方法使用延迟调用setTimeout但是怕无法把握这个时间所以就用了方法1 三、代码
1、依赖
npm install vue-esign --save2、代码 因为使用的jeecg框架这里是按照框架进行写的原生的其他版本等有时间在更新一下毕竟cv工程师。 下面的生成图片逻辑和上一篇Vue中使用图片编辑器 tui-image-editor 实现在线编辑保存最后的base转换差不多都是一样的这里也是使用了组件调用。 2.1 在线签名组件
2.1.1 基础的 在线编辑的组件名称我这里是Esignature.vue templatej-modal:titletitle:widthwidth:visiblevisibleswitchFullscreen:okButtonProps{ class:{jee-hidden: false} }okhandleOkokText保存cancelhandleCancelcancelText关闭a-card :borderedfalsea-col :span24a-card :borderedtrue stylewidth: 100%;a-rowa-col :span6a-form-model-item label画笔粗细 :labelCollabelCol :wrapperColwrapperCola-select stylewidth:100px; v-modellineWidth placeholder请选择a-radio :value11/a-radioa-radio :value33/a-radioa-radio :value66/a-radioa-radio :value99/a-radio/a-select/a-form-model-item/a-cola-col :span6a-form-model-item label画笔颜色 :labelCollabelCol :wrapperColwrapperCol!-- input颜色回显必须要六位的颜色值 --a-input v-modellineColor typecolor placeholder placeholder-classinput-placeholder //a-form-model-item/a-cola-col :span6a-form-model-item label画布背景 :labelCollabelCol :wrapperColwrapperCola-input v-modelbgColor typecolor placeholder placeholder-classinput-placeholder //a-form-model-item/a-cola-col :span6a-form-model-item label是否裁剪 :labelCollabelCol :wrapperColwrapperColj-switch v-modelisCrop :options[true,false] /j-switch/a-form-model-item/a-colvue-esignstyleborder: 1px solid #808080;refesignRef:widthcanWidth:heightcanHeight:isCropisCrop:lineWidthlineWidth:lineColorlineColor:bgColor.syncbgColor:isClearBgColorisClearBgColor /button clickhandleReset清空画板/buttonbutton clickhandleGenerate(false)预览图片/buttondivimg stylefloat:left;border: 1px solid #808080 :srcimgBase alt/div/a-row/a-card/a-col/a-card/j-modal
/templatescriptimport { getAction, httpAction } from api/manageimport VueEsign from vue-esignexport default {name: Esign,components: {VueEsign},data () {return {canWidth: 800,//画布宽度--是不会超出父元素的宽度的--设置也不行canHeight: 300,lineWidth: 3,//画笔粗细lineColor: #000000,//画笔颜色bgColor: #ffffff,//画布背景isCrop: false,//是否裁剪isClearBgColor: true,//是否清空背景色imgBase: ,//生成签名图片-base64imgUrl: ,//生成签名图片-base64labelCol: {xs: { span: 24 },sm: { span: 8 }},wrapperCol: {xs: { span: 24 },sm: { span: 16 }},title: ,width: 1000,visible: false,disableSubmit: false,}},methods: {//调用组件handleSign(){this.visible truethis.$nextTick((){// console.log(调用this.$refs.esignRef)this.handleReset()})},//保存handleOk() {this.handleGenerate(true)// setTimeout(() {// this.$emit(getSign,this.imgUrl);// this.close()// },100); // 延迟0.1秒},//关闭close() {this.$emit(close)this.visible false},//关闭按钮handleCancel() {this.close()},//重置handleReset () {////清空画布内容this.lineWidth 3this.lineColor #000000this.bgColor #ffffffthis.isCrop falsethis.imgBase this.$refs.esignRef.reset();},//生成图片handleGenerate (flag) {// console.log(生成图片this.$refs.esignRef)this.$refs.esignRef.generate().then(res {// console.log(base64地址, res)this.imgBase resif (flag){//进行base64转换的操作因为后台文件都会加上随机后缀这里使用sign.png了const form this.base64ChangePicForm(res,sign.png)httpAction(/sys/common/upload, form, post).then((uploadRes) {// console.log(JSON.stringify(uploadRes))if (uploadRes.success){this.imgUrl uploadRes.messagethis.$emit(getSign,this.imgUrl);this.close()}})}}).catch(error {// console.log(错误, error)this.$message.warning(请先签字);})}, //转换图片base64ChangePicForm(base64String,fileName){const data window.atob(base64String.split(,)[1]);const ia new Uint8Array(data.length);for (let i 0; i data.length; i) {ia[i] data.charCodeAt(i);}const blob new Blob([ia], { type: image/png }); // blob 文件const file new File([blob], fileName, { type: blob.type });const form new FormData();form.append(file, file);form.append(biz, web/sign);return form},}}
/script2.1.2 携带时间水印的
templatej-modal:titletitle:widthwidth:visiblevisibleswitchFullscreen:okButtonProps{ class:{jee-hidden: false} }okhandleOkokText保存cancelhandleCancelcancelText关闭a-card :borderedfalsea-col :span24a-card :borderedtrue stylewidth: 100%;a-rowa-col :span6a-form-model-item label画笔粗细 :labelCollabelCol :wrapperColwrapperCola-select stylewidth:100px; v-modellineWidth placeholder请选择a-radio :value11/a-radioa-radio :value33/a-radioa-radio :value66/a-radioa-radio :value99/a-radio/a-select/a-form-model-item/a-cola-col :span6a-form-model-item label画笔颜色 :labelCollabelCol :wrapperColwrapperCol!-- input颜色回显必须要六位的颜色值 --a-input v-modellineColor typecolor placeholder placeholder-classinput-placeholder //a-form-model-item/a-cola-col :span6a-form-model-item label画布背景 :labelCollabelCol :wrapperColwrapperCola-input v-modelbgColor typecolor placeholder placeholder-classinput-placeholder //a-form-model-item/a-cola-col :span6a-form-model-item label是否裁剪 :labelCollabelCol :wrapperColwrapperColj-switch v-modelisCrop :options[true,false] /j-switch/a-form-model-item/a-colvue-esignstyleborder: 1px solid #808080;refesignRef:widthcanWidth:heightcanHeight:isCropisCrop:lineWidthlineWidth:lineColorlineColor:bgColor.syncbgColor:isClearBgColorisClearBgColor /button clickhandleReset清空签名/buttonbutton clickhandleGenerate(false)预览签名/buttondivimg stylefloat:left;border: 1px solid #808080 :srcimgBase alt/div/a-row/a-card/a-col/a-card/j-modal
/templatescriptimport { getAction, httpAction } from api/manageimport VueEsign from vue-esignimport { formatDate } from /utils/dateNumberexport default {name: Esign,components: {VueEsign},data () {return {canWidth: 800,//画布宽度--是不会超出父元素的宽度的--设置也不行canHeight: 300,lineWidth: 3,//画笔粗细lineColor: #000000,//画笔颜色bgColor: #ffffff,//画布背景isCrop: false,//是否裁剪isClearBgColor: true,//是否清空背景色imgBase: ,//生成签名图片-base64imgUrl: ,//生成签名图片-base64labelCol: {xs: { span: 24 },sm: { span: 8 }},wrapperCol: {xs: { span: 24 },sm: { span: 16 }},title: ,width: 1000,visible: false,disableSubmit: false,}},methods: {//调用组件handleSign(){this.visible truethis.$nextTick((){// console.log(调用this.$refs.esignRef)this.handleReset()})},//保存handleOk() {this.handleGenerate(true)// setTimeout(() {// this.$emit(getSign,this.imgUrl);// this.close()// },100); // 延迟0.1秒},//关闭close() {this.$emit(close)this.visible false},//关闭按钮handleCancel() {this.close()},//重置handleReset () {////清空画布内容this.lineWidth 3this.lineColor #000000this.bgColor #ffffffthis.isCrop falsethis.imgBase this.$refs.esignRef.reset();},//生成图片handleGenerate (flag) {// console.log(生成图片this.$refs.esignRef)this.$refs.esignRef.generate().then(res {// console.log(base64地址, res)// this.imgBase res//加入时间水印this.addWatermark(res,formatDate(new Date(),yyyy-MM-dd hh:mm:ss)).then((rmarkRes){this.imgBase rmarkRes//判断是保存还是预览保存上传预览不上传if (flag){//进行base64转换的操作因为后台文件都会加上随机后缀这里使用sign.png了const form this.base64ChangePicForm(rmarkRes,sign.png)httpAction(/sys/common/upload, form, post).then((uploadRes) {// console.log(JSON.stringify(uploadRes))if (uploadRes.success){this.imgUrl uploadRes.messagethis.$emit(getSign,this.imgUrl);this.close()}else {this.$message.warning(uploadRes.message);}}).catch((error) {this.$message.warning(error);})}})}).catch(error {// console.log(错误, error)this.$message.warning(请先签字);})},//转换图片base64ChangePicForm(base64String,fileName){const data window.atob(base64String.split(,)[1]);const ia new Uint8Array(data.length);for (let i 0; i data.length; i) {ia[i] data.charCodeAt(i);}const blob new Blob([ia], { type: image/png }); // blob 文件const file new File([blob], fileName, { type: blob.type });const form new FormData();form.append(file, file);form.append(biz, web/sign);return form},//加入水印addWatermark(base64String, watermarkText) {return new Promise((resolve, reject) {const image new Image();image.onload () {const canvas document.createElement(canvas);const context canvas.getContext(2d);canvas.width image.width;canvas.height image.height;// 绘制原始图片context.drawImage(image, 0, 0);// 添加水印context.font 20px Arial;context.fillStyle rgba(128,128,128,0.5);context.textAlign center;context.fillText(watermarkText, canvas.width / 2, canvas.height);// 将 Canvas 转换为 Base64 图片const watermarkedImage canvas.toDataURL(image/png);resolve(watermarkedImage);};image.onerror (error) {reject(error);};image.src base64String;});}}}
/scriptstyle
/style
2.2父组件 这里就简单一写反正都是差不多的这里使用button按钮的userSign1方法进行调用在线签名组件然后使用getSign1方法进行回调将上传后的图片赋值给本页面的signFiles1进行显示。 a-col :span12 :styleformDisabled?(model.signFile1?:display: none;):a-form-model-item label签字 :labelCollabelCol :wrapperColwrapperCol propsignFiles1a-button clickuserSign1 iconedit前往签字/a-buttonesignature refsignFormTo1 getSigngetSign1/j-image-upload text上传签字 bizPathweb/sign v-modelsignFiles1 :is-multiplefalse disabled//a-form-model-item/a-col方法知己简单明了 //签名
userSign1(){this.$refs.signFormTo1.handleSign();
},getSign1(res) {this.signFiles1 res
},
