移动端V1.0

2025-07-16 15:34:34 +08:00
commit 194b0750fd
1083 changed files with 178295 additions and 0 deletions
--- a/uni_modules/jp-signature/components/jp-merge/jp-merge.vue
+++ b/uni_modules/jp-signature/components/jp-merge/jp-merge.vue
@@ -0,0 +1,103 @@
+<template>
+	<view class="share">
+		<canvas
+		    canvas-id="shareCanvas"
+		    class="canvas"
+		    bindlongpress="saveImg"
+		    catchtouchmove="true"
+			style="position:fixed;left:500%"
+			:style="{height: canvasHeight+'px',width:canvasWidth+'px'}"
+		   >
+		</canvas>
+	</view>
+</template>
+<!-- 有项目需要开发的请联系 扣 - 371524845 -->
+<script>
+export default {
+	props: {
+		canvasHeight: {
+			type: Number,
+			default: 400,
+		},
+		canvasWidth: {
+			type: Number,
+			default: 400,
+		},
+		width: {
+			type: Number,
+			default: 80,
+		},
+		height: {
+			type: Number,
+			default: 50,
+		},
+		left: {
+			type: Number,
+			default: 300,
+		},
+		top: {
+			type: Number,
+			default: 320,
+		},
+		bgImage: {
+			type: String,
+			default: '',
+		},
+	},
+	data(){
+		return {
+			ctx:null
+		}
+	},
+	created() {
+	//初始化画布
+	  this.ctx = wx.createCanvasContext('shareCanvas',this)
+    },
+	methods:{
+		//获取图片的基本信息，即将网络图片转成本地图片，
+		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.bgImage
+			//获取系统的基本信息，为后期的画布和底图适配宽高
+			 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>