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.
349 lines
9.6 KiB
349 lines
9.6 KiB
<template>
|
|
<view>
|
|
<view class="wanl-poster" @tap="close">
|
|
<canvas v-if="!tempFilePath" :canvas-id="canvasID" class="wanl-poster__canvas"
|
|
:style="{ width: canvasW + 'px', height: canvasH + 'px', top: '-' + canvasH + 'px'}" />
|
|
<view v-else class="wanl-poster__main">
|
|
<view @tap.stop="">
|
|
<image lazy-load class="image" :src="tempFilePath" mode="widthFix" @longpress="toSave(tempFilePath)"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var that;
|
|
import {mapState} from 'vuex';
|
|
export default {
|
|
name: 'wanl-poster',
|
|
props: {
|
|
canvasID: {
|
|
Type: String,
|
|
default: 'PosterCanvas'
|
|
},
|
|
img: {
|
|
Type: String,
|
|
default: ''
|
|
},
|
|
price: {
|
|
Type: String,
|
|
default: ''
|
|
},
|
|
marketPrice: {
|
|
Type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
Type: String,
|
|
default: 'WANLSHOP'
|
|
},
|
|
page: {
|
|
Type: String,
|
|
default: ''
|
|
},
|
|
scene: {
|
|
type: Object,
|
|
default () {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
config: {},
|
|
loading: false,
|
|
lineType: true,
|
|
mpQrcodeUrl: '',
|
|
tempFilePath: '',
|
|
canvasW: 0,
|
|
canvasH: 0,
|
|
ctx: null
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['user', 'common'])
|
|
},
|
|
created() {
|
|
uni.showLoading({
|
|
title: '海报生成中...'
|
|
});
|
|
that = this;
|
|
that.OnCanvas();
|
|
},
|
|
methods: {
|
|
async OnCanvas() {
|
|
that.loading = true;
|
|
that.ctx = uni.createCanvasContext(that.canvasID, this);
|
|
const canvasWidth = uni.upx2px(that.common.appConfig.poster_width),
|
|
//canvas Paddng 间距
|
|
margin = uni.upx2px(25),
|
|
//二维码或太阳码宽高
|
|
qrcodeWidth = uni.upx2px(150);
|
|
//文本宽度
|
|
let _strlineW = 0;
|
|
//网络主图
|
|
let _imgInfo = await that.getImageInfo({
|
|
img: that.img ? that.$wanlshop.oss(that.img, 400, 0) : that.$wanlshop.oss(that.common.appConfig.poster_image, 400, 0)
|
|
});
|
|
|
|
let r = [_imgInfo.width, _imgInfo.height];
|
|
let imgW = canvasWidth - margin * 2;
|
|
if (r[0] != imgW) {
|
|
r[1] = Math.floor((imgW / r[0]) * r[1]);
|
|
r[0] = imgW;
|
|
}
|
|
that.canvasW = canvasWidth;
|
|
|
|
// 是否存在价格行
|
|
// #ifdef MP
|
|
if (that.price != '') {
|
|
that.canvasH = r[1] + qrcodeWidth + 120;
|
|
} else {
|
|
that.canvasH = r[1] + qrcodeWidth + 85;
|
|
}
|
|
// #endif
|
|
// #ifndef MP
|
|
if (that.price != '') {
|
|
that.canvasH = r[1] + qrcodeWidth + 114;
|
|
} else {
|
|
that.canvasH = r[1] + qrcodeWidth + 80;
|
|
}
|
|
// #endif
|
|
|
|
|
|
//canvas背景颜色
|
|
that.ctx.setFillStyle(that.common.appConfig.poster_background);
|
|
//canvas画布大小
|
|
that.ctx.fillRect(0, 0, that.canvasW, that.canvasH);
|
|
|
|
|
|
//添加图片展示
|
|
that.ctx.drawImage(_imgInfo.path, margin, margin, r[0], r[1]);
|
|
//添加图片展示 end
|
|
|
|
|
|
//设置文本
|
|
that.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
|
|
that.ctx.setFillStyle(that.common.appConfig.poster_title_color); //设置标题文本颜色
|
|
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
|
let _strHeight = r[1] + margin * 2 + 15; //绘制字体距离canvas顶部的初始高度
|
|
let _num = 1;
|
|
let title = that.title ? that.title : that.common.appConfig.poster_title;
|
|
for (let i = 0; i < title.length; i++) {
|
|
_strlineW += that.ctx.measureText(title[i]).width;
|
|
if (_strlineW > r[0]) {
|
|
if (_num == 2 && that.lineType) {
|
|
//文字换行数量大于二进行省略号处理
|
|
that.ctx.fillText(title.substring(_strLastIndex, i - 2) + '...', margin, _strHeight);
|
|
_strlineW = 0;
|
|
_strLastIndex = i;
|
|
_num++;
|
|
break;
|
|
} else {
|
|
that.ctx.fillText(title.substring(_strLastIndex, i), margin, _strHeight);
|
|
_strlineW = 0;
|
|
_strHeight += 20;
|
|
_strLastIndex = i;
|
|
_num++;
|
|
}
|
|
} else if (i == title.length - 1) {
|
|
that.ctx.fillText(title.substring(_strLastIndex, i + 1), margin, _strHeight);
|
|
_strlineW = 0;
|
|
}
|
|
}
|
|
//设置文本 end
|
|
|
|
|
|
//设置价格
|
|
if (that.price != '') {
|
|
_strlineW = margin;
|
|
|
|
_strHeight += uni.upx2px(60);
|
|
|
|
if (_num == 1) {
|
|
_strHeight += 20; //单行标题时占位符
|
|
}
|
|
if (that.price != '') {
|
|
//判断是否有销售价格
|
|
that.ctx.setFillStyle(that.common.appConfig.poster_price_color);
|
|
that.ctx.setFontSize(uni.upx2px(38));
|
|
that.ctx.fillText('￥' + that.price, _strlineW, _strHeight); //商品价格
|
|
_strlineW += that.ctx.measureText('￥' + that.price).width + uni.upx2px(10);
|
|
}
|
|
//商品原价
|
|
that.ctx.setFillStyle(that.common.appConfig.poster_original_color);
|
|
that.ctx.setFontSize(uni.upx2px(24));
|
|
that.ctx.fillText(that.marketPrice, _strlineW, _strHeight);
|
|
// 删除线
|
|
that.ctx.strokeStyle = that.common.appConfig.poster_original_color;
|
|
that.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
|
|
that.ctx.lineTo(_strlineW + that.ctx.measureText(that.marketPrice).width, _strHeight - uni.upx2px(10)); //终点
|
|
that.ctx.stroke();
|
|
}
|
|
//设置价格 end
|
|
|
|
|
|
|
|
//添加二维码 drawImage(图片, 左边距, 上边距, 宽度, 高度);
|
|
let _qrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/qrcode?width=${qrcodeWidth}&page=${encodeURIComponent(that.page + '?' + that.$wanlshop.parseParams(JSON.parse(JSON.stringify(that.scene).replace('"i"','"id"'))))}`});
|
|
_strHeight += uni.upx2px(20);
|
|
// #ifdef APP || H5 || MP-WEIXIN
|
|
// 微信二维码
|
|
// 展示全部二维码
|
|
if (that.common.appConfig.poster_qrcode == '0') {
|
|
that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
|
|
let _mpQrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(JSON.stringify({
|
|
page:that.page,
|
|
scene: that.scene,
|
|
width: qrcodeWidth,
|
|
env: that.common.appConfig.poster_env
|
|
}))}`});
|
|
that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth - qrcodeWidth, _strHeight, qrcodeWidth,qrcodeWidth);
|
|
// 展示小程序码
|
|
} else if (that.common.appConfig.poster_qrcode == '1') {
|
|
let _mpQrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(JSON.stringify({
|
|
page:that.page,
|
|
scene: that.scene,
|
|
width: qrcodeWidth,
|
|
env: that.common.appConfig.poster_env
|
|
}))}`});
|
|
that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
|
|
// 展示普通二维码
|
|
} else if (that.common.appConfig.poster_qrcode == '2') {
|
|
// 生成二维码
|
|
that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
|
|
}else{
|
|
let _mpQrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(JSON.stringify({
|
|
page:that.page,
|
|
scene: that.scene,
|
|
width: qrcodeWidth,
|
|
env: that.common.appConfig.poster_env
|
|
}))}`});
|
|
that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
|
|
}
|
|
// #endif
|
|
|
|
// #ifndef APP || H5 || MP-WEIXIN
|
|
// 生成二维码
|
|
that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
|
|
// #endif
|
|
//添加二维码 end
|
|
|
|
|
|
|
|
//添加推荐人与描述
|
|
let username = that.user.isLogin ? '@' + that.user.nickname : that.common.appConfig.poster_user;
|
|
that.ctx.setFillStyle(that.common.appConfig.poster_title_color);
|
|
that.ctx.setFontSize(uni.upx2px(30));
|
|
that.ctx.fillText(username, margin, _strHeight + qrcodeWidth / 2);
|
|
that.ctx.setFillStyle(that.common.appConfig.poster_original_color);
|
|
that.ctx.setFontSize(uni.upx2px(24));
|
|
that.ctx.fillText(that.common.appConfig.poster_viewDetails, margin, _strHeight + qrcodeWidth / 2 + 20);
|
|
//添加推荐人与描述 end
|
|
|
|
|
|
//延迟后渲染至canvas上
|
|
setTimeout(function() {
|
|
that.ctx.draw(true, ret => {
|
|
uni.hideLoading();
|
|
that.getNewImage();
|
|
});
|
|
}, 500);
|
|
},
|
|
async getImageInfo({
|
|
img
|
|
}) {
|
|
return new Promise((resolve, errs) => {
|
|
uni.getImageInfo({
|
|
src: img,
|
|
success: function(image) {
|
|
resolve(image);
|
|
},
|
|
fail(err) {
|
|
errs(err);
|
|
uni.showToast({
|
|
title: '海报生成失败',
|
|
mask: false,
|
|
duration: 2000,
|
|
icon: "none"
|
|
});
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
});
|
|
},
|
|
getNewImage() {
|
|
uni.canvasToTempFilePath({
|
|
canvasId: that.canvasID,
|
|
quality: 1,
|
|
complete: res => {
|
|
that.tempFilePath = res.tempFilePath;
|
|
that.loading = false;
|
|
that.$emit('success', res);
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
this
|
|
);
|
|
},
|
|
close() {
|
|
this.$emit('close');
|
|
},
|
|
// 手动保存
|
|
toSave(url) {
|
|
//#ifndef H5
|
|
uni.getImageInfo({
|
|
src: url,
|
|
success: function(image) {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: image.path,
|
|
success: function() {
|
|
uni.showToast({
|
|
title: '海报已保存相册',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
//#endif
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wanl-poster {
|
|
&__canvas {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&__main {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
width: 75%;
|
|
padding-bottom: 60rpx;
|
|
|
|
.image {
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
will-change: transform;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 6rpx;
|
|
right: 4rpx;
|
|
|
|
.wlIcon {
|
|
font-size: 46rpx;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |