小程序开发-使用画布将二维码海报保存到机器上

小程序效果

方案和要求

在小程序开发过程中，通常需要将页面保存为带有小程序代码的二维码海报图像，并发送到本地，然后将其用于共享或发送朋友圈。

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

技术注意事项

applet canvas使用与H5 canvas相同的api，但由于applet中没有DOM节点的概念，因此无法使用许多现成的工具库

小程序画布的默认宽度为300px，高度为225px

与applet画布相关的api的单位是px，而不是rpx，因此需要在业务实现过程中处理自适应

小程序画布不支持跨域图像。您需要先在本地缓存图像

技术要点

wx.getImageInfo（）

wx.getSystemInfo（）

wx.canvasToTempFilePath（）

wx.saveImageToPhotoAlbum（）

画布渲染相关api

总体流程

1.首先获取所有图像资源。在线图像需要本地缓存，图像的本地路径用于渲染

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

3.绘制画布

4.将画布转换为图片并将图片保存到本地计算机

实现

宽度系数x和元件宽度的尺寸计算

Rpx（反应像素）：根据屏幕宽度自适应。指定的屏幕宽度为750rpx。例如，在iPhone6 6上，如果屏幕宽度为375px，并且有750个物理像素，那么750rpx=375px=750个物理象素，1rpx=0.5px=1个物理象。

参考文件：

从文档中可以看出，不同设备的宽度是不同值的px，但都是750rpx。因此，可以使用750rpx计算宽度系数x：

设备宽度/750

以750rpx的设计吃水宽度为例，在不同设备下，不同设备下的设计吃草宽度y和px宽度为：

Y=Y*x

Y=Y*（设备宽度/750）

因此，在实现中，需要将画布标签的宽度和高度设置为变量，并使用微信提供的wx。getSystemInfo（）接口获取设备宽度信息并进行计算

<；/画布>

//wx.js语言

//获取基本设备信息

导出函数wxGetSystemInfo（）{

return new Promise（异步函数（resolve，reject）{

wx.获取系统信息({

成功：函数（res）{

解决（res）；

},

失败：函数（错误）{

拒绝（错误）；

}

})

});

}

//演示.vue

//获取基本电话信息

异步获取电话系统信息（）{

让_ this=this；

让systemInfoRes=等待wxGetSystemInfo（）；

_这个帆布。宽度=systemInfoRes.screenWidth；

//设计吃水宽度和高度为750*912

_这个帆布。高度=912/750*_此扫描宽度；

_this.storageQrcode（）；

},

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

app编程接口

wx.getImageInfo（）

参考文件：

注意：如果是本地图像，即“静态”文件夹中的图像，例如“/static/logo”。png’，wx返回的路径。getImageInfo将省略首字母“/”，即“static/logo”。png’，这将导致无法获得任何资源，因此本地映像不需要调用wx。本地缓存的getImageInfo（）

//wx.js语言

//获取基本图片信息

导出函数wxGetImgInfo（imgUrl）{

return new Promise（异步函数（resolve，reject）{

wx.获取图像信息({

src:imgUrl，

成功：函数（res）{

解决（res）；

},

失败：函数（错误）{

拒绝（错误）；

}

})

});

}

//演示.vue

//缓存远程图片

异步存储Qrcode（）{

让_ this=this；

//背景图像url到路径

//让bgRes=等待wxGetImgInfo（_this.bgImg）；

//_ this.img路径。bgImg=bgRes.path；

//徽标url到路径

//让logoRes=等待wxGetImgInfo（_this.logo）；

//_ this.img路径。logo=logoRes.path；

//指向路径的化身url

//让headerImgRes=等待wxGetImgInfo（_this.cardDetail.header）；

//_ this.img路径。headerImg=headerImgRes.path；

//二维码url到路径

让qrCodeRes=等待wxGetImgInfo（_this.qrCode）；

_this.img路径。qrCode=qrCodeRes.path；

控制台.log（_this.imgPath）；

//_ this.initCanvas（_ this.canvas.width）；

},

绘制画布

画布绘制主要使用图片绘制和文本绘制。在绘制图片和文本时，我们需要引入上面提到的宽度因子x进行计算

图片绘制

画布上下文.drawImage

参考文件：

在此处绘制图片之前计算宽度因子

让_ this=this；

//VariableVal是上面获得的设备宽度

const variableNum=variableVal/750；//根据设备的宽度计算rpx的数量px

常量ctx=wx.createCanvasContext（'qrcode-canvas'）；

//清除画布上矩形的内容

ctx。清除矩形（0,0,0,1）；

//绘制上卡的背景图像

常量bgImgDesc={

网址：_ this.imgPath.bgIm