移动端V1.0
This commit is contained in:
70
uni_modules/jp-signature/实例/index.vue
Normal file
70
uni_modules/jp-signature/实例/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="h100">
|
||||
<!-- #ifdef VUE2 -->
|
||||
<jp-signature-popup v-model="image" required />
|
||||
<view>{{image}}</view>
|
||||
<view class="but" @click="toPop1">自定义样式，弹框调用</view>
|
||||
<jp-signature-popup ref="signature1" popup v-model="image2" />
|
||||
<image :src="image2" style="width: 200px;" mode="widthFix"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<jp-signature-popup v-model:value="image" required />
|
||||
<view>{{image}}</view>
|
||||
<view class="but" @click="toPop1">自定义样式，弹框调用</view>
|
||||
<jp-signature-popup ref="signature1" popup v-model:value="image2" />
|
||||
<image :src="image2" style="width: 200px;" mode="widthFix"></image>
|
||||
<!-- #endif -->
|
||||
{{image2}}
|
||||
|
||||
|
||||
<view>下面是使用 jp-signature-popup 结合 jp-merge 在文档上签字</view>
|
||||
<view style="text-align: center;padding-bottom: 150px;">
|
||||
<image :src="image4" v-if="image4" style="width: 350px;height: 350px;border: 1px solid #ccc;"></image>
|
||||
<image src="../../static/sqs.jpg" v-else style="width: 350px;height: 350px;border: 1px solid #ccc;"></image>
|
||||
<view class="but" style="margin: 0 25px;" @click="toPop2">我要在上面签字</view>
|
||||
<jp-signature-popup ref="signature2" @change="setImg" popup v-model:value="image3" />
|
||||
<jp-merge bgImage="../../static/sqs.jpg" ref="jpMerge"></jp-merge>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 有项目需要开发的请联系 扣 - 371524845 -->
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
image:'',
|
||||
image2:'',
|
||||
image3:'',
|
||||
image4:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setImg(val){
|
||||
if(val){
|
||||
this.$refs.jpMerge.exportPost(val).then(res => {
|
||||
this.image4 = res
|
||||
})
|
||||
}
|
||||
},
|
||||
toPop1(){
|
||||
this.$refs.signature1.toPop()
|
||||
},
|
||||
toPop2(){
|
||||
this.$refs.signature2.toPop()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.but{
|
||||
margin: 25px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background-color: #55aaff;
|
||||
color: #fff;
|
||||
}
|
||||
.sssv{
|
||||
height: 1150px;
|
||||
}
|
||||
</style>
|
||||
108
uni_modules/jp-signature/实例/微信小程序签名到指定位置.vue
Normal file
108
uni_modules/jp-signature/实例/微信小程序签名到指定位置.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user