uniapp 微信小程序开发,需要实现点击弹出海报图片，实现分享功能。这里因为canvas画图不擅长，所以找了一个第三方插件，用来实现此功能，感谢开发者。
使用到插件
插件封装组件
<template>
<view class="sharebody">
<l-painter v-if="show" css="width: 750rpx; height: 1000rpx;" ref="painter">
<l-painter-image src="https://cdn.hifreeter.com/xiaochengxu/static/share/bg.png"
css="width: 750rpx; height: 1000rpx;object-fit:cover;" />
<l-painter-view css="height: 1000rpx; width: 750rpx;margin-top:-1000rpx;">
<l-painter-image src="https://cdn.hifreeter.com/xiaochengxu/static/share/logo2.png"
css="width: 239rpx; height: 88rpx;margin-left:255rpx;margin-top:100rpx;" />
<l-painter-view
css="width: 686rpx;background: #FFFFFF; padding-bottom:12rpx; border-radius: 20rpx;margin-left:32rpx;margin-top:200rpx;">
<l-painter-view
css="width: 200rpx;height: 200rpx;background: #FFFFFF;margin-top:-100rpx;border-radius: 50%;margin-left:243rpx;">
<l-painter-image :src="imgSrc"
css="width: 180rpx; height: 180rpx;margin-left:10rpx;margin-top:10rpx;border-radius: 50%;" />
<l-painter-image src="https://cdn.hifreeter.com/xiaochengxu/static/icon/yx.png"
css="width: 48rpx; height: 48rpx;margin-left:140rpx;margin-top:-40rpx;border-radius: 50%;" />
</l-painter-view>
<l-painter-text :text="data.nickName"
css="width:686rpx;text-align: center;font-size: 34rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #393737;" />
<l-painter-text :text="data.industryName"
css="width:686rpx;text-align: center;font-size: 28rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #7D7D7D;" />
<l-painter-view css="width: 500rpx;margin-left:100rpx;text-align: center;">
<l-painter-text v-for="(item,index) in data.list" :key="index" :text="item.name"
css="text-align: center;color:#fff;font-size: 28rpx;height: 44rpx;background: #2663E3;border-radius: 20rpx;padding:0 12rpx;margin:8rpx 6rpx;" />
</l-painter-view>
<l-painter-text :text="'作品 ('+data.caseSum+') ｜浏览量 ('+data.popularity+')'"
css="width:686rpx; text-align: center;font-size: 28rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #000000;" />
<l-painter-view
css="width:657rpx;height: 1rpx;background: rgba(0,0,0,0.1);margin-top:12rpx;margin-left:15rpx;">
</l-painter-view>
<l-painter-view css="margin-top: 30rpx">
<l-painter-image :src="img" css="width: 100rpx; height: 100rpx; margin-left:32rpx;" />
<l-painter-text text="长按小程序码 查看Ta的主页"
css="text-align: center; margin-left:32rpx; margin-top:29rpx;font-size: 24rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #7D7D7D" />
</l-painter-view>
</l-painter-view>
</l-painter-view>
</l-painter>
</view>
</template>
<script>
import {
userGetCoIn,
getUn
} from '@/config/api.js'
import configs from '@/config/config.js'
import {
pathToBase64,
base64ToPath
} from 'image-tools'
export default {
data() {
return {
data: {
nickName: '',
caseSum: '',
description: '',
pic: ''
},
path: '',
page: 'packages/pages/my/page/index',
img: '',
show: false
}
},
computed: {
imgSrc() {
var imgSrc = ""
var str = new RegExp("http");
if (str.test(this.data.pic)) {
imgSrc = this.data.pic
} else {
imgSrc = configs.uploadImg + this.data.pic
}
console.log(imgSrc)
return imgSrc
}
},
props: {
userId: {
type: Number | String,
default () {
return 0;
}
}
},
watch: {
userId() {
if (this.userId) {
this.getInfo()
}
},
},
mounted() {
if (this.userId) {
this.getInfo()
}
},
methods: {
getUn() {
var that = this;
getUn({
page: this.page,
width: 200,
scene: this.userId
}).then(res => {
if (res.code == 200) {
that.img = 'data:image/png;base64,' + res.data.img
console.log(that.img)
that.show = true
}
}).catch(err => {
})
},
getshare() {
uni.showLoading({
title: '加载中'
})
setTimeout(() => {
uni.hideLoading()
this.$refs.painter.canvasToTempFilePath({
// 在nvue里是jpeg
fileType: "jpg",
quality: 1,
success: (res) => {
console.log(res);
console.log(res.tempFilePath);
uni.previewImage({
current: 0,
urls: [res.tempFilePath],
indicator: 'number',
loop: true
});
},
});
}, 2000)
},
getInfo() {
var that = this;
userGetCoIn({
id: this.userId
}).then(res => {
if (res.code == 200) {
that.data = res.data
that.getUn()
}
}).catch(err => {
})
},
getshow() {
this.show = true
},
close() {
this.show = false
},
open() {
}
}
}
</script>
<style scoped lang="scss">
.sharebody {
// position: fixed;
// z-index: -10;
position: fixed;
right: 200%;
}
.images {
width: 100px;
height: 100px;
}
</style>
使用组件
<share ref="share" :userId="data.id"></share>
goshare() {
this.$refs.share.getshare()
},
