1.首先先画签名的cavans
<template>
<div class="signature">
<!--touchstart,touchmove,touchend,touchcancel 这-->
<div class="signature__header">
<van-nav-bar
title="电子签名"
@click-left="onClickLeft"
>
<div slot="left">
<van-icon name="arrow-left" size="25px" color="#b6b6b6" />
</div>
</van-nav-bar>
</div>
<div class="signature__zang"></div>
<div>
<div>
<canvas id="canvas" :height="tabListHeight">Canvas画板</canvas>
</div>
<div class="signature__button">
<van-button type="primary"
size="small"
v-on:click="save">保存, 下一步</van-button>
<van-button type="default"
size="small"
v-on:click="clear">清除</van-button>
</div>
</div>
</div>
</template>
<script>
var draw
var preHandler = function (e) {
e.preventDefault()
}
class Draw {
constructor (el) {
this.el = el
this.canvas = document.getElementById(this.el)
this.canvas.width = document.documentElement.clientWidth
this.cxt = this.canvas.getContext('2d')
this.stage_info = this.canvas.getBoundingClientRect()
this.path = {
beginX: 0,
beginY: 0,
endX: 0,
endY: 0
}
}
init (btn) {
var that = this
this.canvas.addEventListener('touchstart', function (event) {
document.addEventListener('touchstart', preHandler, { passive: false })
that.drawBegin(event)
})
this.canvas.addEventListener('touchend', function (event) {
document.addEventListener('touchend', preHandler, { passive: false })
that.drawEnd()
})
this.clear(btn)
}
drawBegin (e) {
var that = this
window.getSelection()
? window.getSelection().removeAllRanges()
: document.selection.empty()
this.cxt.strokeStyle = '#000'
this.cxt.beginPath()
this.cxt.moveTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
this.canvas.addEventListener('touchmove', function () {
that.drawing(event)
})
}
drawing (e) {
this.cxt.lineTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
this.cxt.stroke()
}
drawEnd () {
document.removeEventListener('touchstart', preHandler, { passive: false })
document.removeEventListener('touchend', preHandler, { passive: false })
document.removeEventListener('touchmove', preHandler, { passive: false })
// canvas.ontouchmove = canvas.ontouchend = null
}
clear (btn) {
this.cxt.clearRect(0, 0, this.canvas.width, 600)
}
save () {
return this.canvas.toDataURL('image/png')
}
}
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
val: true,
screenWidth: 0,
screenHeight: 0
}
},
mounted () {
draw = new Draw('canvas')
draw.init()
this.screenWidth = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth
this.screenHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight
},
computed: {
tabListHeight () {
return this.screenHeight - 100
}
},
methods: {
onClickLeft () {
this.$router.go(-1)
},
clear: function () {
draw.clear()
},
save: function () {
var data = draw.save()
this.$router.push({ name: 'newidentity' })
sessionStorage.setItem('imgs', data)
console.log(111)
console.log(data)
},
mutate (word) {
this.$emit('input', word)
}
}
// data () {
// return {
// msg: 'Just use canvas to draw',
// degree: 0, // 屏幕整体旋转的角度, 可取 -90,90,180等值
// scope: [
// {
// value: 0,
// title: '正常',
// },
// {
// value: 90,
// title: '顺时针旋转90°',
// },
// {
// value: 180,
// title: '顺时针旋转180°',
// },
// {
// value: -90,
// title: '逆时针旋转90°',
// },
// ],
// };
// },
// components: {
// Draw,
// },
// mounted () {
// this.canvasBox = document.getElementById('canvasBox');
// this.initCanvas();
// },
// computed: {
// getHorizontalStyle () {
// console.log(232323)
// const d = document;
// const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
// const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
// let length = (h - w) / 2;
// let width = w;
// let height = h;
// switch (this.degree) {
// case -90:
// length = -length;
// case 90:
// width = h;
// height = w;
// break;
// default:
// length = 0;
// }
// if (this.canvasBox) {
// this.canvasBox.removeChild(document.querySelector('canvas'));
// this.canvasBox.appendChild(document.createElement('canvas'));
// setTimeout(() => {
// this.initCanvas();
// }, 200);
// }
// return {
// transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,
// `${width}px`,
// height: `${height}px`,
// transformOrigin: 'center center',
// };
// },
// },
// methods: {
// initCanvas () {
// const canvas = document.querySelector('canvas');
// this.draw = new Draw(canvas, -this.degree);
// },
// clear () {
// this.draw.clear();
// },
// download () {
// this.draw.downloadPNGImage(this.draw.getPNGImage());
// },
// upload () {
// const image = this.draw.getPNGImage();
// const blob = this.draw.dataURLtoBlob(image);
// const url = '';
// const successCallback = (response) => {
// console.log(response);
// };
// const failureCallback = (error) => {
// return this.$toast(res.data.statusText);
// };
// this.draw.upload(blob, url, successCallback, failureCallback);
// },
// },
}
</script>
<style lang="less" scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
#canvasBox {
display: flex;
flex-direction: column;
height: 100%;
}
canvas {
flex: 1;
cursor: crosshair;
background-color: #f2f2f2;
}
.signature {
height: 100%;
100%;
background-color: #ffffff;
position: relative;
.signature__header {
100%;
height: 46px;
position: fixed;
top: 0;
left: 0;
}
.signature__zang {
100%;
height: 46px;
}
.signature__button {
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
}
#keyword-box {
margin: 10px 0;
}
</style>
2.合成
<template>
<div id="identity" class="identity">
<div class="identity__header">
<van-nav-bar
title="签订合同"
@click-left="onClickLeft"
>
<div slot="left">
<van-icon name="arrow-left" size="25px" color="#b6b6b6" />
</div>
</van-nav-bar>
</div>
<div class="identity__zang"></div>
<div class="identity__content" :style="{ height: tabListHeight }">
<div class="identity__content-item">
<div class="identity-bnt van-hairline--top">
<!-- <div class="upphoto"> 上传交款凭证</div> -->
<!-- 上传图片 -->
<!-- <div class="pushphoto">
<img class="pushphoto-add"
v-for="(item,index) of photo"
:key="index"
:src="item"
@click="showimg(item)">
<van-uploader class="pushphoto-add"
:after-read="onRead"
v-if="falses">
<img class="pushphoto-add"
src="../../assets/img/addphoto.png">
</van-uploader>
</div> -->
<!-- <div class="upphoto"> 上传身份证</div>
<div class="pushphoto">
<img class="pushphoto-add"
v-for="(item,index) of photo1"
:key="index"
:src="item"
@click="showimg1(item)">
<van-uploader class="pushphoto-add"
:after-read="onRead1"
v-if="falses1">
<img class="pushphoto-add"
src="../../assets/img/addphoto.png">
</van-uploader>
</div> -->
<div class="info-conter"
ref="infoconter">
//这里是你的合同
<img src="../../assets/img/hetong.png"
id="imgCover"
ref="imgCover">
//这里是你的签名
<img v-show="zou"
:src="ba64"
id="imgUploadX">
<canvas v-show="yincang"
id="can"></canvas>
</div>
<!-- <van-button type="primary" @click="pull">签订合同</van-button> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted () {
this.$nextTick(() => {
this.ba64 = sessionStorage.getItem('imgs');
//this.pull();
this.$toast.loading({
mask: true,
message: '合同签名中,请等待...'
});
//渲染需要一个过程，需要用到定时器，不然手机合成的签名合同是一片黑
setTimeout(()=>{
// console.log(Timer);
this.pull();
},4000);
this.screenWidth = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth
this.screenHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight
})
},
computed: {
tabListHeight () {
return this.screenHeight / (this.screenWidth / 10) - 2 - 1.226667 + 'rem'
}
},
data () {
return {
ba64: '',
zou: false,
yincang: false,
enen: false,
frist: '',
second: '',
files: '',
three: '',
dataurls: '',
threeimg: '',
secondimg: '',
fristimg: '',
text1: true,
text2: true,
text3: true,
imgs1: false,
imgs2: false,
imgs3: false,
screenWidth: 0,
screenHeight: 0,
falses: true,
falses1:true,
photo: [],
photo1: [],
photolist: [],
photolist1: [],
}
},
methods: {
// onRead (i) {
// this.photo.push(i.content);
// //console.log(this.photo);
// this.photolist.push(i.file)
// if (this.photo.length >= 3) {
// this.falses = false
// }
// console.log(this.photo)
// },
// onRead1 (i) {
// this.photo1.push(i.content)
// this.photolist1.push(i.file)
// if (this.photo1.length >= 3) {
// this.falses1 = false
// }
// console.log(this.photo1)
// },
// showimg (item) {
// this.show = true
// this.file = item
// },
// showimg1 (item) {
// this.show = true
// this.file1 = item
// },
// 合成图片
pull () {
console.log(this.photolist);
//console.log(this.photolist1);
this.compound();
// setTimeout(()=>{
this.$router.push({ path: '/newesignature' })
// },5000);
},
//这里是签名与合同的渲染合成
compound () {
this.yincang = true
let eleImgUploadX = document.getElementById('imgUploadX')
let eleImgCover = document.getElementById('imgCover')
let can = document.getElementById('can')
let context = can.getContext('2d')
let width = this.$refs.infoconter.offsetWidth
let heigth = this.$refs.infoconter.offsetHeight
let heigths = this.$refs.imgCover.offsetHeight
let hei = this.$refs.imgCover.offsetHeight
can.width = width
can.height = heigths
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1,
ratio = devicePixelRatio / backingStoreRatio
var oldWidth = can.width;
var oldHeight = can.height;
can.width = oldWidth * ratio
can.height = oldHeight * ratio
can.style.width = oldWidth + 'px'
can.style.height = oldHeight + 'px'
context.scale(ratio, ratio)
console.log(width)
context.drawImage(eleImgCover, 0, 0, width, heigth)
context.drawImage(eleImgUploadX, width * 0.65, hei * 0.8, 95, 80)
console.log(can.toDataURL('image/png'))
let dataurls = can.toDataURL('image/jpeg')
this.dataurls = can.toDataURL('image/jpeg')
this.enen = true
// 转文件flie
let filename = 'canvas.jpg'
let feli = dataURLtoFile(dataurls, filename)
function dataURLtoFile (dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime })
}
this.files = feli
console.log(this.files)
sessionStorage.setItem('files', this.dataurls)
},
onClickLeft () {
this.$router.push({ name: 'openvip' })
}
}
}
</script>
<style lang="less" scoped>
.identity {
100%;
// height: 100%;
overflow: hidden;
position: relative;
img {
100%;
height: 100%;
}
.identity__header {
100%;
height: 46px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.identity__zang {
100%;
height: 46px;
}
.info-conter {
100%;
// height: 100%;
// background-color: white;
// overflow: hidden;
overflow-x: auto;
overflow-y: auto;
position: absolute;
right: 0;
// bottom: -100%;
}
#imgCover {
opacity: 0;
}
.info-conter img {
100%;
}
.identity__content{
100%;
background-color: #ffffff;
overflow: scroll;
-webkit-overflow-scrolling: touch;
.identity__content-item {
// height: 100%;
100%;
.identity-frist {
100%;
height: 180px;
background-color: #f2f2f2;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
line-height: 180px;
font-size: 18px;
.van-uploader {
100%;
height: 100%;
}
}
}
}
.pushphoto {
100%;
height: 100px;
padding-left: 16px;
padding-bottom: 16px;
// margin-bottom: 20px;
box-sizing: border-box;
display: flex;
.pushphoto-add {
25%;
height: 100%;
margin-right: 10px;
img {
100%;
}
}
}
.identity-bottom {
100%;
height: 118px;
}
.identity-bnt {
100%;
// position: fixed;
// bottom: 0px;
// z-index: 99999;
padding: 20px 20px;
background-color: #ffffff;
box-sizing: border-box;
// height: 118px;
.identity-reset {
margin-bottom: 10px;
}
.van-button {
100%;
}
}
}
</style>
效果：
