//将网络图片转换为本地路径 handleNetImg: function(imagePath) { var that = this; return new Promise((resolve, reject) => { wx.getImageInfo({ src: imagePath, success: function(res) { resolve(res); } }); }); } handleNetImg('网络图片地址').then((res) => { console.log(res.path); //输出转换后的本地图片路径 ctx.drawImage(res.path, 0, 0, width, height); //此时图片即可在画布上绘制出来 })
base64 图片
使用 ctx.drawImage(base64Data, 0, 0, width, height) 在小程序开发者工具上是可以绘制的， 然而！！！这个大骗纸！！！真机上是失效的！！！（心碎一分钟。。。）
跟上面类似的思路，我们把 base64的图片 转为本地的 png图片
var handleBase64Img = function() { //wx.getFileSystemManager 小程序文件管理器 var fsm = wx.getFileSystemManager(); var FILE_NAME = 'base64src'; var base64src = function(base64data) { return new Promise((resolve, reject) => { //解析base64，提取出图片类型: imgtype,解析内容bodyData（去掉data:image/png;base64,以后的内容） var [, imgType, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; if (!imgType) { reject(new Error('ERROR_BASE64SRC_PARSE')); } /** *wx.env.USER_DATA_PATH *本地用户文件 *本地用户文件是从 1.7.0 版本开始新增的概念。提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。 */ var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`; //按指定写入文件的字符编码encoding，向地址filepath，写入数据data。 fsm.writeFile({ filePath, data: bodyData, encoding: 'base64', success() { resolve(filePath); }, fail() { reject(new Error('ERROR_BASE64SRC_WRITE')); }, }); }); }; return base64src; } var base64src = that.handleBase64Img(); var handleBase64src = base64src(base64data); handleBase64src.then(res => { //res 即为base64 转化为图片后的本地路径，即可在画布上绘制成功 that.ctx.drawImage(res, left, top, width, height); });
通过上述的一些内容，我们已经知道如何利用 canvas 把图片和文字绘制在一起后生成一张新的图片，这里就产生了一个新的问题: 我们如何把生成的图片保存下来呢 ？？？ 我们接着往细看canvas 生成图片后如何保存到本地
canvas 生成图片后如何保存到相册中想要保存到相册中第一步首先当然是要获得访问相册的权限！！！
//访问相册授权 wx.getSetting({ success: (res) => { //检查是否有访问相册的权限，如果没有则通过wx.authorize方法授权(授权只需要一次就好，后面就可以直接访问相册) if (!res.authSetting['scope.writePhotosAlbum']) { console.log('没有获取授权'); wx.authorize({ scope: 'scope.writePhotosAlbum', success: (res) => { //用户点击允许获取相册信息后逻辑进入这里,如上图所示 } }) } } }); //获取了相册的访问权限，使用 wx.saveImageToPhotosAlbum 将图片保存到相册中 wx.saveImageToPhotosAlbum({ filePath: that.data.sharePicPath, success: (res) => { //保存成功弹出提示，告知一下用户 wx.showModal({ title: '已保存到手机相册', content: '将图片发送到朋友圈，邀请好友加入', confirmColor: '#0bc183', confirmText: '知道了', showCancel: false }) } })
如何生成小程序码及验证小程序码所带信息在小程序的分享朋友圈的解决方案中，往往在生成的海报页面中都会有一个小程序码，使得用户有进入小程序的入口，那么这个小程序码如何生成呢？
官方文档:获取小程序码
注意：因为生成小程序码的接口参数需要 access_token，安全起见，一般都通过后台调用在拿到base64的数据在返回给前端。
我们在回到正题:
上述三种生成接口，大家根据情况按需使用，因为我的项目里，需要经常生成不同页面对应的小程序码， B 类接口比较符合我的要求，这里就重点描述下 B 类接口的 使用 和 自测
B 类接口入参，出参官方说明-- 接口 B：适用于需要的码数量极多的业务场景
重点看下 scene : 最大32个可见字符，有页面路径带参数的情况下要尤其注意！！！
把 page , scene 等参数传递给后台后，后台调用 B 类接口，返回给前端一个base64的图片数据，我们把这个数据绘制到海报上就好！！！
绘制方法上面已经说过canvas 对不同来源图片的处理（本地图片， 网络图片 ， base64图片 ）
现在小程序码的图片已经生成了，那么我们要如何自测呢？怎么才能知道小程序码中所携带信息是否正确呢？
官方给出的方法:
上述方法在开发阶段是比较方便，但是在正式的提测阶段，此种方式显得有些牵强，有人想到真机调试？
官方接口只能生成已发布的小程序的二维码
也就是说，你扫码就连上生产环境了！！！没有办法调试，那到底怎么办呢？？？
解决办法就要借助强大的小程序开发者工具啦！！！
首先把生成的小程序码保存到电脑里，方法见上述canvas 生成图片后如何保存到本地部分。
然后通过开发者工具选择二维码编译模式，文件夹中选择带有小程序码的图片即可！！！
注意： 获取 scene 值时要 decodeURIComponent
Page({ onLoad(query) { // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene const scene = decodeURIComponent(query.scene) } })
抽离配置文件，使绘制更加灵活
我们观察如下一个小程序海报:
