• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序生成指定页面小程序码海报图片分享思路总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  本博客主要说下思路,具体代码不贴

1、考虑到组件复用,所以我把它做成一个自定义的组件

<my-poster
  id="getPoster"
  avater="{{imageUrl}}"
  knowledges="{{klPoster}}"
  scene="{{topicId}}">
</my-poster>

  可以传图片avater、文字内容knowledges、页面参数scene

2、组件里面首先是得需要一个画布。

  画布外可以正常写元素标签,定义样式

<view class="mask_screen" wx:if="{{showpost}}">
  <view class=\'poster_box\'>
    <view class=\'poster_content\' id=\'canvas-container\'>
      <canvas canvas-id="myCanvas" style="width:100%;height:{{canvasHeight}}px;" />
    </view>
    <view class=\'tips\'>保存图片,分享给小伙伴吧</view>
    <view class=\'save\' bindtap=\'saveShareImg\'>
      <image class=\'down\' mode=\'widthFix\' src=\'../../assets/dbs/down.png\'></image>
      <text>保存</text>
    </view>
    <image class=\'close\'  bindtap=\'closePoste\' mode=\'widthFix\' src=\'../../assets/dbs/close.png\'></image>
  </view>
</view>

3、画布准备好之后,就是需要准备画图的一些资源,比如图片之类的

  网络图片需利用微信接口 wx.downloadFile 下载下来之后,获取图片的临时地址,根据该临时地址才可以画图;

  如果是工程类图片,只需要写好路径,即可以画图。比如:

    // 网络图片
    if (topicImage) {
        wx.downloadFile({
          url: topicImage,
          success: function(res) {
            wx.hideLoading();
            if (res.statusCode === 200) {
              var productSrc = res.tempFilePath;
              that.calculateImg(productSrc, function(data) {
                that.getCode(productSrc, data)
              })
            }
          }
        })
      }

// 工程内图片
let dbicon = \'../../assets/dbs/\' + item.type + \'.png\';
ctx.drawImage(dbicon, 15, offsetHeight + 10, 10, 10)

4、有些图片可能要计算宽高的,需要利用微信接口 wx.getImageInfo 获取图片宽高等信息,wx.getSystemInfo 获取手机屏幕宽高等信息,根据比例去计算绘制

//计算图片尺寸
    calculateImg: function(src, cb) {
      var that = this;
      wx.getImageInfo({
        src: src,
        success(res) {
          wx.getSystemInfo({
            success(res2) {
              var ratio = res.width / res.height;
              var imgHeight = res2.windowWidth * 0.6 / ratio;
              // var screeRratio = res2.screenWidth / res2.screenHeight
              that.setData({
                canvasHeight: imgHeight + 280
                // canvasHeight: res2.windowWidth * 0.5 / screeRratio
              })
              cb(imgHeight);
            }
          })
        }
      })
    }

5、再就是获取页面的小程序码,微信文档有介绍:三种接口获取方式

  获取小程序码:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

6、绘制文字换行问题,上一篇有介绍

7、图片生成之后,保存图片。主要利用微信接口 wx.canvasToTempFilePath 和 wx.saveImageToPhotosAlbum

//点击保存到相册
    saveShareImg: function() {
      var that = this;
      wx.showLoading({
        title: \'正在保存\',
        mask: true,
      })
      setTimeout(function() {
        wx.canvasToTempFilePath({
          canvasId: \'myCanvas\',
          success: function(res) {
            wx.hideLoading();
            var tempFilePath = res.tempFilePath;
            wx.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success(res) {
                wx.showModal({
                  content: \'图片已保存到相册,赶紧晒一下吧~\',
                  showCancel: false,
                  confirmText: \'好的\',
                  confirmColor: \'#333\',
                  success: function(res) {
                    that.closePoste();
                    if (res.confirm) {}
                  },
                  fail: function(res) {
                    console.log(res)
                  }
                })
              },
              fail: function(res) {
                wx.showToast({
                  title: res.errMsg,
                  icon: \'none\',
                  duration: 2000
                })
              }
            })
          },
          fail: function(err) {
            console.log(err)
          }
        }, that);
      }, 1000);
    },

8、注意事项:

(1)图片要提前下载:这里面有一个问题就是,图片要提前下载完之后再绘图,不然图片显示不出来,可以把下载图片的方法单独拎出来,然后下载图片后回调绘图方法。

(2)ctx.draw(),这个方法是在绘制完成之后在调用,不然容易其它被覆盖。

  大致思路就是如此。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
封装微信小程序路由跳转发布时间:2022-07-18
下一篇:
小程序 webView 内嵌h5发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap