案例 1
实现背景：
- 海报的尺寸依据图片大小来的，宽度百分百，高度同比例缩放，图上笼罩二维码
- 如果没有设置海报图片，应用别的图片，在底部增加一个底部的固定图片，和二维码，和图片的左上角笼罩 log 图
难点: - 因为是应用 canvas 渲染的图片，然而图片的尺寸不是固定，也就是 canvas 的尺寸不是固定（解决：在内部先获取图片的尺寸，传进这个组件中）
- h5 是渲染失常的，微信小程序图片渲染不进去（解决：微信不反对 canvas 间接渲染网络图片, 所以须要先缓存到本地）
<template>
<view class="poster-box" ref="posterBox" @click="hidePoster">
<canvas
:style="{
width: posterOptions.poster.canvasWidth + 'px',
height: posterOptions.poster.canvasHeight + 'px',
}"canvas-id="myCanvas"
></canvas>
<!-- #ifdef MP -->
<image
:src="base64"
class="poster-image"
:draggable="false"
show-menu-by-longpress="true"
></image>
<!-- #endif -->
<!-- #ifdef H5 -->
<image class="poster-image" :src="base64" :draggable="false"></image>
<!-- #endif -->
</view>
</template>
<script>
import Qr from '@/utils/wxqrcode'
export default {
name: 'poster_canvas',
data() {
return {base64: '', // 海报绘制成图片以便保留}
},
props: {
// 图片地址
posterOptions: {
type: Object,
require: true,
},
},
mounted() {this.$nextTick(() => {this.imgToCanvas()
})
},
methods: {async imgToCanvas() {
let that = this
let canvasHeight = this.posterOptions.isHavePosterImg
? this.posterOptions.poster.canvasHeight
: this.posterOptions.poster.canvasHeight -
this.posterOptions.buttonOption.h
// 渲染大图
let ctx = uni.createCanvasContext('myCanvas', that)
console.log(11111,this.posterOptions)
ctx.drawImage(
this.posterOptions.poster.url,
0,
0,
this.posterOptions.poster.canvasWidth,
canvasHeight
)
if (!this.posterOptions.isHavePosterImg) {
// 渲染底部的图片
ctx.drawImage(
this.posterOptions.buttonOption.bottomUrl,
this.posterOptions.buttonOption.x,
this.posterOptions.buttonOption.y,
this.posterOptions.buttonOption.w,
this.posterOptions.buttonOption.h
)
}
// 渲染二维码
if (this.posterOptions.QrOption.isWeChatMiniApp) {
ctx.drawImage(
this.posterOptions.QrOption.QrUrl,
this.posterOptions.QrOption.x,
this.posterOptions.QrOption.y,
this.posterOptions.QrOption.w,
this.posterOptions.QrOption.h
)
} else {
// 一般二维码
let qrCodeImg = Qr.createQrCodeImg(this.posterOptions.QrOption.QrUrl, {size: parseInt(300),
})
ctx.drawImage(
qrCodeImg,
this.posterOptions.QrOption.x,
this.posterOptions.QrOption.y,
this.posterOptions.QrOption.w,
this.posterOptions.QrOption.h
)
}
if (!this.posterOptions.isHavePosterImg) {
// 渲染 log 和文字
ctx.drawImage(
this.posterOptions.logOption.logUrl,
this.posterOptions.logOption.x,
this.posterOptions.logOption.y,
this.posterOptions.logOption.w,
this.posterOptions.logOption.h
)
ctx.fillStyle = this.posterOptions.textOption.color
ctx.setFontSize(22)
ctx.font = 'bold arial'
ctx.fillText(
this.posterOptions.textOption.text,
this.posterOptions.textOption.x,
this.posterOptions.textOption.y
)
}
ctx.save() // 保留
ctx.draw() // 绘制
// 不加提早的话，base64 有时候会赋予 undefined
// 把以后画布指定区域的内容导出生成指定大小的图片，并返回文件门路
setTimeout(() => {
uni.canvasToTempFilePath(
{
canvasId: "myCanvas",
fileType: "jpg",
width:that.posterOptions.poster.canvasWidth,
height:that.posterOptions.poster.canvasHeight,
destWidth:that.posterOptions.poster.canvasWidth,
destHeight:that.posterOptions.poster.canvasHeight,
success: function (res) {that.base64 = res.tempFilePath;},
fail: function (error) {console.log(error, "谬误");
},
},that
);
}, 500);
},
hidePoster() {
// #ifdef H5
this.$parent.$parent.hidePoster()
// #endif
// #ifndef H5
this.$parent.hidePoster()
// #endif
},
},
}
</script>
<style lang="scss" scoped>
.poster-box {
position: fixed;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.poster-image {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
opacity: 0;
}
</style>
应用
<template>
<view
class="contentBgc"
:style="{backgroundColor: detailObj.backgroundColor || defaultBgc}"
>
<image
class="width-100"
:src="detailObj.activityDetailHeadImg"
mode="widthFix"
/>
<view v-for="item in detailObj.plateDtoList" :key="item.id">
<TopicThree v-if="detailObj.currentTemplate == 3" :itemObj="item" />
<TopicTwo v-if="detailObj.currentTemplate == 2" :itemObj="item" />
<TopicOne v-if="detailObj.currentTemplate == 1" :itemObj="item" />
</view>
<generateaposter v-if="isGetOk" @pChangeType="showPoster" />
<SharePoster v-if="posterShow" :posterOptions="posterOptions"></SharePoster>
</view>
</template>
<script>
import TopicOne from './components/topicOne.vue'
import TopicTwo from './components/topicTwo.vue'
import TopicThree from './components/topicThree.vue'
import {getSpecialTopicData} from '@/api/specialTopic.js'
// #ifdef H5
import {getShopWxConfig, share} from '@/utils/wxShare.js'
// #endif
import mixinWxshare from '@/utils/wxShareTimeline.js' // 微信分享朋友圈
import generateaposter from '@/components/gpage/generateaposter.vue'
import SharePoster from './components/sharePoster.vue'
import {cmsWxacodeGetwxacode} from '@/api/product'
export default {mixins: [mixinWxshare],
components: {
TopicOne,
TopicTwo,
TopicThree,
generateaposter,
SharePoster,
},
onLoad(options) {
this.activityUniqueCode = options.activityUniqueCode
this.initData()},
data() {
return {
defaultBgc: '#fff', // 默认背景色
share: this.$utils.getImgUrl('/static/mcShopImage/share.png'), // 分享
detailObj: {},
activityUniqueCode: '',
posterShow: false,
isGetOk: false,
posterOptions: {
isHavePosterImg: false, // 用户是否上传了分享海报的图片
activityName: '',
textOption: {
text: '',
x: 0, // X 轴坐标
y: 20, // Y 轴坐标
color: '#9c6d06',
},
poster: {
url:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F0429f29e-85f3-5826-9608-946fc1ee103a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664356680&t=349aa739d52cd748c50b3afd89da2ba2',
canvasWidth: 0,
canvasHeight: 0,
},
QrOption: {
QrUrl: '', // 二维码链接
x: 20, // 图片 X 轴坐标
y: 20, // 图片 Y 轴坐标
w: 90, // 图片宽度
h: 90, // 图片高度
isWeChatMiniApp: false, // 是否是微信小程序二维码 true 是微信小程序, false 不是微信小程序
},
logOption: {
//log
logUrl:
'https://jemsfile.mochouu.com/provider/91949676/20220831/1661926456418.png',
x: 15, // 图片 X 轴坐标
y: 15, // 图片 Y 轴坐标
w: 120, // 图片宽度
h: 45, // 图片高度
},
buttonOption: {
// 底部的图片
bottomUrl:
'https://jemsfile.mochouu.com/provider/91949676/20220831/1661930915954.png',
x: 0, // 图片 X 轴坐标
y: 20, // 图片 Y 轴坐标
w: 100, // 图片宽度
h: 100, // 图片高度
},
},
screenWidth: 0,
}
},
mounted() {},
// #ifndef H5
/* 微信小程序分享 */
onShareAppMessage: function(res) {// console.log('分享的 userCode:'+this.userInfo.userCode)
let userInfo = this.$utils.getStorageSync('userInfo')
let routes = getCurrentPages() // 获取以后关上过的页面路由数组
let curParam =
routes[routes.length - 1].options ||
routes[routes.length - 1].$route.query // 获取路由参数
if (userInfo) {curParam.userCode = userInfo.userCode}
let a = this.$utils.pageliks(curParam, routes)
let obj = {
title: this.detailObj.shareTitle || this.detailObj.shareContent || '',
desc:this.detailObj.shareContent||'',
path: a,
imageUrl: this.detailObj.shareImg || this.detailObj.verticalImgUrl || '',
}
return obj
},
// #endif
methods: {hidePoster() {this.posterShow = false},
getWxCode() {
uni.showLoading({title: '加载中',})
let that = this
this.isGetOk = false
let routes = getCurrentPages() // 获取以后关上过的页面路由数组
let curRoute = routes[routes.length - 1].route // 获取以后页面路由
let curParam = routes[routes.length - 1].options // 获取路由参数
let obj = {}
obj.curRoute = curRoute
obj.curParam = curParam
// 拼接参数
let str = ''
for (let key in obj.curParam) {str += '&' + key + '=' + obj.curParam[key]
}
str = str ? '?' + str.substr(1, str.length) : ''
let data = {page: '/' + obj.curRoute + str,}
cmsWxacodeGetwxacode(data).then((res) => {uni.hideLoading()
if (res.code === 1000) {this.downImg(res.data, that.posterOptions.QrOption, 'QrUrl')
that.$set(that.posterOptions.QrOption, 'isWeChatMiniApp', true)
that.isGetOk = true
}
})
},
// 显示分享海报
showPoster() {this.posterShow = true},
/* 任务分配 */
assignTasks(data) {
/* 设置头部的 title */
uni.setNavigationBarTitle({title: data.activityName,})
// 初始化分享朋友圈
// #ifndef H5
this.initWxShareData(
this.detailObj.shareTitle || this.detailObj.shareContent,
this.detailObj.shareImg || this.detailObj.verticalImgUrl
)
// #endif
// #ifdef H5
switch (uni.getSystemInfoSync().platform) {
case 'android':
this.fx(1)
break
case 'ios':
this.fx(2)
break
}
// #endif
},
/* 初始化数据 */
initData() {
let that = this
getSpecialTopicData(this.activityUniqueCode).then((res) => {if (res.code == 1000) {const { plateDtoList, ...rest} = res.data
let filterData = plateDtoList.map((it) => {const { productJson, ...re} = it
let objArr = JSON.parse(productJson)
return {productJson: objArr||[],
...re,
}
})
this.detailObj = {plateDtoList: filterData, ...rest}
this.assignTasks(this.detailObj)
// #ifdef MP
uni.getSystemInfo({success: (res) => {that.screenWidth = res.windowWidth},
})
this.getWxCode()
// #endif
// #ifdef H5
that.screenWidth = document.documentElement.clientWidth
this.posterOptions.QrOption.QrUrl = window.location.href
this.isGetOk = true
// #endif
// 判断是否设置了分享海报的图片
let isHaveImg = this.detailObj.posterImg ? true : false
if(!isHaveImg){this.downImg(that.posterOptions.logOption.logUrl, that.posterOptions.logOption, 'logUrl')
this.downImg(that.posterOptions.buttonOption.bottomUrl, that.posterOptions.buttonOption, 'bottomUrl')
}
this.$set(this.posterOptions, 'isHavePosterImg', isHaveImg)
this.$set(
this.posterOptions.textOption,
'text',
this.detailObj.activityName
)
// 设置 img 图片和 canvas 大小
let posterImg = this.detailObj.posterImg
? this.detailObj.posterImg
: this.detailObj.activityDetailHeadImg
// 设置大图的 url
this.downImg(posterImg, this.posterOptions.poster, 'url')
uni.getImageInfo({
src: posterImg,
success(res) {
let imgW = res.width // 图片宽度
let imgH = res.height // 图片高度
let per = imgW / that.screenWidth
that.$set(
that.posterOptions.poster,
'canvasWidth',
that.screenWidth
)
// 是否设置分享海报
let canvasHeight = isHaveImg
? imgH / per
: imgH / per + that.posterOptions.buttonOption.h
that.$set(that.posterOptions.poster, 'canvasHeight', canvasHeight)
// 设置二维码地位
let codeX = isHaveImg ? that.screenWidth - 95 : 5
that.$set(that.posterOptions.QrOption, 'x', codeX)
let codeY = isHaveImg ? imgH / per - 95 : canvasHeight - 95
that.$set(that.posterOptions.QrOption, 'y', codeY)
if (!isHaveImg) {
// 如果没有设置分享海报
that.$set(
that.posterOptions.buttonOption,
'w',
that.screenWidth
)
that.$set(that.posterOptions.buttonOption, 'y', imgH / per)
that.$set(that.posterOptions.textOption, 'x', codeX + 120)
that.$set(that.posterOptions.textOption, 'y', codeY + 40)
}
},
})
}
})
},
// 将网络图片缓存到本地
downImg(img, obj, name) {
let that = this
uni.downloadFile({
url: img,
success: (res) => {that.$set(obj, name, res.tempFilePath)
},
})
},
// 分享办法
fx(val) {
let url = window.location.href
// 获取 usercode
let urls
let userInfo = this.$utils.getStorageSync('userInfo')
let routes = getCurrentPages() // 获取以后关上过的页面路由数组
let curParam =
routes[routes.length - 1].options ||
routes[routes.length - 1].$route.query // 获取路由参数
if (userInfo) {curParam.userCode = userInfo.userCode}
let a = this.$utils.pageliks(curParam, routes)
let b = window.location.origin
if (userInfo) {urls = `${b}${a}`
} else {urls = url}
let data = {url: url,}
let shares = {
title: this.detailObj.shareTitle || this.$config.serviceProvider,
link: urls,
desc:this.detailObj.shareContent||'',
imgUrl: this.detailObj.shareImg || '',
}
if (val == 1) {getShopWxConfig(data, shares, val)
} else {share(shares)
}
},
},
}
</script>
<style lang="scss" scoped>
.width-100 {width: 100%;}
.contentBgc {
min-height: 100vh;
width: 100vw;
padding-bottom: 20rpx;
}
</style>