小程序开发-利用canvas实现保存二维码海报到本机

场景及需求

在小程序开发过程中，经常需要实现保存某个页面为带小程序码的二维码海报图片到本地，然后用于分享或者发朋友圈等操作。

主要技术点及小程序相关api

技术注意事项

小程序的canvas与H5 canvas使用api大部分一致，但由于小程序中没有DOM节点的概念，所以不能使用很多现成的工具库
小程序canvas默认宽度300px、高度225px
小程序canvas相关的api中单位为px，并非rpx，所以在业务实现过程中需要处理适配
小程序canvas对跨域图片不支持，需要先将图片缓存到本地

技术点

wx.getImageInfo()
wx.getSystemInfo()
wx.canvasToTempFilePath()
wx.saveImageToPhotosAlbum()
canvas渲染相关api

整体流程

1.先获取所有图片资源，线上图片需要缓存到本地，使用图片的本地路径做渲染

2.获取设备信息，根据设备宽度计算出宽度因子x

3.绘制canvas

4.将canvas转化为图片，将图片保存到本机

实现

宽度因子x及元素宽度的尺寸计算

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

参考文档：小程序-WXSS-尺寸单位

由文档可以看出不同的设备，宽度是不同数值的px，但是均为750rpx，由此可以利用750rpx计算出宽度因子x:

设备宽度 / 750

以设计稿宽度750rpx为例，则在不同设备下，设计稿宽度y在不同设备下的px宽度均为：

Y = y * x

Y = y * (设备宽度 / 750)

由此，在实现中，canvas标签宽高需要设置为变量,且使用微信提供的 wx.getSystemInfo（） 接口获取设备宽度信息后，进行计算

<canvas canvas-id="qrcode-canvas" :style="{width: canvas.width + 'px', height: canvas.height + 'px'}"></canvas>
复制代码

// wx.js
// 获取设备基本信息
export function wxGetSystemInfo () {return new Promise(async function (resolve, reject) {wx.getSystemInfo({success: function (res) {resolve(res);},fail: function (err) {reject(err);}})});
}
// demo.vue
// 获取手机基本信息
async getPhoneSystemInfo () {let _this = this;let systemInfoRes = await wxGetSystemInfo();_this.canvas.width = systemInfoRes.screenWidth;// 设计稿宽高为 750 * 912_this.canvas.height = 912 / 750 * _this.canvas.width;_this.storageQrcode();
},
复制代码

获取远程图片缓存到本地使用

api
- wx.getImageInfo()
- 参考文档： wx.getImageInfo()

注意：如果是本地图片,即'static'文件夹中的图片，如'/static/logo.png'经过wx.getImageInfo返回的path会省去开头的'/'，即'static/logo.png'，这会导致拿不到资源，所以本地图片不需要调用wx.getImageInfo()进行本地缓存

// wx.js
// 获取图片基本信息
export function wxGetImgInfo (imgUrl) {return new Promise(async function (resolve, reject) {wx.getImageInfo({src: imgUrl,success: function (res) {resolve(res);},fail: function (err) {reject(err);}})});
}
// demo.vue
// 缓存远程图片
async storageQrcode () {let _this = this;// 背景图url转path// let bgRes = await wxGetImgInfo(_this.bgImg);// _this.imgPath.bgImg = bgRes.path;// Logo url转path// let logoRes = await wxGetImgInfo(_this.logo);// _this.imgPath.logo = logoRes.path;// 头像 url转path// let headerImgRes = await wxGetImgInfo(_this.cardDetail.header);// _this.imgPath.headerImg = headerImgRes.path;// 二维码 url转pathlet qrCodeRes = await wxGetImgInfo(_this.qrCode);_this.imgPath.qrCode = qrCodeRes.path;console.log(_this.imgPath);// _this.initCanvas(_this.canvas.width);
},
复制代码

绘制canvas

canvas绘制主要用到了图片绘制、文字绘制，图片绘制及文字绘制的时候，需要引入上文说到的宽度因子x进行计算

图片绘制

canvasContext.drawImage
- 参考文档： canvasContext.drawImage

