canvas制作完美适配分享海报

基于mpvue实现的1080*1900小程序海报

html

  <canvas class="canvas" :style="'width:'+windowWidth+'px;height:'+windowWidth/(1080/1900)+'px;'" canvas-id="firstCanvas"></canvas> 

 

js

 const windowWidth = this.windowWidth
 const fit = 1080 / 1900 //dpr
 const widFit = windowWidth / 1080 //宽比 (像素375所以除2，下同理)
 const heiFit = windowWidth / fit // 750 / (1080 /1900)
 const ctx = wx.createCanvasContext('firstCanvas')
 ctx.save()
 ctx.drawImage(this.backgroundUrl, 0, 0, windowWidth, windowWidth/fit)

 ctx.save()
 ctx.beginPath()
 ctx.arc(206*widFit, 713/1900*heiFit, 53*widFit, 0, 2 * Math.PI)
 ctx.clip()
 ctx.drawImage(this.face, 153*widFit, 660/1900*heiFit, 106*widFit, 106*widFit)
 ctx.restore()

 ctx.save()
 ctx.beginPath()
 ctx.arc(540*widFit, 1602/1900*heiFit, 105*widFit, 0, 2 * Math.PI)
 ctx.clip()
 ctx.drawImage(this.qrcode, 435*widFit, 1497/1900*heiFit, 210*widFit, 210*widFit)
 ctx.restore()

 ctx.draw(false,function(){
 　　wx.canvasToTempFilePath({
 　　　　destWidth: 1080,
 　　　　destHeight: 1900,
 　　　　canvasId: 'firstCanvas',
 　　　　quality: 1,
 　　　　success(res) {
 　　　　　　console.log(res)
 　　　　},
 　　　　complete(fin){
 　　　　　　console.log('finish',fin)
 　　　　　　if(fin.tempFilePath){
 　　　　　　　　wx.saveImageToPhotosAlbum({
 　　　　　　　　　　filePath: fin.tempFilePath,
 　　　　　　　　　　success: (result)=>{
 　　　　　　　　　　　　wx.showToast({
 　　　　　　　　　　　　　　title: '保存图片成功',
 　　　　　　　　　　　　　　icon: 'none'
 　　　　　　　　　　　　})
 　　　　　　　　　　}
 　　　　　　　　})
 　　　　　　}
 　　　　}
 　　})
 })

 

核心主要是换算比例