小程序开发-使用画布将二维码海报保存到机器上
小程序开发
浏览：968 次
小程序效果
方案和要求
在小程序开发过程中，通常需要将页面保存为带有小程序代码的二维码海报图像，并发送到本地，然后将其用于共享或发送朋友圈。
主要技术要点和小程序相关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
