first commit
This commit is contained in:
GYJ
273
me/components/wm-poster/wm-poster.vue
Normal file
273
me/components/wm-poster/wm-poster.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view style="background: #FFFFFF;">
|
||||
<!-- <view v-if="loading"></view> -->
|
||||
<canvas v-if="!tempFilePath" :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
||||
<image v-else lazy-load :src="tempFilePath" mode="widthFix" class="is-response" @longpress="toSave(tempFilePath)"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this;
|
||||
export default {
|
||||
name: 'wm-poster',
|
||||
props: {
|
||||
CanvasID: {
|
||||
//CanvasID 等同于 canvas-id
|
||||
Type: String,
|
||||
default: 'PosterCanvas'
|
||||
},
|
||||
imgSrc: {
|
||||
//展示图
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
QrSrc: {
|
||||
//二维码
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
Title: {
|
||||
//文本内容
|
||||
Type: String,
|
||||
default: '优享帮'
|
||||
},
|
||||
TitleColor: {
|
||||
//标题颜色
|
||||
Type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
LineType: {
|
||||
//标题显示行数 （注超出2行显示会导致画布布局絮乱）
|
||||
Type: [String, Boolean],
|
||||
default: true
|
||||
},
|
||||
PriceTxt: {
|
||||
//价格值
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
PriceColor: {
|
||||
//价格颜色
|
||||
Type: String,
|
||||
default: '#e31d1a'
|
||||
},
|
||||
OriginalTxt: {
|
||||
//原价值
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
OriginalColor: {
|
||||
//默认颜色（如原价与扫描二维码颜色）
|
||||
Type: String,
|
||||
default: '#b8b8b8'
|
||||
},
|
||||
Width: {
|
||||
//画布宽度 (高度根据图片比例计算 单位upx)
|
||||
Type: String,
|
||||
default: 700
|
||||
},
|
||||
CanvasBg: {
|
||||
//canvas画布背景色
|
||||
Type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
Referrer: {
|
||||
//推荐人信息
|
||||
Type: String,
|
||||
default: '优享帮精选好物'
|
||||
},
|
||||
ViewDetails: {
|
||||
//描述提示文字
|
||||
Type: String,
|
||||
default: '长按或扫描识别二维码领券'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
tempFilePath: '',
|
||||
canvasW: 0,
|
||||
canvasH: 0,
|
||||
canvasImgSrc: '',
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toSave(url) {
|
||||
//#ifndef H5
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: function(image) {
|
||||
console.log('图片信息：', JSON.stringify(image));
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: image.path,
|
||||
success: function() {
|
||||
console.log('save success');
|
||||
uni.showToast({
|
||||
title: '海报已保存相册',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
//#endif
|
||||
},
|
||||
async OnCanvas() {
|
||||
this.loading = true;
|
||||
// this.$queue.showLoading('海报生成中...');
|
||||
_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
|
||||
const C_W = uni.upx2px(_this.Width), //canvas宽度
|
||||
C_P = uni.upx2px(30), //canvas Paddng 间距
|
||||
C_Q = uni.upx2px(150); //二维码或太阳码宽高
|
||||
let _strlineW = 0; //文本宽度
|
||||
let _imgInfo = await _this.getImageInfo({
|
||||
imgSrc: _this.imgSrc
|
||||
}); //广告图
|
||||
let _QrCode = await _this.getImageInfo({
|
||||
imgSrc: _this.QrSrc
|
||||
}); //二维码或太阳码
|
||||
let r = [_imgInfo.width, _imgInfo.height];
|
||||
let q = [_QrCode.width, _QrCode.height];
|
||||
let imgW = C_W - C_P * 2;
|
||||
if (r[0] != imgW) {
|
||||
r[1] = Math.floor((imgW / r[0]) * r[1]);
|
||||
r[0] = imgW;
|
||||
}
|
||||
if (q[0] != C_Q) {
|
||||
q[1] = Math.floor((C_Q / q[0]) * q[1]);
|
||||
q[0] = C_Q;
|
||||
}
|
||||
_this.canvasW = C_W;
|
||||
_this.canvasH = r[1] + q[1] + 128;
|
||||
_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
|
||||
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
|
||||
|
||||
//添加图片展示
|
||||
_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
|
||||
//添加图片展示 end
|
||||
|
||||
//设置文本
|
||||
//#ifdef H5
|
||||
_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
|
||||
//#endif
|
||||
//#ifdef APP-PLUS
|
||||
_this.ctx.setFontSize(uni.upx2px(36)); //设置标题字体大小
|
||||
_this.Title=_this.Title.substring(0,20)
|
||||
//#endif
|
||||
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
|
||||
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
||||
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
|
||||
let _num = 1;
|
||||
for (let i = 0; i < _this.Title.length; i++) {
|
||||
_strlineW += _this.ctx.measureText(_this.Title[i]).width;
|
||||
if (_strlineW > r[0]) {
|
||||
if (_num == 2 && _this.LineType) {
|
||||
//文字换行数量大于二进行省略号处理
|
||||
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
|
||||
_strlineW = 0;
|
||||
_strLastIndex = i;
|
||||
_num++;
|
||||
break;
|
||||
} else {
|
||||
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
|
||||
_strlineW = 0;
|
||||
_strHeight += 20;
|
||||
_strLastIndex = i;
|
||||
_num++;
|
||||
}
|
||||
} else if (i == _this.Title.length - 1) {
|
||||
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
|
||||
_strlineW = 0;
|
||||
}
|
||||
}
|
||||
//设置文本 end
|
||||
//设置价格
|
||||
_strlineW = C_P;
|
||||
_strHeight += uni.upx2px(60);
|
||||
if (_num == 1) {
|
||||
_strHeight += 20; //单行标题时占位符
|
||||
}
|
||||
if (_this.PriceTxt != '') {
|
||||
//判断是否有销售价格
|
||||
_this.ctx.setFillStyle(_this.PriceColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(38));
|
||||
_this.ctx.fillText('券后价 ￥' + _this.PriceTxt, _strlineW, _strHeight); //商品价格
|
||||
_strlineW += _this.ctx.measureText('券后价 ￥' + _this.PriceTxt).width + uni.upx2px(10);
|
||||
}
|
||||
// #ifdef H5
|
||||
if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
|
||||
//判断是否有销售价格且原价
|
||||
_this.ctx.setFillStyle(_this.OriginalColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(24));
|
||||
_this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
|
||||
}
|
||||
// #endif
|
||||
_this.ctx.strokeStyle = _this.OriginalColor;
|
||||
_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
|
||||
_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(10)); //终点
|
||||
_this.ctx.stroke();
|
||||
//设置价格 end
|
||||
|
||||
//添加二维码
|
||||
_strHeight += uni.upx2px(20);
|
||||
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
|
||||
//添加二维码 end
|
||||
|
||||
//添加推荐人与描述
|
||||
_this.ctx.setFillStyle(_this.TitleColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(30));
|
||||
_this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
|
||||
_this.ctx.setFillStyle(_this.OriginalColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(24));
|
||||
_this.ctx.fillText(_this.ViewDetails, C_P, _strHeight + q[1] / 2 + 20);
|
||||
//添加推荐人与描述 end
|
||||
//延迟后渲染至canvas上
|
||||
setTimeout(function() {
|
||||
_this.ctx.draw(true, ret => {
|
||||
_this.getNewImage();
|
||||
});
|
||||
}, 600);
|
||||
},
|
||||
async getImageInfo({
|
||||
imgSrc
|
||||
}) {
|
||||
return new Promise((resolve, errs) => {
|
||||
uni.getImageInfo({
|
||||
src: imgSrc,
|
||||
success: function(image) {
|
||||
resolve(image);
|
||||
},
|
||||
fail(err) {
|
||||
errs(err);
|
||||
_this.$queue.showToast('海报生成失败');
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
getNewImage() {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: _this.CanvasID,
|
||||
quality: 1,
|
||||
complete: res => {
|
||||
_this.tempFilePath = res.tempFilePath;
|
||||
_this.$emit('success', res);
|
||||
_this.loading = false;
|
||||
_this.$queue.showToast('长按图片保存海报');
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
this.OnCanvas();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
321
me/components/wm-poster/wm-posterorders.vue
Normal file
321
me/components/wm-poster/wm-posterorders.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view style="background: #FFFFFF;">
|
||||
<canvas v-if="!tempFilePath" :canvas-id="CanvasID"
|
||||
:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response"
|
||||
@longpress="saveqrcode"></image>
|
||||
<!-- <button v-if="openSettingBtnHidden" class="purple_btn btn_box" hover-class="none" open-type="openSetting"
|
||||
@opensetting='handleSetting'>请开启保存权限</button> -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response"
|
||||
@longpress="toSave(tempFilePath)"></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this;
|
||||
export default {
|
||||
name: 'wm-poster',
|
||||
props: {
|
||||
CanvasID: {
|
||||
//CanvasID 等同于 canvas-id
|
||||
Type: String,
|
||||
default: 'PosterCanvas'
|
||||
},
|
||||
imgSrc: {
|
||||
//展示图
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
QrSrc: {
|
||||
//二维码
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
Title: {
|
||||
//文本内容
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
TitleColor: {
|
||||
//标题颜色
|
||||
Type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
LineType: {
|
||||
//标题显示行数 （注超出2行显示会导致画布布局絮乱）
|
||||
Type: [String, Boolean],
|
||||
default: true
|
||||
},
|
||||
PriceTxt: {
|
||||
//价格值
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
PriceColor: {
|
||||
//价格颜色
|
||||
Type: String,
|
||||
default: '#e31d1a'
|
||||
},
|
||||
OriginalTxt: {
|
||||
//原价值
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
OriginalColor: {
|
||||
//默认颜色（如原价与扫描二维码颜色）
|
||||
Type: String,
|
||||
default: '#b8b8b8'
|
||||
},
|
||||
Width: {
|
||||
//画布宽度 (高度根据图片比例计算 单位upx)
|
||||
Type: String,
|
||||
default: 700
|
||||
},
|
||||
CanvasBg: {
|
||||
//canvas画布背景色
|
||||
Type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
Referrer: {
|
||||
//推荐人信息
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
ViewDetails: {
|
||||
//描述提示文字
|
||||
Type: String,
|
||||
default: '长按或扫描识别二维码进入'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
tempFilePath: '',
|
||||
canvasW: 0,
|
||||
canvasH: 0,
|
||||
canvasImgSrc: '',
|
||||
ctx: null,
|
||||
openSettingBtnHidden: true //是否授权
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
saveqrcode() {
|
||||
var that = this
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.tempFilePath, // canvas 标签的 id 或 canvas-id
|
||||
success: function(res) {
|
||||
uni.showToast({
|
||||
title: '海报已保存相册',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
toSave(url) {
|
||||
//#ifdef APP-PLUS || MP-TOUTIAO || MP-KUAISHOU
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: function(image) {
|
||||
console.log('图片信息：', JSON.stringify(image));
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: image.path,
|
||||
success: function() {
|
||||
console.log('save success');
|
||||
uni.showToast({
|
||||
title: '海报已保存相册',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
//#endif
|
||||
},
|
||||
async OnCanvas() {
|
||||
this.loading = true;
|
||||
// this.$queue.showLoading('海报生成中...');
|
||||
_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
|
||||
const C_W = uni.upx2px(_this.Width), //canvas宽度
|
||||
C_P = uni.upx2px(0), //canvas Paddng 间距
|
||||
C_Q = uni.upx2px(150); //二维码或太阳码宽高
|
||||
let _strlineW = 0; //文本宽度
|
||||
let _imgInfo = await _this.getImageInfo({
|
||||
imgSrc: _this.imgSrc
|
||||
}); //广告图
|
||||
let _QrCode = await _this.getImageInfo({
|
||||
imgSrc: _this.QrSrc
|
||||
}); //二维码或太阳码
|
||||
let r = [_imgInfo.width, _imgInfo.height];
|
||||
let q = [_QrCode.width, _QrCode.height];
|
||||
let imgW = C_W - (C_P * 2.5);
|
||||
if (r[0] != imgW) {
|
||||
r[1] = Math.floor((imgW / r[0]) * r[1]);
|
||||
r[0] = imgW;
|
||||
}
|
||||
if (q[0] != C_Q) {
|
||||
q[1] = Math.floor((C_Q / q[0]) * q[1]);
|
||||
q[0] = C_Q;
|
||||
}
|
||||
_this.canvasW = C_W;
|
||||
_this.canvasH = r[1] + q[1] + 25;
|
||||
_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
|
||||
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
|
||||
|
||||
//添加图片展示
|
||||
_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
|
||||
//添加图片展示 end
|
||||
|
||||
//设置文本
|
||||
//#ifdef H5
|
||||
_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
|
||||
//#endif
|
||||
//#ifdef MP-WEIXIN
|
||||
_this.ctx.setFontSize(uni.upx2px(34)); //设置标题字体大小
|
||||
//#endif
|
||||
//#ifdef APP-PLUS
|
||||
_this.ctx.setFontSize(uni.upx2px(36)); //设置标题字体大小
|
||||
_this.Title = _this.Title.substring(0, 20)
|
||||
//#endif
|
||||
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
|
||||
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
||||
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
|
||||
let _num = 1;
|
||||
// for (let i = 0; i < _this.Title.length; i++) {
|
||||
// _strlineW += _this.ctx.measureText(_this.Title[i]).width;
|
||||
// if (_strlineW > r[0]) {
|
||||
// if (_num == 2 && _this.LineType) {
|
||||
// //文字换行数量大于二进行省略号处理
|
||||
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
|
||||
// _strlineW = 0;
|
||||
// _strLastIndex = i;
|
||||
// _num++;
|
||||
// break;
|
||||
// } else {
|
||||
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
|
||||
// _strlineW = 0;
|
||||
// _strHeight += 20;
|
||||
// _strLastIndex = i;
|
||||
// _num++;
|
||||
// }
|
||||
// } else if (i == _this.Title.length - 1) {
|
||||
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
|
||||
// _strlineW = 0;
|
||||
// }
|
||||
// }
|
||||
//设置文本 end
|
||||
//设置价格
|
||||
_strlineW = C_P;
|
||||
_strHeight += uni.upx2px(60);
|
||||
if (_num == 1) {
|
||||
_strHeight += 20; //单行标题时占位符
|
||||
}
|
||||
// if (_this.PriceTxt != '') {
|
||||
// //判断是否有销售价格
|
||||
// _this.ctx.setFillStyle(_this.PriceColor);
|
||||
// _this.ctx.setFontSize(uni.upx2px(38));
|
||||
// _this.ctx.fillText('现价 ￥' + _this.PriceTxt, _strlineW, _strHeight); //商品价格
|
||||
// _strlineW += _this.ctx.measureText('现价 ￥' + _this.PriceTxt).width + uni.upx2px(10);
|
||||
// }
|
||||
// // #ifdef H5
|
||||
// if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
|
||||
// //判断是否有销售价格且原价
|
||||
// _this.ctx.setFillStyle(_this.OriginalColor);
|
||||
// _this.ctx.setFontSize(uni.upx2px(24));
|
||||
// _this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
|
||||
// }
|
||||
// #endif
|
||||
_this.ctx.strokeStyle = _this.OriginalColor;
|
||||
_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
|
||||
_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(
|
||||
10)); //终点
|
||||
_this.ctx.stroke();
|
||||
//设置价格 end
|
||||
|
||||
//添加二维码
|
||||
_strHeight += uni.upx2px(20);
|
||||
let toTop = uni.upx2px(20);
|
||||
// _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
|
||||
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P - uni.upx2px(20), _this.canvasH - q[1] - toTop, q[
|
||||
0], q[1]);
|
||||
//添加二维码 end
|
||||
|
||||
//添加推荐人与描述
|
||||
_this.ctx.setFillStyle(_this.TitleColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(30));
|
||||
// _this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
|
||||
_this.ctx.fillText(_this.Referrer, C_P + uni.upx2px(20), _this.canvasH - q[1] - toTop + q[1] / 2);
|
||||
_this.ctx.setFillStyle(_this.OriginalColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(24));
|
||||
// _this.ctx.fillText(_this.ViewDetails, C_P, _strHeight + q[1] / 2 + 20);
|
||||
_this.ctx.fillText(_this.ViewDetails, C_P + uni.upx2px(20), _this.canvasH - q[1] - toTop + q[1] / 2 +
|
||||
20);
|
||||
//添加推荐人与描述 end
|
||||
//延迟后渲染至canvas上
|
||||
setTimeout(function() {
|
||||
_this.ctx.draw(true, ret => {
|
||||
_this.getNewImage();
|
||||
});
|
||||
}, 600);
|
||||
},
|
||||
async getImageInfo({
|
||||
imgSrc
|
||||
}) {
|
||||
return new Promise((resolve, errs) => {
|
||||
uni.getImageInfo({
|
||||
src: imgSrc,
|
||||
success: function(image) {
|
||||
resolve(image);
|
||||
},
|
||||
fail(err) {
|
||||
errs(err);
|
||||
_this.$queue.showToast('海报生成失败');
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
getNewImage() {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: _this.CanvasID,
|
||||
quality: 1,
|
||||
complete: res => {
|
||||
// #ifdef H5
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') !== -1) {
|
||||
_this.tempFilePath = res.tempFilePath;
|
||||
_this.$emit('success', res);
|
||||
} else {
|
||||
_this.$emit('successH5', res.tempFilePath);
|
||||
}
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
_this.tempFilePath = res.tempFilePath;
|
||||
_this.$emit('success', res);
|
||||
// #endif
|
||||
_this.loading = false;
|
||||
uni.showToast({
|
||||
title: '长按图片保存海报',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
this.OnCanvas();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
324
me/components/wm-poster/wm-posterordershd.vue
Normal file
324
me/components/wm-poster/wm-posterordershd.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<view>
|
||||
<canvas v-if="!tempFilePath" :canvas-id="CanvasID"
|
||||
:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response"
|
||||
@longpress="saveqrcode"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-TOUTIAO -->
|
||||
<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response"
|
||||
@longpress="saveqrcode"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response"
|
||||
@longpress="toSave(tempFilePath)"></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this;
|
||||
export default {
|
||||
name: 'wm-poster',
|
||||
props: {
|
||||
CanvasID: {
|
||||
//CanvasID 等同于 canvas-id
|
||||
Type: String,
|
||||
default: 'PosterCanvas'
|
||||
},
|
||||
imgSrc: {
|
||||
//展示图
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
QrSrc: {
|
||||
//二维码
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
Title: {
|
||||
//文本内容
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
TitleColor: {
|
||||
//标题颜色
|
||||
Type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
LineType: {
|
||||
//标题显示行数 （注超出2行显示会导致画布布局絮乱）
|
||||
Type: [String, Boolean],
|
||||
default: true
|
||||
},
|
||||
PriceTxt: {
|
||||
//价格值
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
PriceColor: {
|
||||
//价格颜色
|
||||
Type: String,
|
||||
default: '#e31d1a'
|
||||
},
|
||||
OriginalTxt: {
|
||||
//原价值
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
OriginalColor: {
|
||||
//默认颜色（如原价与扫描二维码颜色）
|
||||
Type: String,
|
||||
default: '#b8b8b8'
|
||||
},
|
||||
Width: {
|
||||
//画布宽度 (高度根据图片比例计算 单位upx)
|
||||
Type: String,
|
||||
default: 700
|
||||
},
|
||||
CanvasBg: {
|
||||
//canvas画布背景色
|
||||
Type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
Referrer: {
|
||||
//推荐人信息
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
ViewDetails: {
|
||||
//描述提示文字
|
||||
Type: String,
|
||||
default: '长按或扫描识别二维码进入'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
tempFilePath: '',
|
||||
canvasW: 0,
|
||||
canvasH: 0,
|
||||
canvasImgSrc: '',
|
||||
ctx: null,
|
||||
openSettingBtnHidden: true //是否授权
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
saveqrcode() {
|
||||
var that = this
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.tempFilePath, // canvas 标签的 id 或 canvas-id
|
||||
success: function(res) {
|
||||
uni.showToast({
|
||||
title: '海报已保存相册',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
toSave(url) {
|
||||
//#ifdef APP-PLUS
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: function(image) {
|
||||
console.log('图片信息：', JSON.stringify(image));
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: image.path,
|
||||
success: function() {
|
||||
console.log('save success');
|
||||
uni.showToast({
|
||||
title: '海报已保存相册',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
//#endif
|
||||
},
|
||||
async OnCanvas() {
|
||||
this.loading = true;
|
||||
// this.$queue.showLoading('海报生成中...');
|
||||
_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
|
||||
const C_W = uni.upx2px(_this.Width), //canvas宽度
|
||||
C_P = uni.upx2px(0), //canvas Paddng 间距
|
||||
C_Q = uni.upx2px(150); //二维码或太阳码宽高
|
||||
let _strlineW = 0; //文本宽度
|
||||
let _imgInfo = await _this.getImageInfo({
|
||||
imgSrc: _this.imgSrc
|
||||
}); //广告图
|
||||
let _QrCode = await _this.getImageInfo({
|
||||
imgSrc: _this.QrSrc
|
||||
}); //二维码或太阳码
|
||||
let r = [_imgInfo.width, _imgInfo.height];
|
||||
let q = [_QrCode.width, _QrCode.height];
|
||||
let imgW = C_W - (C_P * 2.5);
|
||||
if (r[0] != imgW) {
|
||||
r[1] = Math.floor((imgW / r[0]) * r[1]);
|
||||
r[0] = imgW;
|
||||
}
|
||||
if (q[0] != C_Q) {
|
||||
q[1] = Math.floor((C_Q / q[0]) * q[1]);
|
||||
q[0] = C_Q;
|
||||
}
|
||||
_this.canvasW = C_W;
|
||||
_this.canvasH = r[1];
|
||||
// _this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
|
||||
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
|
||||
|
||||
//添加图片展示
|
||||
_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], _this.canvasH);
|
||||
//添加图片展示 end
|
||||
|
||||
//设置文本
|
||||
//#ifdef H5
|
||||
_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
|
||||
//#endif
|
||||
//#ifdef MP-WEIXIN
|
||||
_this.ctx.setFontSize(uni.upx2px(34)); //设置标题字体大小
|
||||
//#endif
|
||||
//#ifdef APP-PLUS
|
||||
_this.ctx.setFontSize(uni.upx2px(36)); //设置标题字体大小
|
||||
_this.Title = _this.Title.substring(0, 20)
|
||||
//#endif
|
||||
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
|
||||
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
||||
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
|
||||
let _num = 1;
|
||||
// for (let i = 0; i < _this.Title.length; i++) {
|
||||
// _strlineW += _this.ctx.measureText(_this.Title[i]).width;
|
||||
// if (_strlineW > r[0]) {
|
||||
// if (_num == 2 && _this.LineType) {
|
||||
// //文字换行数量大于二进行省略号处理
|
||||
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
|
||||
// _strlineW = 0;
|
||||
// _strLastIndex = i;
|
||||
// _num++;
|
||||
// break;
|
||||
// } else {
|
||||
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
|
||||
// _strlineW = 0;
|
||||
// _strHeight += 20;
|
||||
// _strLastIndex = i;
|
||||
// _num++;
|
||||
// }
|
||||
// } else if (i == _this.Title.length - 1) {
|
||||
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
|
||||
// _strlineW = 0;
|
||||
// }
|
||||
// }
|
||||
//设置文本 end
|
||||
//设置价格
|
||||
_strlineW = C_P;
|
||||
_strHeight += uni.upx2px(60);
|
||||
if (_num == 1) {
|
||||
_strHeight += 20; //单行标题时占位符
|
||||
}
|
||||
// if (_this.PriceTxt != '') {
|
||||
// //判断是否有销售价格
|
||||
// _this.ctx.setFillStyle(_this.PriceColor);
|
||||
// _this.ctx.setFontSize(uni.upx2px(38));
|
||||
// _this.ctx.fillText('现价 ￥' + _this.PriceTxt, _strlineW, _strHeight); //商品价格
|
||||
// _strlineW += _this.ctx.measureText('现价 ￥' + _this.PriceTxt).width + uni.upx2px(10);
|
||||
// }
|
||||
// // #ifdef H5
|
||||
// if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
|
||||
// //判断是否有销售价格且原价
|
||||
// _this.ctx.setFillStyle(_this.OriginalColor);
|
||||
// _this.ctx.setFontSize(uni.upx2px(24));
|
||||
// _this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
|
||||
// }
|
||||
// #endif
|
||||
_this.ctx.strokeStyle = _this.OriginalColor;
|
||||
_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
|
||||
_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(
|
||||
10)); //终点
|
||||
_this.ctx.stroke();
|
||||
//设置价格 end
|
||||
|
||||
//添加二维码
|
||||
_strHeight += uni.upx2px(20);
|
||||
let toTop = uni.upx2px(20);
|
||||
// _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
|
||||
_this.ctx.drawImage(_QrCode.path, _this.canvasW / 2 - q[0] / 2 + uni.upx2px(25), _this.canvasH / 2 - q[
|
||||
1] / 2 + uni.upx2px(20), q[0], q[
|
||||
1]);
|
||||
//添加二维码 end
|
||||
|
||||
//添加推荐人与描述
|
||||
_this.ctx.setFillStyle(_this.TitleColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(30));
|
||||
// _this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
|
||||
// _this.ctx.fillText(_this.Referrer, C_P, _this.canvasH - q[1] - toTop + q[1] / 2);
|
||||
_this.ctx.setFillStyle('red');
|
||||
_this.ctx.setFontSize(uni.upx2px(24));
|
||||
// _this.ctx.fillText(_this.ViewDetails, C_P, _strHeight + q[1] / 2 + 20);
|
||||
_this.ctx.fillText('扫一扫，注册领会员', _this.canvasW / 2 - q[0] / 2 - uni.upx2px(5), _this.canvasH / 2 - q[
|
||||
1] / 2 - uni.upx2px(10));
|
||||
//添加推荐人与描述 end
|
||||
//延迟后渲染至canvas上
|
||||
setTimeout(function() {
|
||||
_this.ctx.draw(true, ret => {
|
||||
_this.getNewImage();
|
||||
});
|
||||
}, 600);
|
||||
},
|
||||
async getImageInfo({
|
||||
imgSrc
|
||||
}) {
|
||||
return new Promise((resolve, errs) => {
|
||||
uni.getImageInfo({
|
||||
src: imgSrc,
|
||||
success: function(image) {
|
||||
resolve(image);
|
||||
},
|
||||
fail(err) {
|
||||
errs(err);
|
||||
_this.$queue.showToast('海报生成失败');
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
getNewImage() {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: _this.CanvasID,
|
||||
quality: 1,
|
||||
complete: res => {
|
||||
// #ifdef H5
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') !== -1) {
|
||||
_this.tempFilePath = res.tempFilePath;
|
||||
_this.$emit('success', res);
|
||||
} else {
|
||||
_this.$emit('successH5', res.tempFilePath);
|
||||
}
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
_this.tempFilePath = res.tempFilePath;
|
||||
_this.$emit('success', res);
|
||||
// #endif
|
||||
_this.loading = false;
|
||||
uni.showToast({
|
||||
title: '长按图片保存海报',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
this.OnCanvas();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
261
me/components/wm-poster/wm-posters.vue
Normal file
261
me/components/wm-poster/wm-posters.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view style="background: #FFFFFF;">
|
||||
<canvas v-if="!tempFilePath" :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
||||
<image v-else lazy-load :src="tempFilePath" mode="widthFix" class="is-response" @longpress="toSave(tempFilePath)"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this;
|
||||
export default {
|
||||
name: 'wm-poster',
|
||||
props: {
|
||||
CanvasID: { //CanvasID 等同于 canvas-id
|
||||
Type: String,
|
||||
default: 'PosterCanvas'
|
||||
},
|
||||
imgSrc: { //展示图
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
QrSrc: { //二维码
|
||||
Type: String,
|
||||
default: ''
|
||||
},
|
||||
Title: { //文本内容
|
||||
Type: String,
|
||||
default: '优享帮'
|
||||
},
|
||||
TitleColor: { //标题颜色
|
||||
Type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
LineType: { //标题显示行数 （注超出2行显示会导致画布布局絮乱）
|
||||
Type: [String, Boolean],
|
||||
default: true
|
||||
},
|
||||
PriceTxt: { //价格值
|
||||
Type: String,
|
||||
default: '99.99'
|
||||
},
|
||||
PriceColor: { //价格颜色
|
||||
Type: String,
|
||||
default: '#e31d1a'
|
||||
},
|
||||
OriginalTxt: { //原价值
|
||||
Type: String,
|
||||
default: '199.99'
|
||||
},
|
||||
OriginalColor: { //默认颜色（如原价与扫描二维码颜色）
|
||||
Type: String,
|
||||
default: '#b8b8b8'
|
||||
},
|
||||
Width: { //画布宽度 (高度根据图片比例计算 单位upx)
|
||||
Type: String,
|
||||
default: 700
|
||||
},
|
||||
CanvasBg: { //canvas画布背景色
|
||||
Type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
Referrer: { //推荐人信息
|
||||
Type: String,
|
||||
default: '优享帮精选好物'
|
||||
},
|
||||
ViewDetails: { //描述提示文字
|
||||
Type: String,
|
||||
default: '长按或扫描二维码免费领取'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tempFilePath: '',
|
||||
canvasW: 0,
|
||||
canvasH: 0,
|
||||
canvasImgSrc: '',
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toSave(url) {
|
||||
//#ifndef H5
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: function(image) {
|
||||
console.log('图片信息：', JSON.stringify(image));
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: image.path,
|
||||
success: function() {
|
||||
console.log('save success');
|
||||
uni.showToast({
|
||||
title: '海报已保存相册',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//#endif
|
||||
},
|
||||
async OnCanvas() {
|
||||
|
||||
this.$queue.showLoading('海报生成中...');
|
||||
|
||||
_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
|
||||
const C_W = uni.upx2px(_this.Width), //canvas宽度
|
||||
C_P = uni.upx2px(30), //canvas Paddng 间距
|
||||
C_Q = uni.upx2px(150); //二维码或太阳码宽高
|
||||
let _strlineW = 0; //文本宽度
|
||||
let _imgInfo = await _this.getImageInfo({
|
||||
imgSrc: _this.imgSrc
|
||||
}); //广告图
|
||||
let _QrCode = await _this.getImageInfo({
|
||||
imgSrc: _this.QrSrc
|
||||
}); //二维码或太阳码
|
||||
let r = [_imgInfo.width, _imgInfo.height];
|
||||
let q = [_QrCode.width, _QrCode.height];
|
||||
let imgW = C_W - C_P * 2;
|
||||
if (r[0] != imgW) {
|
||||
r[1] = Math.floor((imgW / r[0]) * r[1]);
|
||||
r[0] = imgW;
|
||||
}
|
||||
if (q[0] != C_Q) {
|
||||
q[1] = Math.floor((C_Q / q[0]) * q[1]);
|
||||
q[0] = C_Q;
|
||||
}
|
||||
_this.canvasW = C_W;
|
||||
_this.canvasH = r[1] + q[1] + 128;
|
||||
_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
|
||||
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
|
||||
|
||||
//添加图片展示
|
||||
_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
|
||||
//添加图片展示 end
|
||||
|
||||
//设置文本
|
||||
//#ifdef H5
|
||||
_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
|
||||
//#endif
|
||||
//#ifndef H5
|
||||
_this.ctx.setFontSize(uni.upx2px(36)); //设置标题字体大小
|
||||
//#endif
|
||||
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
|
||||
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
||||
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
|
||||
let _num = 1;
|
||||
for (let i = 0; i < _this.Title.length; i++) {
|
||||
_strlineW += _this.ctx.measureText(_this.Title[i]).width;
|
||||
if (_strlineW > r[0]) {
|
||||
if (_num == 2 && _this.LineType) {
|
||||
//文字换行数量大于二进行省略号处理
|
||||
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
|
||||
_strlineW = 0;
|
||||
_strLastIndex = i;
|
||||
_num++;
|
||||
break;
|
||||
} else {
|
||||
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
|
||||
_strlineW = 0;
|
||||
_strHeight += 20;
|
||||
_strLastIndex = i;
|
||||
_num++;
|
||||
}
|
||||
} else if (i == _this.Title.length - 1) {
|
||||
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
|
||||
_strlineW = 0;
|
||||
}
|
||||
}
|
||||
//设置文本 end
|
||||
|
||||
//设置价格
|
||||
_strlineW = C_P;
|
||||
_strHeight += uni.upx2px(60);
|
||||
if (_num == 1) {
|
||||
_strHeight += 20; //单行标题时占位符
|
||||
}
|
||||
|
||||
if (_this.PriceTxt != '') { //判断是否有销售价格
|
||||
_this.ctx.setFillStyle(_this.PriceColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(38));
|
||||
_this.ctx.fillText(_this.PriceTxt, _strlineW, _strHeight); //商品价格
|
||||
_strlineW += _this.ctx.measureText(_this.PriceTxt).width + uni.upx2px(10);
|
||||
}
|
||||
if (_this.PriceTxt != '' && _this.OriginalTxt != '') { //判断是否有销售价格且原价
|
||||
_this.ctx.setFillStyle(_this.OriginalColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(24));
|
||||
_this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
|
||||
}
|
||||
_this.ctx.strokeStyle = _this.OriginalColor;
|
||||
_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
|
||||
_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(10)); //终点
|
||||
_this.ctx.stroke();
|
||||
//设置价格 end
|
||||
|
||||
//添加二维码
|
||||
_strHeight += uni.upx2px(20);
|
||||
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
|
||||
//添加二维码 end
|
||||
|
||||
//添加推荐人与描述
|
||||
_this.ctx.setFillStyle(_this.TitleColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(30));
|
||||
_this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
|
||||
_this.ctx.setFillStyle(_this.OriginalColor);
|
||||
_this.ctx.setFontSize(uni.upx2px(24));
|
||||
_this.ctx.fillText(_this.ViewDetails, C_P, _strHeight + q[1] / 2 + 20);
|
||||
//添加推荐人与描述 end
|
||||
|
||||
//延迟后渲染至canvas上
|
||||
setTimeout(function() {
|
||||
_this.ctx.draw(true, (ret) => {
|
||||
_this.getNewImage();
|
||||
});
|
||||
|
||||
}, 600);
|
||||
// setTimeout(function () {
|
||||
// uni.hideLoading();
|
||||
|
||||
// }, 3000);
|
||||
},
|
||||
async getImageInfo({
|
||||
imgSrc
|
||||
}) {
|
||||
return new Promise((resolve, errs) => {
|
||||
uni.getImageInfo({
|
||||
src: imgSrc,
|
||||
success: function(image) {
|
||||
resolve(image);
|
||||
},
|
||||
fail(err) {
|
||||
errs(err);
|
||||
uni.hideLoading();
|
||||
_this.$queue.showToast("海报生成失败")
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
getNewImage() {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: _this.CanvasID,
|
||||
quality: 1,
|
||||
complete: (res) => {
|
||||
_this.tempFilePath = res.tempFilePath;
|
||||
_this.$emit('success', res);
|
||||
_this.$queue.showToast("长按图片保存海报")
|
||||
// uni.hideLoading();
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
this.OnCanvas();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user