這篇文章主要介紹微信小程序怎么使用canvas自適應(yīng)屏幕畫(huà)海報(bào)并保存圖片功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站公司2013年成立，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元軹城做網(wǎng)站,已為上家服務(wù),為軹城各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

我們的在開(kāi)發(fā)中常用的參考屏幕尺寸（iPhone6）為：375*667；

那么想要適應(yīng)其他尺寸的屏幕時(shí)只需按照iPhone6的繪制大小按比例進(jìn)行換算即可：

獲取系統(tǒng)屏幕尺寸

先利用wx.getSystemInfo （獲取系統(tǒng)信息）的API獲取屏幕寬度，然后除iPhone6的屏幕寬度，即可得到相對(duì)單位

// 在onLoad中調(diào)用
const that = this
wx.getSystemInfo({
 success: function (res) {
  console.log(res)
  that.setData({
   model: res.model,
   screen_width: res.windowWidth/375,
   screen_height: res.windowHeight
  })
 }
})

在繪制方法中將參數(shù)乘以相對(duì)單位即可實(shí)現(xiàn)自適應(yīng)

這里的rpx是相對(duì)不同屏幕寬度的相對(duì)單位，測(cè)量出得實(shí)際寬度，就是實(shí)際測(cè)出的px像素值*rpx就可以了；之后無(wú)論實(shí)在iPhone5，iPhone6，iPhone7...都可以進(jìn)行自適應(yīng)。

這里的html也要?jiǎng)討B(tài)的設(shè)置寬和高

drawPoster(){
  let ctx = wx.createCanvasContext('PosterCanvas'),that=this.data;
  console.log('手機(jī)型號(hào)' + that.model,'寬'+that.screen_width*375,'高'+ that.screen_height)
  let rpx = that.screen_width
  //這里的rpx是相對(duì)不同屏幕寬度的相對(duì)單位，實(shí)際的寬度測(cè)量，就是實(shí)際測(cè)出的px像素值*rpx就可以了；之后無(wú)論實(shí)在iPhone5，iPhone6，iPhone7...都可以進(jìn)行自適應(yīng)。
  ctx.setFillStyle('#1A1A1A')
  ctx.fillRect(0, 0, rpx * 375, that.screen_height * 1.21)
  ctx.fillStyle = "#E8CDAA";
  ctx.setFontSize(29*rpx)
  ctx.font = 'normal 400 Source Han Sans CN';
  ctx.fillText('Hi 朋友', 133*rpx,66*rpx)
  ctx.fillText('先領(lǐng)禮品再買(mǎi)車(chē)', 84*rpx, 119*rpx)
  ctx.drawImage('../../img/sell_index5.png', 26*rpx, 185*rpx, 324*rpx, 314*rpx)
  ctx.drawImage('../../img/post_car2x.png', 66 * rpx, 222 * rpx, 243 * rpx, 145 * rpx)
  ctx.setFontSize(16*rpx)
  ctx.font = 'normal 400 Source Han Sans CN';
  ctx.fillText('長(zhǎng)按掃描獲取更多優(yōu)惠', 108*rpx, 545*rpx)
  ctx.drawImage('../../img/code_icon2x.png', 68 * rpx, 575 * rpx, 79 * rpx, 79 * rpx)
  ctx.drawImage('../../img/code2_icon2x.png', 229 * rpx, 575 * rpx, 79 * rpx, 79 * rpx)
  ctx.setStrokeStyle('#666666')
  ctx.setLineWidth(1*rpx)
  ctx.lineTo(187*rpx,602*rpx)
  ctx.lineTo(187*rpx, 630*rpx)
  ctx.stroke()
  ctx.fillStyle = "#fff"
  ctx.setFontSize(13 * rpx)
  ctx.fillText('xxx科技汽車(chē)銷(xiāo)售公司', 119 * rpx, 663 * rpx)
  ctx.fillStyle = "#666666"
  ctx.fillText('朝陽(yáng)區(qū)·望京xxx科技大廈', 109 * rpx, 689 * rpx)
  ctx.setFillStyle('#fff')
  ctx.draw()
 },

保存到相冊(cè)

很簡(jiǎn)單就是在畫(huà)完圖片之后的draw回調(diào)函數(shù)里調(diào)用canvasToTempFilePath()生產(chǎn)一個(gè)零時(shí)內(nèi)存里的鏈接，然后在調(diào)用saveImageToPhotosAlbum()就可以了；其中牽扯到授權(quán)，如果你第一次拒絕了授權(quán)，你第二次進(jìn)入的時(shí)候在iphone手機(jī)上是不會(huì)再次提醒你授權(quán)的，這時(shí)就需要你手動(dòng)調(diào)用了；以下附上代碼！

ctx.draw(true, ()=>{
    // console.log('畫(huà)完了')
    wx.canvasToTempFilePath()({
     x: 0,
     y: 0,
     width: rpx * 375,
     height: that.screen_height * 1.21,
     canvasId: 'PosterCanvas',
     success: function (res) {
      // console.log(res.tempFilePath);
      wx.saveImageToPhotosAlbum({
       filePath: res.tempFilePath,
       success: (res) => {
        console.log(res)
       },
       fail: (err) => { }
      })

     }
    }) 
   })

拒絕授權(quán)后再次提醒授權(quán)的代碼

mpvue.saveImageToPhotosAlbum({
    filePath: __path,
    success(res) {
     mpvue.showToast({
     title: '保存成功',
     icon: 'success',
     duration: 800,
     mask:true
     });
     },
    fail(res) {
      if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {

     mpvue.showModal({
        title: '提示',
        content: '需要您授權(quán)保存相冊(cè)',
        showCancel: false,
        success:modalSuccess=>{
         mpvue.openSetting({
          success(settingdata) {
           // console.log("settingdata", settingdata)
           if (settingdata.authSetting['scope.writePhotosAlbum']) {
            mpvue.showModal({
             title: '提示',
             content: '獲取權(quán)限成功,再次點(diǎn)擊圖片即可保存',
             showCancel: false,
            })
           } else {
            mpvue.showModal({
             title: '提示',
             content: '獲取權(quán)限失敗，將無(wú)法保存到相冊(cè)哦~',
             showCancel: false,
            })
           }
          },
          fail(failData) {
           console.log("failData",failData)
          },
          complete(finishData) {
           console.log("finishData", finishData)
          }
         })
        }
       })
     }
     }
   });

以上是“微信小程序怎么使用canvas自適應(yīng)屏幕畫(huà)海報(bào)并保存圖片功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！