【精】微信小程序生成二维码海报分享 [原理+源码]_使用hbuilder实现小程序海报生成二维码分享功能

关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定;

首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边走边理解;

这篇教程记录自己实现海报过程

如果有错误欢迎指正

转载请带源链接

开始前先理解原理 

问: 什么是海报分享?

答: 就是保存一张图片到手机相册, 这个图片带有自定义内容比如二维码, 文字等; 

效果如下:

(以下内容已上线可搜索小绿抑郁测试助手, 答题后就能看到海报图效果)

 

问: 如何实现二维码插入到图片?

答: 用Canvas绘图; 首先用Canvas新建画布, canvas能把图片插到画布上,再把二维码,文字插到画布上;

原理如下:

---

就这样? No!!! 需要注意两点!!!

第一点:  canvas保存到本地, 图片会压缩.

解决办法: 放大画布(图片), 比如你最终要保存iphone5(大小320*568)的图片, 就新建一个640*1136的画(也即是乘以2倍), 这样保存到本地就清晰了;

第二点:  根据第一点放大图后, 开发是640*1136图, 页面显示不下, 这时候就要对图片缩放, 其中zoom和scale可以缩小图片(如: zoom:40%), 但是zoom和scale这两个参数在手机上是无效的, 仅微信开发工具有效!!! 这点请知晓.

解决办法:  开发中画图的时候用zoom/scale缩小画布, 调试好文字和二维码显示在图片上的位置后, 把画布浮动隐藏起来(position:absolute; left: -9999px); 然后用正常的css布局一个页面(用来给用户看), 也就是做两个, canvas做的图片是要保存到本地的, 而利用css定位做的布局是手机中给用户看的;

给用户看的效果如下:

还不理解看下图, 你品, 细品 :  

这种保存方法是参考小鹿茶的, 但是小鹿茶轮播卡顿, 我估计是每切换一次图片就生成一次canvas图, 而我是点击保存到相册才生成canvas图, 体验会更好;(不明白打开我的小程序题目测试后就能看到海报分享,然后打开小鹿茶小程序, 找到海报分享对比一下)

---

以上就是微信小程序生成海报图的原理;

接下来是精简代码介绍实现过程, 源码教程最后附上链接;

实现流程

1. 获取屏幕参数: 

//js
//页面加载触发的生命周期
onLoad(options) {
    let that = this;
    //获取手机系统信息
    wx.getSystemInfo({
      success(res) {
        // 屏幕宽高各乘2倍, 宽高保存到data, 供html用
        that.width = res.screenWidth * 2;
        that.height = res.screenHeight * 2;
      }
    });
  }

2. 创建canvas :

//html
//在页面加载的时候获取到了保存到data了, 所以这里调用了data的宽高; 然后这个宽高在开发中页面是显示不下的, 所以要缩放, 用zoom
<canvas canvas-id="canvasPoster" style="width:{{width}}px;height:{{height}}px;zoom:40%;"></canvas>

3. 绘制canvas并保存 : 

//JS
let that = this
let ctx = wx.createCanvasContext('canvasPoster', this);
//插入图片
ctx.drawImage(本地图片地址, 0, 0, that.width, that.height);//宽高和画布一致
 
//插入二维码
ctx.drawImage(本地二维码地址, 坐标X, 坐标Y, 宽, 高);
 
//插入分值结果文字
ctx.fillText(文字, 坐标X, 坐标Y);
 
//插入内容完了上屏
ctx.draw();
 
//然后生成一个保存用的临时地址, 因为安卓机兼容问题, 所以方法要延迟.
setTimeout(() => {
 
   wx.canvasToTempFilePath({
       canvasId: 'canvasPoster',
       x: 0,
       y: 0,
       width: that.width,
       height: that.height,
       destWidth: that.width,
       destHeight: that.height,
       success: res => {
           let path = res.tempFilePath//获取到了临时地址
           //保存图片
           wx.saveImageToPhotosAlbum({
              filePath: path,
              success: () => {
                wx.showToast({
                  title: '保存成功',
                  icon: 'none'
                })
              }
           });
 
       }
    });
 
}, 200);

*以上示例是本地图片,如果是网络图片, 要用wx.getImageInfo方法生成一个本地的暂存路径, canvas才能使用,方法如下:

wx.getImageInfo({
    src: '网络图片地址',
    success(res) {
        console.log(res.path)//临时地址
    }
})

---

写在最后, 如果你觉得本文帮助到你了,  帮忙点个赞,  或者留个言,  让更多人少走弯路, 少加班.

源码地址: https://github.com/kangaroo711/WeChat-Poster-Sharing