104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<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>
|