微信小程序生成海报及源代码

微信小程序生成海报的代码如下：

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: '已保存到相册' // }) }) }

• « 上一篇：《人工智能杂记》人工智能简史
• » 下一篇：程序员如何避免被人误解职业？