这里的图片绘制之前先计算宽度因子

  let _this = this;// variableVal即为上文拿到的设备宽度const variableNum = variableVal / 750; // 根据设备宽度算出一个rpx为多少pxconst ctx = wx.createCanvasContext('qrcode-canvas');// 清除画布上矩形的内容ctx.clearRect(0, 0, 0, 0);// 绘制上部card背景图const bgImgDesc = {url: _this.imgPath.bgImg,left: 0,top: 0,width: 750 * variableNum,height: 912 * variableNum};ctx.drawImage(bgImgDesc.url, bgImgDesc.left, bgImgDesc.top, bgImgDesc.width, bgImgDesc.height);ctx.draw();
复制代码

文字的绘制

canvasContext.setFillStyle - 设置颜色
canvasContext.setFontSize - 设置大小
canvasContext.fillText - 填充文本

const nameDesc = {text: _this.cardDetail.name,fontSize: 36 * variableNum,color: '#4F5E6F',left: 102 * variableNum,top: 200 * variableNum
};
ctx.setFillStyle(nameDesc.color);
ctx.setFontSize(nameDesc.fontSize);
ctx.fillText(nameDesc.text, nameDesc.left, nameDesc.top);
ctx.draw();
复制代码

canvas转图片并保存到本地

wx.canvasToTempFilePath - canvas转图片
- 参考文档： wx.canvasToTempFilePath
wx.saveImageToPhotosAlbum - 保存图片到本地
- 参考文档： wx.saveImageToPhotosAlbum

注意点

tip： wx.canvasToTempFilePath() 在 draw 回调里调用该方法才能保证图片导出成功。

由于导出图片需要在canvas绘制图片的draw()方法回调中使用才能,所以我们在绘制canvas的时候直接转canvas为图片，然后将路径存下来，点击下载的时候，再直接拿图片路径进行下载操作。

// wx.js
// canvas画布转图片
export function wxCanvasToTempFilePath (canvasObj) {return new Promise(async function (resolve, reject) {wx.canvasToTempFilePath({x: canvasObj.x,y: canvasObj.y,width: canvasObj.width,height: canvasObj.height,destWidth: canvasObj.destWidth,destHeight: canvasObj.destHeight,canvasId: canvasObj.canvasId,fileType: canvasObj.fileType ? canvasObj.fileType : 'png',success: function (res) {resolve(res);},fail: function (err) {reject(err);}})});
}
// demo.vue
// 绘制canvas
initCanvas () {let _this = this;// 绘制canvas......ctx.draw(false, function () {_this.saveImg();});
},
// 将canvas转为图片
async saveImg () {let _this = this;const canvasObj = {x: 0,y: 0,width: _this.canvas.width,height: _this.canvas.height,destWidth: _this.canvas.width * 4,destHeight: _this.canvas.height * 4,canvasId: 'qrcode-canvas',fileType: 'png'};let imgRes = await wxCanvasToTempFilePath(canvasObj);_this.qrCodeImgPath = imgRes.tempFilePath;
},
复制代码

下载图片到本地

<canvas canvas-id="qrcode-canvas" :style="{width: canvas.width + 'px', height: canvas.height + 'px'}"></canvas>
<button type="primary" plain="true" @click="downLoadImg"> 保存二维码 </button>
复制代码

// wx.js
// 保存图片到本地
export function wxSaveImageToPhotosAlbum (filePath) {return new Promise(async function (resolve, reject) {wx.saveImageToPhotosAlbum({filePath: filePath,success: function (res) {resolve(res);},fail: function (err) {reject(err);}})});
}
// demo.vue
// 保存图片到本机
async downLoadImg () {let _this = this;let saveRes = await wxSaveImageToPhotosAlbum(_this.qrCodeImgPath);if (saveRes.errMsg === 'saveImageToPhotosAlbum:ok') {wx.showToast({duration: 3000,icon: 'none',title: '保存图片成功！',mask: true});} else {wx.showToast({duration: 3000,icon: 'none',title: '保存图片失败，请重试！',mask: true});}
},
复制代码