vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地

在做让用户在页面签名并把当前页面保存为图片，附上完整代码

(直接复制代码，更改接口地址或删除接口逻辑可直接复用)

**准备工作：安装 npm install vue-esign --save

全局引用 import vueEsign from ‘vue-esign’

Vue.use(vueEsign)

安装 npm i html2canvas --save

页面引用 import html2canvas from "html2canvas"

**

展示图

<template><div><div v-show="firstFlag"><divid="captureId"class="esign_content_out":style="{ backgroundImage: 'url(' + bgPic + ')' }"><div class="esign_content"><div class="esign_title">****{{ isStop ? '停课' : '转班' }}须知</div><div class="esign_des">亲爱的同学你好，你正在办理{{isStop ? '停课' : '转班'}}手续，请填写下面表格并签字确认；</div><div class="esign_content_title">{{ isStop ? '停课' : '转班' }}申请</div><div class="esign_content_text">学员<span class="esign_content_value">{{ name }}</span>(联系电话：<span class="esign_content_value">{{tel}}</span>)因个人原因无法继续<span class="esign_content_value">{{getTypeName(languageid)}}</span>的<span class="esign_content_value">{{oldClassName}}</span>学习，申请<span v-if="isStop">暂停课程<span class="esign_content_value">{{stopTime}}</span>个月</span><span v-else>转班至<span class="esign_content_value">{{newClassName}}</span></span>。<br />申请日期：<span class="esign_content_value">{{year}}</span>年<span class="esign_content_value">{{ month }}</span>月<span class="esign_content_value">{{ day }}</span>日</div><div class="esign_out">签字：<div class="esign_bg"><vue-esignv-if="!sigimg && type != 'admin'"ref="esign":width="242":height="123":isCrop="isCrop":lineWidth="lineWidth":lineColor="lineColor":bgColor="bgColor"/><img v-else :src="sigimg" alt="" width="widthFix" /></div></div><div class="esign_remarks">注：最终解释权归****所有</div></div></div><div class="footer" v-if="!sigimg && type != 'admin'"></div><divclass="btn_bg moveUp flexVerticalCenter"v-if="!sigimg && type != 'admin'"><divclass="btn flexVerticalCenter":style="{ background: isSign ? '' : '#4d4dd9' }"@click="handleGenerate">提交申请</div></div></div><div class="flexVerticalCenter" v-show="!firstFlag"><imgclass="show-img"style="max-width:375px;"mode="widthFix":src="dataURL"alt=""/></div><!-- 画板事件 --><!-- <button @click="handleReset">清空画板</button><button @click="handleGenerate">生成图片</button><button @click="drawProdPicture">合成图片</button> --><!-- 签署区域图展示 --><!-- <div style="border: solid 2px red"><img :src="resultImg" /></div> --><!-- 底图与签署区域图展示 --><!-- <div style="display: table;margin:0 auto;"><img :src="makePic" style="max-width:375px;" mode="widthFix" /></div> --></div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {data() {return {lineWidth: 1,lineColor: '#000000',bgColor: '#ffffff',//签名图resultImg: '',isCrop: false,//底图bgPic: require('@/assets/images/autograph/1.png'),makePic: '',id: '', //查询停课转班参数idtype: '', //是否是从网校后台打开链接year: '', //年month: '', //月day: '', //日languageid: 0, //语言idname: '', //学员姓名tel: '', //联系电话newClassName: '', //新班级oldClassName: '', //老班级opname: '', //操作类型sigimg: '', //签字图片stopTime: '', //听课时间(月)userid: '', //学员idlanguageidList: [//语言类型{ id: 1, typeName: '韩语' },{ id: 2, typeName: '西语' },{ id: 3, typeName: '日语' },{ id: 4, typeName: '德语' },{ id: 5, typeName: '法语' }],isStop: false, //是否是停课类型firstFlag: true,dataURL: '',isSign: false}},created() {var id = this.$route.query.idthis.id = idif (this.$route.query.type) {this.type = this.$route.query.type}this.getArchive(id)this.imgSRC = window.location.hrefthis.firstFlag = true},mounted() {},methods: {// 将h5页面转换成图片toImg() {var that = thishtml2canvas(document.querySelector('#captureId')).then((canvas) => {let imgUrl = canvas.toDataURL('image/png')// 拿到图片地址传参到签署接口that.sinImg(imgUrl)}).catch(() => {})},// 查询停课转班async getArchive(id) {var params = new URLSearchParams()params.append('id', id)const { data: res } = await this.$http.post('查询接口',params)if (res.status == 1001) {if (res.data) {var createTime = res.data.createTime.split('-')this.year = createTime[0]this.month = createTime[1]var day = createTime[2].split(' ')[0]this.day = daythis.createTime = res.data.createTimethis.languageid = res.data.languageidthis.name = res.data.namethis.tel = res.data.telthis.newClassName = res.data.newClassNamethis.oldClassName = res.data.oldClassNamethis.opname = res.data.opnamethis.sigimg = res.data.sigimgif (this.sigimg) {this.firstFlag = falsethis.dataURL = this.sigimg} else {this.firstFlag = true}this.stopTime = res.data.stopTimethis.userid = res.data.useridif (this.stopTime) {this.isStop = true}}}},// 生成签署区域图片handleGenerate() {this.$refs.esign.generate().then((res) => {// eslint-disable-next-line no-debugger// debuggerthis.resultImg = resconst that = thisthat.$nextTick(function() {that.toImg()})// 调用drawProdPicture方法可以把bgPic底图与resultImg签名图两张图片合成一张图片// setTimeout(() => {// this.drawProdPicture()// }, 1000)}).catch(() => {this.$toast({message: '请先签名'})// alert(err) // 画布没有签字时会执行这里 'Not Signned'})},// 签署停课转班async sinImg(sigimg) {this.isSign = truevar sinImg2 = sigimgconsole.log(typeof sinImg2)var params = new URLSearchParams()params.append('id', this.id)params.append('sigimg', sigimg)const { data: res } = await this.$http.post('签署接口',params)if (res.status == 1001) {this.dataURL = sigimgthis.firstFlag = falsethis.$toast({ message: '签署成功' })} else {this.$toast(res.message)}},// 获取语言类型getTypeName(id) {for (let i = 0, len = this.languageidList.length; i < len; i++) {let item = this.languageidList[i]if (item.id === id) {return item.typeName}}},// 清空画板handleReset() {this.$refs.esign.reset()this.$refs.esign.width = 242this.$refs.esign.height = 123this.$refs.esign.isCrop = this.isCropthis.$refs.esign.lineWidth = this.lineWidththis.$refs.esign.lineColor = this.lineColorthis.$refs.esign.bgColor = this.bgColor},// 生成 底涂与签署区域图的合成drawProdPicture() {// eslint-disable-next-line no-debugger// debuggerlet img1 = new Image()img1.src = this.bgPicimg1.width = 360img1.height = 666img1.setAttribute('crossOrigin', 'anonymous')let canvas = document.createElement('canvas')let context = canvas.getContext('2d')canvas.width = 360canvas.height = 666let img2 = new Image()let flag = true// 将 img1 加入画布img1.onload = () => {context.drawImage(img1, 0, 0, 360, 666)// 通过绘图方式形成文案// context.font = 'bold 32px Arial'// context.fillStyle = '#003462'// context.textAlign = 'center'// context.fillText('聚趣教育停课须知', 360 / 2, 170)// context.font = '14px Arial'// context.fillStyle = '#003462'// context.textAlign = 'center'// context.fillText(//     '亲爱的同学你好，你正在办理转班手续，请填',//   360 / 2,//  240// )// context.font = '14px Arial'// context.fillStyle = '#003462'// context.textAlign = 'center'// context.fillText('写下面表格并签字确认；', 360 / 2, 260)// context.font = 'bold 18px Arial'// context.fillStyle = '#003462'// context.textAlign = 'center'// context.fillText('转班申请', 360 / 2, 305)// context.font = 'bold 15px Arial'// context.fillStyle = '#003462'// context.fillText(//     '学员 ' + this.name + ' (联系电话： ' + this.tel + ' )',//    155,//  345// )// context.font = 'bold 15px Arial'// context.fillStyle = '#003462'// context.fillText(//  '因个人原因无法继续' +//      this.getTypeName(this.languageid) +//      '的' +//      this.oldClassName +//      '学习，申',//  179,//  368// )// context.font = 'bold 15px Arial'// context.fillStyle = '#003462'// context.fillText('请转班至' + this.newClassName, 98, 393)// context.font = 'bold 15px Arial'// context.fillStyle = '#003462'// context.fillText(//  '申请日期：' +//       this.year +//      '年' +//      this.month +//         '月' +//      this.day +//       '日',//    129,//  418// )// context.fillText('签字：', 60, 442)img2.src = this.resultImgimg2.setAttribute('crossOrigin', 'anonymous')img2.width = 242img2.height = 123if (flag) {flag = false} else {let src = canvas.toDataURL()this.makePic = src}}// 将 img2 加入画布img2.onload = () => {context.drawImage(img2, 81, 430, 242, 123)if (flag) {flag = false} else {let src = canvas.toDataURL('image/png')this.makePic = src}}}}
}
</script><style lang="less" scoped>
.esign_content_out {width: 360px;height: 666px;background-size: 100% 100%;margin: 0 auto;.esign_content {height: 600px;margin: 0 auto;padding: 0 35px;box-sizing: border-box;position: relative;.esign_title {font-size: 32px;font-weight: bold;color: #003462;text-align: center;padding: 136px 0 48px;}.esign_des {font-size: 14px;font-weight: 400;color: #003462;text-align: center;}.esign_content_title {font-size: 18px;font-weight: 800;color: #003462;text-align: center;padding: 24px 0 16px;}.esign_content_text {line-height: 24px;font-size: 14px;font-weight: bold;color: #003462;white-space: pre-line; // 换行.esign_content_value {font-size: 15px;font-weight: 800;color: #4d4dd9;padding: 0 3px;border-bottom: 1px solid #003462;}}.esign_out {font-size: 14px;font-weight: bold;color: #003462;display: flex;padding-top: 12px;.esign_bg {background: #ffffff;display: table;}}.esign_remarks {position: absolute;bottom: 0;font-weight: 400;color: #003462;position: absolute;}}
}
.footer {width: 360px;height: 96px;margin: 0 auto;
}
.btn_bg {width: 360px;height: 96px;background: #ffffff;margin: 0 auto;position: fixed;left: 50%;bottom: 0;transform: translate(-50%, 0);.btn {width: 335px;height: 40px;border-radius: 20px;font-size: 16px;font-weight: 400;color: #ffffff;}
}
</style>

vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地相关推荐

unity编辑器拓展十一——将两张RGB图合并成一张
游戏角色shader,包含的东西比较多,还要做到动态合并,程序那边希望贴图经可能少,而我们美术用了两张图,一张图的RGB是高光.流光.自发光,另外一张图的RGB是不同区域的偏色,其实每个通道的一整张贴 ...
sqlserver 把两个sql查询语句查询出来的两张表合并成一张表
第一个sql语句 select companyname gsmc,zb zhibiao from t_gsndzb left join t_companycode on t_gsndzb.gsbh=t ...
【板栗糖GIS】arcmap—如何将多张影像合并成一张
目录 1. 加载数据 2. 使用工具箱 3. 设置参数 1. 加载数据 2. 使用工具箱 3.设置参数输入所有需要合并的栅格,并且设置波段数为3 还有路径等参数看情况选择,然后点击确定,等待处理完成 ...
jquery将html转为pdf文件,HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解
本篇教程介绍了HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.目的:在前段是 jQuery库或 ...
怎么将几张pdf合并成一张_怎么把多个PDF文件合并成一个
怎么把多个PDF文件合成为一个PDF文件?我相信这个问题是许多小伙伴在工作当中都会遇到的一个问题,其实想要将多个PDF文件合成为一个PDF文件还是非常简单的,只需要利用到迅捷PDF转换器,就可以轻松的 ...
python多图合并成一张图_将现有的图形合并成一个图形PYTHON的pdf格式
我找不到对我有用的解决办法.在我有一些已经存在的数字,我创建了早些时候,想把他们合并到一个pdf横向页面.图形文件是标准的matplotlib savefig的as.png.在那么,我怎样才能简单 ...
python多图合并成一张图_python使用PIL实现多张图片垂直合并
本文实例为大家分享了python实现多张图片垂直合并的具体代码,供大家参考,具体内容如下 # coding: utf-8 # image_merge.py # 图片垂直合并 # http://www. ...
怎么将几张pdf合并成一张_如何将多个pdf文件合并成一个pdf文件？
原标题:如何将多个pdf文件合并成一个pdf文件? 我很喜欢使用PDF文件格式,为什么呢?因为PDF具有许多其他电子文档格式无法相比的优点.PDF文件格式可以将文字.字型.格式.颜色及独立于设备和分辨 ...
sql 语句将两张表合并成一张表
比如表1结构为: A B C 1 2 3 表2结构为: D E F 4 5 6 我要得到的结果为: A B C ...

vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地

vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地相关推荐

最新文章

热门文章