关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定;
首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边走边理解;
这篇教程记录自己实现海报过程
如果有错误欢迎指正
转载请带源链接
开始前先理解原理
问: 什么是海报分享?
答: 就是保存一张图片到手机相册, 这个图片带有自定义内容比如二维码, 文字等;
效果如下:
(以下内容已上线可搜索小绿抑郁测试助手, 答题后就能看到海报图效果)
问: 如何实现二维码插入到图片?
答: 用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)//临时地址
}
})写在最后, 如果你觉得本文帮助到你了, 帮忙点个赞, 或者留个言, 让更多人少走弯路, 少加班.
