海报：移除 qs-canvas 库，采用社区活跃的 lime-painter 来实现海报生成
This commit is contained in:
puhui999
@@ -2,56 +2,17 @@
|
||||
<template>
|
||||
<su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
|
||||
<view class="ss-flex-col ss-col-center ss-row-center">
|
||||
<view
|
||||
v-if="poster.src === ''"
|
||||
class="poster-title ss-flex ss-row-center"
|
||||
:style="{
|
||||
height: poster.height + 'px',
|
||||
width: poster.width + 'px',
|
||||
}"
|
||||
>
|
||||
海报加载中...
|
||||
</view>
|
||||
<image
|
||||
v-else
|
||||
class="poster-img"
|
||||
:src="poster.src"
|
||||
:style="{
|
||||
height: poster.height + 'px',
|
||||
width: poster.width + 'px',
|
||||
}"
|
||||
:show-menu-by-longpress="true"
|
||||
/>
|
||||
<canvas
|
||||
class="hideCanvas"
|
||||
:canvas-id="poster.canvasId"
|
||||
:id="poster.canvasId"
|
||||
:style="{
|
||||
height: poster.height + 'px',
|
||||
width: poster.width + 'px',
|
||||
}"
|
||||
/>
|
||||
<view
|
||||
class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
|
||||
v-if="poster.src !== ''"
|
||||
>
|
||||
<button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
|
||||
<button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
|
||||
{{
|
||||
['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
|
||||
? '长按图片保存'
|
||||
: '保存图片'
|
||||
}}
|
||||
</button>
|
||||
</view>
|
||||
<template v-if="poster.views.length > 0">
|
||||
<l-painter :board="poster" />
|
||||
</template>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, getCurrentInstance } from 'vue';
|
||||
import { getCurrentInstance, reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import useCanvas from './useCanvas';
|
||||
import { getPosterData } from '@/sheep/components/s-share-modal/canvas-poster/poster';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
@@ -60,17 +21,22 @@
|
||||
},
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
default() {
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const poster = reactive({
|
||||
canvasId: 'canvasId',
|
||||
width: sheep.$platform.device.windowWidth * 0.9,
|
||||
height: 600,
|
||||
src: '',
|
||||
css: {
|
||||
// 根节点若无尺寸，自动获取父级节点
|
||||
width: sheep.$platform.device.windowWidth * 0.9,
|
||||
height: 600,
|
||||
},
|
||||
views: [],
|
||||
});
|
||||
|
||||
|
||||
const emits = defineEmits(['success', 'close']);
|
||||
const vm = getCurrentInstance();
|
||||
|
||||
@@ -100,14 +66,11 @@
|
||||
|
||||
// 使用 canvas 生成海报
|
||||
async function getPoster(params) {
|
||||
poster.src = '';
|
||||
poster.shareInfo = props.shareInfo;
|
||||
// #ifdef APP-PLUS
|
||||
poster.canvasId = 'canvasId-' + new Date().getTime();
|
||||
// #endif
|
||||
const canvas = await useCanvas(poster, vm);
|
||||
console.log('canvas',canvas);
|
||||
return canvas;
|
||||
let drawer = await getPosterData({
|
||||
width: sheep.$platform.device.windowWidth * 0.9,
|
||||
shareInfo: props.shareInfo,
|
||||
});
|
||||
poster.views = drawer;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
@@ -119,9 +82,11 @@
|
||||
.popup-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.poster-title {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 分享海报
|
||||
.poster-btn-box {
|
||||
width: 600rpx;
|
||||
@@ -129,6 +94,7 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -80rpx;
|
||||
|
||||
.cancel-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
@@ -139,6 +105,7 @@
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
@@ -152,6 +119,7 @@
|
||||
.poster-img {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.hideCanvas {
|
||||
position: fixed;
|
||||
top: -99999rpx;
|
||||
|
||||
@@ -1,122 +1,127 @@
|
||||
import sheep from '@/sheep';
|
||||
import third from '@/sheep/api/migration/third';
|
||||
import { formatImageUrlProtocol, getBase64Src } from './index';
|
||||
import { formatImageUrlProtocol } from './index';
|
||||
|
||||
const goods = async (poster) => {
|
||||
const width = poster.width;
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
const wxa_qrcode = (await third.wechat.getWxacode(poster.shareInfo.path, poster.shareInfo.query)).data;
|
||||
return {
|
||||
background: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
|
||||
list: [
|
||||
{
|
||||
name: 'nickname',
|
||||
type: 'text',
|
||||
val: userInfo.nickname,
|
||||
x: width * 0.22,
|
||||
y: width * 0.06,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#333',
|
||||
font: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'sans-serif',
|
||||
},
|
||||
},
|
||||
return [
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
|
||||
css: {
|
||||
width,
|
||||
background: 'white',
|
||||
position: 'fixed',
|
||||
'object-fit': 'contain',
|
||||
top: '0',
|
||||
left: '0',
|
||||
zIndex: -1,
|
||||
},
|
||||
{
|
||||
name: 'avatar',
|
||||
type: 'image',
|
||||
val: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
x: width * 0.04,
|
||||
y: width * 0.04,
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: userInfo.nickname,
|
||||
css: {
|
||||
color: '#333',
|
||||
fontSize: 16,
|
||||
fontFamily: 'sans-serif',
|
||||
position: 'fixed',
|
||||
top: width * 0.06,
|
||||
left: width * 0.22,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.04,
|
||||
top: width * 0.04,
|
||||
width: width * 0.14,
|
||||
height: width * 0.14,
|
||||
d: width * 0.14,
|
||||
},
|
||||
{
|
||||
name: 'goodsImage',
|
||||
type: 'image',
|
||||
val: formatImageUrlProtocol(poster.shareInfo.poster.image),
|
||||
x: width * 0.03,
|
||||
y: width * 0.21,
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(poster.shareInfo.poster.image),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.03,
|
||||
top: width * 0.21,
|
||||
width: width * 0.94,
|
||||
height: width * 0.94,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
name: 'goodsTitle',
|
||||
type: 'text',
|
||||
val: poster.shareInfo.poster.title,
|
||||
x: width * 0.04,
|
||||
y: width * 1.18,
|
||||
maxWidth: width * 0.91,
|
||||
line: 2,
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: poster.shareInfo.poster.title,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.04,
|
||||
top: width * 1.18,
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
lineHeight: 5,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#333',
|
||||
font: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
maxWidth: width * 0.91,
|
||||
},
|
||||
{
|
||||
name: 'goodsPrice',
|
||||
type: 'text',
|
||||
val: '￥' + poster.shareInfo.poster.price,
|
||||
x: width * 0.04,
|
||||
y: width * 1.3,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#ff0000',
|
||||
font: {
|
||||
fontSize: 20,
|
||||
fontFamily: 'OPPOSANS',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: '￥' + poster.shareInfo.poster.price,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.04,
|
||||
top: width * 1.3,
|
||||
fontSize: 20,
|
||||
fontFamily: 'OPPOSANS',
|
||||
color: '#333',
|
||||
},
|
||||
{
|
||||
name: 'goodsOriginalPrice',
|
||||
type: 'text',
|
||||
val:
|
||||
poster.shareInfo.poster.original_price > 0
|
||||
? '￥' + poster.shareInfo.poster.original_price
|
||||
: '',
|
||||
x: width * 0.3,
|
||||
y: width * 1.32,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#999',
|
||||
font: {
|
||||
fontSize: 10,
|
||||
fontFamily: 'OPPOSANS',
|
||||
},
|
||||
},
|
||||
textDecoration: {
|
||||
line: 'line-through',
|
||||
style: 'solide',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text:
|
||||
poster.shareInfo.poster.original_price > 0
|
||||
? '￥' + poster.shareInfo.poster.original_price
|
||||
: '',
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.3,
|
||||
top: width * 1.32,
|
||||
color: '#999',
|
||||
fontSize: 10,
|
||||
fontFamily: 'OPPOSANS',
|
||||
textDecoration: 'line-through',
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
name: 'qrcode',
|
||||
type: 'qrcode',
|
||||
val: poster.shareInfo.link,
|
||||
x: width * 0.75,
|
||||
y: width * 1.3,
|
||||
size: width * 0.2,
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
name: 'wxacode',
|
||||
type: 'image',
|
||||
val: wxa_qrcode,
|
||||
x: width * 0.75,
|
||||
y: width * 1.3,
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
type: 'qrcode',
|
||||
text: poster.shareInfo.link,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.75,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
// #endif
|
||||
],
|
||||
};
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
type: 'image',
|
||||
src: wxa_qrcode,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.75,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
];
|
||||
};
|
||||
|
||||
export default goods;
|
||||
|
||||
Reference in New Issue
Block a user