• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

小程序生成海报代码解析

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0712/7656.html 1190000019736651

最近趁垃圾分类这个热点,做了一个小程序,实现的功能有

  1. 根据关键词查询垃圾类别
  2. 用户提交垃圾分类信息
  3. 垃圾分类答题活动
  4. 答题分数海报生成

里面有比较重要的模块是答题活动,题目答完之后,会生成分数海报,本次我单独把这个功能拎出来讲下

请扫描体验

图片描述

这里涉及微信小程序的几个知识点如下

  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);
        }
      })  
    });
  },

将背景图片提前绘制到canvas上,由于绘制海报需要三个图片资源:背景图片、头像、小程序二维码以及文字,能不在一起的尽量提前处理

特别是头像是网络资源,能早点拿到头像信息存储起来最好的

  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( () => {
    
    })    
  },

生成海报图片,这是该模块的核心代码,主要是将图片资源绘制到canvas上面,具体坐标定位这个细节还有待完善

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)
    })
  },

具体下载图片到本地

save: function(){
      wx.saveImageToPhotosAlbum({
        filePath: data.tempFilePath,
        success(result) {
          wx.hideLoading()
          wx.showModal({
            showCancel: false,
            title: '提示',
            content: '海报已保存到本地',
            success (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
          console.log(result)
        }
      })
}

具体代码请移步https://gitee.com/jgl1210/laj...

,具体如下图所示

图片描述
图片描述
图片描述
图片描述
有不懂得可以在评论区留言

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!