用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 新手教程 騰訊云相關 查看內容

小程序生成海報代碼分享

Rolan 2019-7-12 00:21

最近趁垃圾分類這個熱點,做了一個小程序,里面有一個模塊是答題活動,題目答完之后,會生成分數海報,具體如下圖所示這里涉及微信小程序的幾個知識點如下獲取用戶個人信息授權保存圖片到本地授權canvas文件操作以及 ...

最近趁垃圾分類這個熱點,做了一個小程序,里面有一個模塊是答題活動,題目答完之后,會生成分數海報,具體如下圖所示

這里涉及微信小程序的幾個知識點如下

  1. 獲取用戶個人信息授權
  2. 保存圖片到本地授權
  3. canvas
  4. 文件操作

以及下面幾個API

  1. wx.getImageInfo
  2. wx.downloadFile
  3. wx.saveFile
  4. wx.createCanvasContext
  5. wx.canvasToTempFilePath
  6. wx.getSetting
  7. wx.saveImageToPhotosAlbum
  8. wx.authorize
  9. wx.saveImageToPhotosAlbum

獲取背景圖片

promiseBdImg: function(){
    const _this = this
    const bdImagePath = '../../static/images/common/'
    return new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: bdImagePath + "base.png",
        success: function (res) {
          console.log('promiseBdImg', res)
          resolve(res);
        },
        fail: function(err){
          console.log('2019062007');
          console.log(err);
        }
      })  
    });
  },

將背景圖片

onReady: function () {
    const _this = this

    //默認進入頁面就生成背景圖
    var windowWidth = this.data.windowWidth;
    var posterHeight = this.data.posterHeight;
    this.promiseBdImg().then(res => {
      console.log('Promise.all', res)
      const ctx = wx.createCanvasContext('shareImg')
      ctx.width = windowWidth
      ctx.height = posterHeight
      console.log(windowWidth, posterHeight)
      //主要就是計算好各個圖文的位置
      ctx.drawImage('../../' + res.path, 0, 0, windowWidth, posterHeight, 0, 0)
      ctx.save() // 對當前區域保存
      ctx.draw()

    }).then( () => {
    
    })    
  },

生成海報圖片

generateImage: function(e){
    app.globalData.userInfo = e.detail.userInfo
    let userInfo = e.detail.userInfo
    console.log('userInfo', userInfo)
    // 更新用戶信息
    // api.post('更新用戶信息的url', userInfo)
    this.setData({
      userInfo: e.detail.userInfo
    });

    console.log('2019062006');
    // 頭像
    // let promiseAvatarUrl = new Promise(function (resolve, reject) {
    //   resolve(wx.getStorageSync('avatarUrl'))
    // }).catch(res=>{
    //   console.log('catch',res)
    // });

    wx.showLoading({
      title: '正在生成海報,請稍后'
    })

    let avatarUrl = userInfo.avatarUrl;
    let nickName = userInfo.nickName;
    let promiseAvatarUrl = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: avatarUrl,
        success: function (res) {
          console.log('promiseAvatarImg', res)
          resolve(res);
        },
        fail: function(err){
          console.log('2019070501');
          console.log(err);
        }
      })  
    });

    const _this = this

    const qrImagePath = '../../qrcode/'
    let promiseQrcodeImg = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: qrImagePath + "gh_d2778c07ec2e_258.jpg",
        success: function (res) {
          console.log('promiseQrcodeImg', res)
          resolve(res);
        },
        fail: function(err){
          console.log('2019062007');
          console.log(err);
        }
      })  
    });    

    var windowWidth = this.data.windowWidth;
    var posterHeight = this.data.posterHeight;
    Promise.all([
      promiseAvatarUrl, promiseQrcodeImg
    ]).then(res => {
      console.log('Promise.all', res)
      const ctx = wx.createCanvasContext('shareImg')
      ctx.width = windowWidth
      ctx.height = posterHeight
      console.log(windowWidth, posterHeight)
      //主要就是計算好各個圖文的位置
      
      ctx.drawImage(res[0].path,148, 10, 75, 75, 0, 0) // 把圖片填充進裁剪的圓形
      ctx.restore() // 恢復
      ctx.save()
      
      ctx.beginPath() // 開始新的區域
      ctx.drawImage('../../' + res[1].path, 128, 266, 94, 94, 0, 0) // 把圖片填充進裁剪的圓形
      ctx.restore() // 恢復
      ctx.save()

      ctx.beginPath();
      ctx.setTextAlign('center')
      ctx.setFillStyle('#000')
      ctx.setFontSize(22)      
      ctx.fillText('得分'+_this.data.score, 180, 250)
      ctx.setFontSize(18) 
      ctx.fillText('歡迎'+ nickName +'參加垃圾分類答題活動', 180, 414)
      ctx.stroke()
      ctx.draw(true)

    }).then( () => {
      wx.hideLoading()
    })
  },

將海報圖片保存到本地圖片如下所示

saveImage: function(){
    var windowWidth = this.data.windowWidth;
    var posterHeight = this.data.posterHeight;

    var _this = this
    wx.showLoading({
      title: '正在保存海報,請稍后'
    })
    new Promise(function (resolve, reject) {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: windowWidth*2,
        height: posterHeight*2,
        destWidth: windowWidth*2,
        destHeight: posterHeight*2,
        canvasId: 'shareImg',
        success: function (res) {
          console.log(res.tempFilePath);
          _this.setData({
            prurl: res.tempFilePath,
            hidden: false
          })
          resolve(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    }).then(res => {
      console.log(res)
      this.save(res)
    })
  },

具體代碼請移步 https://gitee.com/jgl1210/laj...

有不懂得可以在評論區留言

鮮花
鮮花 (1)
雞蛋
雞蛋

剛表態過的朋友 (1 人)

分享至 : QQ空間
收藏
原作者: 小時光 來自: segmentfault
梦幻单人赚钱方法 三分彩怎么玩 股票行情600326 短线股票 加拿大28在线预测99 湖南福彩快乐十分开奖 福彩3d综合版走势图带连线 凯恩斯45度线交叉图 快乐10分云南前三直 资产配置三种策略 黑龙江十一选五论坛