Code zum Generieren von Bildern im WeChat-Miniprogramm

Der Inhalt dieses Artikels befasst sich mit dem Code zum Generieren von Bildern im WeChat-Applet. Ich hoffe, dass er für Freunde hilfreich ist.

Leinwand hinzufügen

Zunächst müssen Sie die Komponente 5ba626b379994d53f7acf72a64f9b697 verwenden, um Zeichenvorgänge im Miniprogramm auszuführen. Die Schritte sind grob ist in die folgenden drei Teile unterteilt: Ein großes Hintergrundbild, ein dynamischer Text („Titel, Benutzername und andere Informationen“) und ein kleines Bild des Programmcodes. Dann fügen wir zuerst den folgenden 5ba626b379994d53f7acf72a64f9b697 in unseren WXML-Code ein:

<!--wxml代码-->
<view style=&#39;width:100%;height:100%;&#39; bindlongpress=&#39;saveInviteCard&#39;>
  <canvas canvas-id="shareCanvas" style="width:{{windowWidth}}px;height:{{windowHeight}}px" ></canvas>
</view>

Die Drittanbieterfunktion führt

const util = require('../../utils/util.js')

//util.js
var Promise = require('../components/bluebird.min.js')

module.exports = {
  promisify: api => {
    return (options, ...params) => {
      return new Promise((resolve, reject) => {
        const extras = {
          success: resolve,
          fail: reject
        }
        api({ ...options, ...extras }, ...params)
      })
    }
  }
}

bluebird.min.js ein file Der Code ist zu lang, deshalb werde ich ihn hier nicht kopieren und einfügen.

//获取手机宽高 
wx.getSystemInfo({
    success: function (res) {
      wc.put('phoneInfo', res)
    }
  });

var windowHeight = phoneInfo.windowHeight, windowWidth = phoneInfo.windowWidth
self.setData({
   windowHeight: windowHeight,
   windowWidth: windowWidth
 })

//在这段代码中，我们通过使用wx.getImageInfo这个API来下载一个网络图片到本地（并可获取该图片的尺寸等其他信息），然后调用ctx.drawImage方法将图片绘制到画布上，填满画布。

const wxGetImageInfo = util.promisify(wx.getImageInfo)
//绘制二维码
Promise.all([
      //背景图
      wxGetImageInfo({
        src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536213812443&di=753a0a49acfd390fba9fd7884daafa5c&imgtype=0&src=http%3A%2F%2Fi5.hexunimg.cn%2F2016-08-10%2F185422031.jpg'
      }),
      //二维码
      wxGetImageInfo({
        src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1898297765,3486952215&fm=26&gp=0.jpg'
      })
    ]).then(res => {
      console.log(res)
      if (res[0].errMsg == "getImageInfo:ok" && res[1].errMsg == "getImageInfo:ok"){
        const ctx = wx.createCanvasContext('shareCanvas')

        // 底图
        ctx.drawImage(res[0].path, 0, 0, windowWidth, windowHeight)

        //写入文字
        ctx.setTextAlign('center')    // 文字居中
        ctx.setFillStyle('#f3a721')  // 文字颜色：黑色
        ctx.setFontSize(22)         // 文字字号：22px
        ctx.fillText("作者：墜夢—Eric", windowWidth / 2, windowHeight / 2)

        // 小程序码
        const qrImgSize = 150
        ctx.drawImage(res[1].path, (windowWidth - qrImgSize) / 2, windowHeight / 1.8, qrImgSize, qrImgSize)

        ctx.stroke()
        ctx.draw()
      }else{
        wx.showToast({
          title: '邀请卡绘制失败!',
          image:'../../asset/images/warning.png'
        })
      }
 })

Auf diese Weise entsteht fast unser Sharing-Bild.

Drücken Sie lange auf das Bild, um es im Systemalbum zu speichern

Um es im Systemalbum des Benutzers zu speichern und diese Funktion zu erreichen, verlassen wir uns hauptsächlich auf die beiden APIs wx.canvasToTempFilePath und wx.saveImageToPhotosAlbum.

Der Hauptvorgang besteht darin, zunächst mit wx.canvasToTempFilePath das auf 5ba626b379994d53f7acf72a64f9b697 gezeichnete Bild in eine temporäre Datei zu generieren und es dann mit wx.saveImageToPhotosAlbum im Systemalbum zu speichern.

  //保存邀请卡
  saveInviteCard:function(){
    console.log('保存图片')
    const wxCanvasToTempFilePath = util.promisify(wx.canvasToTempFilePath)
    const wxSaveImageToPhotosAlbum = util.promisify(wx.saveImageToPhotosAlbum)

    wxCanvasToTempFilePath({
      canvasId: 'shareCanvas'
    }, this).then(res => {
      return wxSaveImageToPhotosAlbum({
        filePath: res.tempFilePath
      })
    }).then(res => {
      wx.showToast({
        title: '已保存到相册'
      })
    })
  }

Verwandte Empfehlungen:

WeChat Mini Program QR-Code-Canvas-Zeichnungsbeispiel, ausführliche Erklärung

WeChat Mini Program Canvas-Grundlagen im Detail Erklärung

Das obige ist der detaillierte Inhalt vonCode zum Generieren von Bildern im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!