위 챗 애플 릿 생 성 포스터 및 소스 코드

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: '      '
      // })
  })
}