Huanyuyuehui/pages/activity/combination_poster/index.vue

355 lines
8.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :style="viewColor">
<view class='poster-poster' v-if="posterStatus">
<view class='poster-pop'>
<image src='../../../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
<view class="user-code">
<image class="canvas" :style="{width:wd+'px', height:hg+'px'}" :src="posterImage" v-if="posterImage"></image>
<canvas class="canvas" :style="{width:wd+'px',height:hg+'px'}" canvas-id="myCanvas" v-else></canvas>
</view>
<!-- #ifndef H5 -->
<view v-if="posterImage" class='save-poster' @click="savePosterPath(posterImage)">保存到手机</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view v-if="posterImage" class="keep">长按图片可以保存到手机</view>
<!-- #endif -->
</view>
</view>
<view class='mask' v-if="posterImage"></view>
</view>
</template>
<script>
import { imgToBase } from '@/api/user.js';
import { mapGetters } from 'vuex';
export default {
computed: mapGetters(['viewColor']),
data() {
return {
wd: 225,
hg: 357,
posterImage: "",
posterBag: '../static/images/poster-bag.png',
}
},
props: {
picData: {
type: Object
},
posterStatus: {
type: Boolean,
default: false
}
},
watch: {
posterStatus(data) {
if (data) {
this.posterShow()
}
},
},
onLoad() {},
methods: {
async posterShow() {
let that = this;
uni.showLoading({
title: '海报生成中',
mask: true
});
let arr, bag_pic, goods_img, mp_code
goods_img = await that.imgToBase(that.picData.goodsPic)
mp_code = await that.imgToBase(that.picData.codePic)
// #ifdef H5
arr = [that.posterBag, goods_img, mp_code]
// #endif
// #ifdef MP || APP-PLUS
arr = [that.posterBag, await that.downloadFilestoreImage(that.picData.goodsPic), await that.downloadFilestoreImage(
that.picData.codePic)]
// #endif
that.bargainPosterCanvas(arr, that.picData.title, that.picData.label, that.picData.msg, that.picData.price,
that.wd,
that.hg,
(tempFilePath) => {
that.posterImage = tempFilePath
});
},
async imgToBase(url) {
let res = await imgToBase({
image: url
})
return res.data.image
},
savePosterPath(url) {
let that = this;
// #ifdef MP
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function(res) {
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
}
});
} else {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function(res) {
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
}
}
});
// #endif
// #ifdef APP-PLUS
uni.saveImageToPhotosAlbum({
filePath: that.posterImage,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
},
})
// #endif
},
posterImageClose() {
this.$emit('update:posterStatus', false)
this.posterImage = ""
},
//图片转符合安全域名路径
downloadFilestoreImage(url) {
// #ifdef MP
let ishttps = url.split('//')[0] == 'https:'
if (!ishttps) {
url = 'https://'+url.split('//')[1]
}
// #endif
return new Promise((resolve, reject) => {
let that = this;
uni.downloadFile({
url: url,
success: function(res) {
resolve(res.tempFilePath);
},
fail: function() {
return that.$util.Tips({
title: ''
});
}
});
})
},
bargainPosterCanvas(arr2, title, label, msg, price, wd, hg, successFn) {
let that = this;
const ctx = uni.createCanvasContext('myCanvas', this);
ctx.clearRect(0, 0, 0, 0);
/**
* 只能获取合法域名下的图片信息,本地调试无法获取
*
*/
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, wd, hg);
uni.getImageInfo({
src: arr2[0],
success: (res) => {
console.log(arr2)
const WIDTH = res.width;
const HEIGHT = res.height;
ctx.drawImage(arr2[0], 0, 0, wd, hg);
// 保证在不同机型对应坐标准确
let labelx = 0.6656 //标签x
let labely = 0.167 //标签y
let pricex = 0.1847 //价格x
let pricey = 0.175 //价格y
let codex = 0.385 //二维码
let codey = 0.77
let picturex = 0.1571 //商品图左上点
let picturey = 0.2916
let picturebx = 0.6857 //商品图右下点
let pictureby = 0.3916
let msgx = 0.1036 //msg
let msgy = 0.2306
ctx.drawImage(arr2[1], wd * picturex, hg * picturey, wd * picturebx, hg * pictureby);
ctx.save();
ctx.drawImage(arr2[2], wd * codex, hg * codey, 55, 55);
ctx.save();
//标题
const CONTENT_ROW_LENGTH = 30;
let [contentLeng, contentArray, contentRows] = that.textByteLength(title, CONTENT_ROW_LENGTH);
if (contentRows > 2) {
contentRows = 2;
let textArray = contentArray.slice(0, 2);
textArray[textArray.length - 1] += '…';
contentArray = textArray;
}
ctx.setTextAlign('left');
ctx.setFillStyle('#000');
if (contentArray.length < 2) {
ctx.setFontSize(14);
} else {
ctx.setFontSize(12);
}
let contentHh = 3;
for (let m = 0; m < contentArray.length; m++) {
if (m) {
ctx.fillText(contentArray[m], 20, 20 + contentHh * m + 13, 1100);
} else {
ctx.fillText(contentArray[m], 20, 20, 1100);
}
}
// 标签内容
ctx.setTextAlign('left')
ctx.setFontSize(10);
ctx.setFillStyle('#FFF');
ctx.fillText(label, wd * labelx, hg * labely);
ctx.save();
// 价格
ctx.setFillStyle('red');
// ctx.setFontSize(16);
ctx.font = "bold 18px Arial";
ctx.fillText(price, wd * pricex, hg * pricey);
ctx.save();
// msg
ctx.setFontSize(8);
ctx.setFillStyle('#3F3F3F');
ctx.fillText(msg, wd * msgx, hg * msgy);
ctx.save();
ctx.draw(true, () => {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
fileType: 'png',
quality: 1,
success: (res) => {
console.log(res)
successFn && successFn(res.tempFilePath);
uni.hideLoading();
}
}, this)
});
},
fail: function(err) {
uni.hideLoading();
that.Tips({
title: '无法获取图片信息'
});
}
})
},
textByteLength(text, num) {
let strLength = 0;
let rows = 1;
let str = 0;
let arr = [];
for (let j = 0; j < text.length; j++) {
if (text.charCodeAt(j) > 255) {
strLength += 2;
if (strLength > rows * num) {
strLength++;
arr.push(text.slice(str, j));
str = j;
rows++;
}
} else {
strLength++;
if (strLength > rows * num) {
arr.push(text.slice(str, j));
str = j;
rows++;
}
}
}
arr.push(text.slice(str, text.length));
return [strLength, arr, rows] // [处理文字的总字节长度,每行显示内容的数组,行数]
},
}
}
</script>
<style>
.poster-poster {
width: 100%;
height: 100%;
width: 450rpx;
height: 714rpx;
}
.poster-pop {
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 50%;
margin: 0 auto;
margin-top: -357rpx;
z-index: 999;
}
.poster-pop image {
width: 100%;
height: 100%;
display: block;
}
.poster-pop .close {
width: 46rpx;
height: 75rpx;
position: fixed;
right: 0;
top: -73rpx;
display: block;
z-index: 3999;
}
.poster-pop .save-poster {
background-color: var(--view-theme);
font-size: 22rpx;
color: #fff;
text-align: center;
height: 76rpx;
line-height: 76rpx;
width: 100%;
margin-top: 20rpx;
}
.poster-pop .keep {
color: #fff;
text-align: center;
font-size: 25rpx;
margin-top: 10rpx;
}
.mask {
z-index: 300 !important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9;
}
</style>