小程序背景图加二维码合成海报
<view class="pages">
<view class="box">
<swiper bindchange="swiperChange" class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" indicator-active-color="#FF8722" previous-margin="55rpx"
next-margin="55rpx">
<block wx:for="{{bannerlist}}" wx:key="index">
<swiper-item class="swiperitem">
<image class="swiperimg" src="{{item.img}}" data-item="{{item}}" bindtap="previewImg">
image>
swiper-item>
block>
swiper>
<view class="canvasbox">
<canvas wx:for="{{[0,1,2,3,4,5]}}" type="2d" class="canvas" canvas-id="{{'shareCanvas' + index}}"
id="{{'shareCanvas' + index}}" wx:key="index">canvas>
view>
view>
<view class="flexbox">
<view class="btn" bindtap="onSharePoster">分享海报view>
<button open-type="share">
<view class="btn">分享链接view>
button>
view>
<van-overlay show="{{ showoMarker }}" bind:click="onMarkerHide" z-index="{{9999}}">
<view class="oreder-wrapper">
<view class="oreder-wrapperbox" catchtap="shop">
<image wx:if="{{makerObj.ismaker}}" class="oreder-bg" src="{{imgUrl + 'isMarkerbg.png'}}">image>
<image wx:if="{{!makerObj.ismaker}}" class="oreder-bg" src="{{imgUrl + 'noMarkerbg.png'}}">image>
<button open-type="share" class="oreder-btn">
<view>
<image class="oreder-btn" src="{{imgUrl + 'sharebtn.png'}}">image>
view>
button>
<view class="oreder-icon" catchtap="onMarkerHide">
<van-icon name="close" size="60rpx" color="white" />
view>
view>
view>
van-overlay>
view>
// pages/generalize/index.js
const app = getApp() // 引入app
import _request from '../../utils/request.js'
Page({
/**
* 页面的初始数据
*/
data: {
invitecode: '',
imgUrl: app.globalData.imgUrl, //全局img路径
imglist: [{
img: 'xxx/user_3.png'
},
{
img: 'xxx/hairdresser_3.png'
},
{
img: 'xxx/store_3.png'
},
],
indicatorDots: false,
vertical: false,
autoplay: false,
duration: 500,
margin55: '',
codeimg: '',
showimg: '',
bannerlist: '', // 合成后图片路径
makerObj: null,
showoMarker: true
},
// 点击关闭
onMarkerHide() {
this.setData({
showoMarker: false
})
},
// 轮播事件
swiperChange(e) {
let index = e.detail.current
this.setData({
showimg: this.data.bannerlist[index].img
})
},
//点击图片进行预览，长按保存分享图片
previewImg(e) {
this.setData({
showimg: e.currentTarget.dataset.item.img
})
let list = this.data.bannerlist.map(item => {
return item.img
})
wx.previewImage({
current: e.currentTarget.dataset.item.img, // 当前显示图片的http链接
urls: list // 需要预览的图片http链接列表
})
},
// 分享海报
onSharePoster() {
let list = this.data.bannerlist.map(item => {
return item.img
})
wx.previewImage({
current: this.data.showimg, // 当前显示图片的http链接
urls: list // 需要预览的图片http链接列表
})
},
drawPoster1(circleBg, qrCodeUrl, index) {
let id = 'shareCanvas' + index
let posterCanvas = wx.createSelectorQuery().select('#' + id)
return new Promise((resolve, reject) => {
posterCanvas.fields({
node: true,
size: true
}).exec(res => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
// 绘制海报
wx.getImageInfo({
src: circleBg,
success: res => {
let imageUrl = res.path // 图片临时地址
let imageW = res.width
let imageH = res.height
let ratio = imageW / canvas.width // 获取比例
let imageObj = canvas.createImage()
imageObj.src = imageUrl
console.log(imageObj);
imageObj.onload = (res) => {
ctx.drawImage(imageObj, 0, 0, imageW / ratio, imageH / ratio);
// 绘制二维码
wx.getImageInfo({
src: qrCodeUrl,
success: res => {
let qrImageUrl = res.path
let qrImageW = 150 // 二维码大小
let qrRatio = ratio
let qrImageObj = canvas.createImage()
qrImageObj.src = qrImageUrl
qrImageObj.onload = (res) => {
ctx.drawImage(qrImageObj,canvas.width - (qrImageW +90) / qrRatio,canvas.height - (qrImageW + 90) / qrRatio, qrImageW / qrRatio,qrImageW / qrRatio)
// canvas转图片临时路径
wx.canvasToTempFilePath({
canvas: canvas,
fileType: 'png',
success: res => {
let data = {
'img': res.tempFilePath,
'id': index
}
resolve(data)
},
fail: err => {
reject(err)
}
})
}
},
fail: err => {
reject(err)
},
})
}
},
fail: err => {
reject(err)
},
})
})
})
},
// 数组排序
sort(arr) {
for (var j = 0; j < arr.length - 1; j++) {
//两两比较，如果前一个比后一个大，则交换位置。
for (var i = 0; i < arr.length - 1 - j; i++) {
if (arr[i].id > arr[i + 1].id) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
}
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取邀请码
_request.get('/recomUser/findReCode', {
userId: wx.getStorageSync('userid'),
}).then((res) => {
this.setData({
invitecode: res.data.data.invitecode
})
// 获取邀请二维码
_request.get('/basicSetting/getWXShareQrCode', {
referralCode: this.data.invitecode,
userId: wx.getStorageSync('userid')
}).then((res) => {
this.setData({
codeimg: res.data.data
})
// 绘制背景海报到canvas
const {
imglist,
codeimg,
bannerlist
} = this.data
let list = []
imglist.map((item, index) => {
this.drawPoster1(item.img, this.data.codeimg, index).then(res => {
console.log(item.img, codeimg, 'sss');
list.push(res)
this.sort(list)
this.setData({
bannerlist: list,
showimg: list[0].img
})
})
})
console.log(res.data.data);
}).catch((error) => {
console.log(error, 'error');
})
}).catch((error) => {
console.log(error, 'error');
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
// 设置菜单中的转发按钮触发转发事件时的转发内容
if (res.from === 'button') {
// 来自页面内转发按钮
}
let title = '好友邀请您上小程序领520大礼包！'
console.log(this.data.invitecode)
return {
title: title, // 默认是小程序的名称
path: 'firstpages/home/index?invitecode=' + this.data.invitecode,
success: function (res) {},
imageUrl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/saker.png',
}
}
})
/* 轮播 */
button {
font: inherit !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
line-height: unset !important;
text-align: inherit !important;
width: unset !important;
color: inherit !important;
position: initial !important;
box-sizing: inherit !important;
border: unset !important;
min-height: unset !important;
display: block !important;
}
button::after {
display: none;
}
.pages {
box-sizing: border-box;
padding-top: 60rpx;
overflow: hidden;
}
.box {
display: block;
overflow: hidden;
height: 968rpx;
box-sizing: border-box;
}
.swiper {
width: 100%;
height: 100%;
}
.swiperimg {
width: 600rpx;
height: 968rpx;
-o-object-fit: cover;
object-fit: cover;
}
.swiperitem {
padding: 0 20rpx;
box-sizing: border-box;
}
.btn {
height: 48rpx;
background: #FF8722;
box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
border-radius: 24rpx;
text-align: center;
color: white;
font-size: 28rpx;
line-height: 48rpx;
float: right;
padding: 0 20rpx;
box-sizing: border-box;
}
.flexbox {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
margin-top: 50rpx;
padding: 0 100rpx;
}
.codeimg {
width: 200rpx;
height: 200rpx;
position: absolute;
}
.canvas {
height: 1330rpx;
width: 750rpx;
}
.canvasbox {
width: 5000rpx;
float: left;
margin-left: 750rpx;
}
.img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.oreder-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.oreder-wrapperbox {
width: 640rpx;
position: absolute;
top: 120rpx;
height: 1030rpx;
display: flex;
justify-content: center;
border-radius: 5px;
}
.oreder-btn {
width: 510rpx;
height: 112rpx;
position: absolute;
bottom: 40rpx;
left: 66rpx;
}
.oreder-bg {
width: 640rpx;
height: 1030rpx;
position: absolute;
top: 50rpx;
}
.oreder-icon {
position: absolute;
bottom: -200rpx;
}
效果图
