微信小程序生成海报的代码如下：
promisify文件：
module.exports = {
promisify: api => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
const extras = {
success: resolve,
fail: reject
}
api({ ...options, ...extras }, ...params)
})
}
}
}
开始：
import {promisify} from './promisify'
const wxGetImageInfo = promisify(wx.getImageInfo)
// 图标路径
const [localtionIconUrl, timeIconUrl, assemblyPointIconUrl] = ['/img/icons/localtion.png', '/img/icons/time.png', '/img/icons/assembly-point .png']
// 是否是大屏幕
const isLargeScreen = wx.getSystemInfoSync().windowHeight > 516
// canvas 宽、高、内边距
const [cvsW, cvsH, cvsPL, cvsPT, cvsPB] = [300, 516, 16, 22, 70]
// 封面图片宽高
const [coverImgW, coverImgH, qrImgH, qrImgW] = [300, isLargeScreen ? 180 : 150, 90, 90]
// 字体内边距、字体大小、字体颜色
const [fontPL, fontPT, fontSize18, fontSize14, colorBlack, colorGray, colorRed] = [55, 45, 18, 14, '#141414', '#666', 'red']
// 字体分割显示缩略
function helpFontSplit (str, lineNum = 1) {
const maxChar = 12
const len = str.length
let res
if (len <= maxChar) {// 小于一行
res = [str]
} else if (len <= maxChar * lineNum) {// 小于指定行数
res = [str.slice(0, maxChar), str.slice(maxChar, 37)]
} else {//大于指定行数
let temp = []
for (let i = 0; i < lineNum; i++) {
if (i === lineNum - 1) {
temp.push(str.slice(maxChar * i, (i + 1) * maxChar - 3) + '...')
} else {
temp.push(str.slice(maxChar * i, (i + 1) * maxChar))
}
}
res = temp
}
return lineNum > 1 ? res :[res][0]
}
// 日期格式化
function helpFormatDate (dateArr) {
if (!Array.isArray(dateArr)) {
return
}
return dateArr.map(item => {
const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
let startArr = item.activity_start.split('-')
let endArr = item.activity_end.split('-')
let start = new Date(startArr.join('/'))
let end = new Date(endArr.join('/'))
return startArr.splice(1, 2).join('.') + week[start.getDay()] + '~' + endArr.splice(1, 2).join('.') + week[end.getDay()]
})
}
// canvas转换成图片
export class Canvas2Image {
constructor(param, qrUrl) {
this.param = param
this.qrUrl = qrUrl
this.isSingle = param.price_date.length == '1'
}
getImg (callback) {
const qrUrl = this.qrUrl
const coverUrl = this.param.thumb_img
Promise.all([ // url是服务器地址
// icon - 1
wxGetImageInfo({
src: url+ localtionIconUrl
}),
// icon - 2
wxGetImageInfo({
src: url + timeIconUrl
}),
// icon - 3
wxGetImageInfo({
src: url+ assemblyPointIconUrl
}),
// 封面图
wxGetImageInfo({
src: coverUrl
}),
// 小程序码图
wxGetImageInfo({
src: url+ qrUrl
})
]).then(res => {
callback && callback(res)
})
}
render (canvasId, callback) {
this.getImg(res => {
console.log('---图片就绪---')
console.log(res)
// 图片路径
const [{path: localtionIconPath}, {path: timeIconPath}, {path: assemblyPointIconPath}, {path: coverImgPath}, {path: qrImgPath}] = res
const {activity_name: title, resort: resort, price_list: prices, price_date: times} = this.param
const ctx = wx.createCanvasContext(canvasId)
console.log('---绘图开始---')
this.drawCover(ctx, coverImgPath)
this.drawIcon(ctx, localtionIconPath, timeIconPath, assemblyPointIconPath)
this.drawTitle(ctx, helpFontSplit(title, 2))
this.drawLocaltion(ctx, resort)
this.drawTime(ctx, helpFormatDate(times))
this.drawResort (ctx, resort)
this.drawQrImage (ctx, qrImgPath)
this.drawPrices (ctx, prices)
ctx.draw(false, function () {
console.log('---canvas绘图完成---')
callback && callback()
})
})
}
// 绘制封面
drawCover (ctx, coverImgPath) {
ctx.drawImage(coverImgPath, 0, 0, coverImgW, coverImgH)
}
// 绘制图标
drawIcon (ctx, localtionIconPath, timeIconPath, assemblyPointIconPath) {
ctx.drawImage(localtionIconPath, fontPL - 20, coverImgH + fontPT * 2.28, 15, 15)
ctx.drawImage(timeIconPath, fontPL - 20, coverImgH + fontPT * 2.88, 15, 15)
if (this.isSingle) {
ctx.drawImage(assemblyPointIconPath, fontPL - 20, coverImgH + fontPT * 3.54, 15, 15)
} else {
ctx.drawImage(assemblyPointIconPath, fontPL - 20, coverImgH + fontPT * 4.45, 15, 15)
}
}
// 绘制标题
drawTitle (ctx, title) {
ctx.setTextAlign('left') // 文字居中
ctx.setFillStyle(colorBlack) // 文字颜色
ctx.setFontSize(fontSize18) // 文字字号：18px
ctx.fillText(title[0], fontPL - 20, coverImgH + fontPT)
title[1] && ctx.fillText(title[1], fontPL - 20, coverImgH + fontPT * 1.6)
}
// 绘制地点
drawLocaltion (ctx, adress) {
// 活动时间、地点
ctx.setFillStyle(colorGray) // 文字颜色
ctx.setFontSize(fontSize14) // 文字字号：14px
ctx.fillText('集合地点: ' + helpFontSplit(adress), fontPL, coverImgH + fontPT * 2.55)
}
// 绘制班期
drawTime (ctx, times) {
ctx.fillText('活动时间 : ' + times[0], fontPL, coverImgH + fontPT * 3.15)
if (!this.isSingle) {
times[1] && ctx.fillText(times[1], fontPL + 70, coverImgH + fontPT * 3.6)
times[2] && ctx.fillText(times[2], fontPL + 70, coverImgH + fontPT * 4)
}
}
// 绘制集合地点
drawResort (ctx, resort) {
if (this.isSingle) {
ctx.fillText('集合地点: ' + helpFontSplit(resort), fontPL, coverImgH + fontPT * 3.8)
} else {
ctx.fillText('集合地点: ' + helpFontSplit(resort), fontPL, coverImgH + fontPT * 4.7)
}
}
// 绘制小程序二维码
drawQrImage (ctx, qrImgPath) {
if (isLargeScreen) {
ctx.drawImage(qrImgPath, cvsW - qrImgW - cvsPL - 16, cvsH - qrImgH - cvsPB + 50, qrImgW, qrImgH)
} else {
ctx.drawImage(qrImgPath, cvsW - qrImgW - cvsPL + 10, cvsH - qrImgH - cvsPB + 10, qrImgW - 10, qrImgH - 10)
}
}
// 绘制价格
drawPrices (ctx, prices) {
const priceLabel = ['', '成人价: ', '儿童价: ', '老人价: ']
const baseNum = 5.3
const increment = 0.6
if (Array.isArray(prices)) {
prices.forEach((item, index) => {
ctx.setFillStyle(colorGray)
ctx.fillText(priceLabel[item.type], fontPL - 20, coverImgH + fontPT * (baseNum + index * increment))
ctx.setFillStyle(colorRed)
ctx.fillText('￥' + item.price, fontPL + 35, coverImgH + fontPT * (baseNum + index * increment))
})
}
ctx.stroke()
}
}
// 保存至本地
export function saveCanvasImage2Local(canvasId, callback) {
console.log('---准备保存到本地---')
const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath)
const wxSaveImageToPhotosAlbum = promisify(wx.saveImageToPhotosAlbum)
wxCanvasToTempFilePath({
canvasId: canvasId
}, this).then(res => {
console.log('---保存到本地就绪---')
callback && callback()
return wxSaveImageToPhotosAlbum({
filePath: res.tempFilePath
})
}).then(res => {
wx.showModal({...{
title: '',
content: '这是一个模态弹窗',
cancelText: '取消',
cancelColor: '#505050',
confirmText: '确定',
confirmColor: '#ff4558',
showCancel: true,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
}, ...config})
// wx.showToast({
// title: '已保存到相册'
// })
})
}