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>
|