You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.4 KiB
103 lines
2.4 KiB
<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>
|
|
|