108 lines
3.2 KiB
Vue
108 lines
3.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="h100">
|
|||
|
|
<view style="text-align: center;padding-bottom: 150px;">
|
|||
|
|
<image :src="image" v-if="image" style="width: 200px;height: 200px;border: 1px solid #ccc;"></image>
|
|||
|
|
<image :src="imgs" v-else style="width: 200px;height: 200px;border: 1px solid #ccc;"></image>
|
|||
|
|
<view class="but" style="margin: 0 25px;" @click="toPop">我要在上面签字</view>
|
|||
|
|
<jp-signature-popup ref="signature2" @change="setImg" popup />
|
|||
|
|
<canvas canvas-id="shareCanvas" class="canvas" bindlongpress="saveImg" catchtouchmove="true"
|
|||
|
|
style="position:fixed;left:500%"
|
|||
|
|
:style="{height: canvasHeight+'px',width:canvasWidth+'px'}">
|
|||
|
|
</canvas>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<!-- 有项目需要开发的请联系 扣 - 371524845 -->
|
|||
|
|
<!--
|
|||
|
|
注意：需要采用线上图片且需要配置白名单，未配置手机无法签名，采用真机调试2.0不配置白名单也可以签名，正式版本需要线上图片且需要配置白名单
|
|||
|
|
-->
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
canvasHeight: 400,
|
|||
|
|
canvasWidth: 400,
|
|||
|
|
width:80,
|
|||
|
|
height: 50,
|
|||
|
|
left: 20,
|
|||
|
|
top: 20,
|
|||
|
|
ctx:null,
|
|||
|
|
image: '',
|
|||
|
|
imgs: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGTfkSpSbg9cHUqcibBv38r8GXDIVy4W6FN7a1TMWf6RSNQLemKBwG8VqjlxUhicIzz3NTONVrD96ibg/0?wx_fmt=jpeg'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
//初始化画布
|
|||
|
|
this.ctx = wx.createCanvasContext('shareCanvas', this)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
setImg(val) {
|
|||
|
|
if (val) {
|
|||
|
|
this.exportPost(val).then(res => {
|
|||
|
|
this.image = res
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toPop() {
|
|||
|
|
this.$refs.signature2.toPop()
|
|||
|
|
},
|
|||
|
|
getImageInfo(src) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
wx.getImageInfo({
|
|||
|
|
src,
|
|||
|
|
success: (res) => resolve(res),
|
|||
|
|
fail: (res) => reject(res)
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
exportPost(image2){
|
|||
|
|
let that = this
|
|||
|
|
return new Promise(function (resolve, reject) {
|
|||
|
|
let image = that.imgs
|
|||
|
|
//获取系统的基本信息，为后期的画布和底图适配宽高
|
|||
|
|
uni.getSystemInfo({
|
|||
|
|
success: function (res) {
|
|||
|
|
Promise.all([that.getImageInfo(image),that.getImageInfo(image2)]).then(res=>{
|
|||
|
|
//获取底图和二维码图片的基本信息,通常前端导出的二维码是base64格式的，所以要转成图片格式的才可以获取图片的基本信息
|
|||
|
|
that.ctx.drawImage(res[0].path,0 , 0,that.canvasWidth,that.canvasHeight);
|
|||
|
|
that.ctx.drawImage(res[1].path,that.left,that.top,that.width, that.height);
|
|||
|
|
that.ctx.draw(false,function(){
|
|||
|
|
wx.canvasToTempFilePath({
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
width:that.canvasWidth,
|
|||
|
|
height:that.canvasHeight,
|
|||
|
|
destWidth:that.canvasWidth*2,//这里乘以2是为了保证合成图片的清晰度
|
|||
|
|
destHeight:that.canvasHeight*2,
|
|||
|
|
canvasId: 'shareCanvas',
|
|||
|
|
fileType:'jpg',//设置导出图片的后缀名
|
|||
|
|
success: function (res) {
|
|||
|
|
resolve(res.tempFilePath)
|
|||
|
|
},
|
|||
|
|
fail: function (res) {
|
|||
|
|
reject(res)
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.but {
|
|||
|
|
margin: 25px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #55aaff;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sssv {
|
|||
|
|
height: 1150px;
|
|||
|
|
}
|
|||
|
|
</style>
|