【精】微信小程序生成二维码海报分享 [原理+源码]

怪兽monster
6,156 阅读4分钟

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

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

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

如果有错误欢迎指正

转载请带源链接

开始前先理解原理

问: 什么是海报分享?

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

效果如下:

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

img

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

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

原理如下:

img

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

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

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

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

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

给用户看的效果如下:

img

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

img

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

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

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

实现流程

1. 获取屏幕参数:

//js

// 初始化
data: {
    width: 0,
    height: 0,
 },
 
//页面加载触发的生命周期
onLoad(options) {
    let that = this;
    //获取手机系统信息
    wx.getSystemInfo({
      success(res) {
        // 屏幕宽高各乘2倍, 宽高保存到data, 供html用(如果你的图片宽高是固定的,直接在data设置你的图片宽高*2即可)
        that.setData({width: res.screenWidth * 2});
        that.setData({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.data.width, that.data.height);//宽高和画布一致

//插入二维码
ctx.drawImage(本地二维码地址, 坐标X, 坐标Y, 宽, 高);

//插入分值结果文字
ctx.fillText(文字, 坐标X, 坐标Y);

//插入内容完了上屏, 新版小程序canvas保存图片需要在draw回调里
ctx.draw(true,()=>{
  //然后生成一个保存用的临时地址, 因为安卓机兼容问题, 所以方法要延迟.
     wx.canvasToTempFilePath({
         canvasId: 'canvasPoster',
         x: 0,
         y: 0,
         width: that.data.width,
         height: that.data.height,
         destWidth: that.data.width,
         destHeight: that.data.height,
         success: res => {
             let path = res.tempFilePath//获取到了临时地址
             //保存图片
             wx.saveImageToPhotosAlbum({
                filePath: path,
                success: () => {
                  wx.showToast({
                    title: '保存成功',
                    icon: 'none'
                  })
                }
             });

         }
      },that);//新版小程序不加this不会执行
});

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

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

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

源码地址: github.com/kangaroo711…

avatar
文章
阅读
粉丝