小程序开发笔记Seven使用画布绘制带有二维码的海报并预览并保存到相册中
小程序开发
浏览：666 次
使用小程序生成的二维码预览海报效果：
项目要求：
用户的个人二维码需要根据用户信息生成。海报材料在后台提供。用户的二维码可以绘制在海报上，并且可以预览海报。长按保存海报，以便用户可以分享或发送好友。
涉及的相关API：
Wx。getImageInfo（）----获取图片信息
Wx。getSystemInfo（）----获取系统信息，包括屏幕宽度和高度、设备型号、设备像素比等
Wx。canvasToTempFilePath（）----导出当前画布指定区域的内容，以生成指定大小的图片
Wx。saveImageToPhotoAlbum（）----将图片保存到系统相册。
画布渲染相关api
注意事项：
小程序的画布基本上实现了H5的画布方法，包括将图片绘制到画布、导入图片等，因此可以直接使用小程序的与画布相关的api。
在互联网上找到用于小程序绘制二维码的插件
小程序画布和图像组件的默认宽度为300px，高度为225px
与applet画布相关的api的单位是px，而不是rpx，因此可以在业务实现过程中根据需要进行调整
小程序画布不支持跨域图像。它需要在本地缓存图像（在线图像可用时需要配置downloadFile域名）。本地图像不需要为本地缓存调用getImageInfo（）方法
实施过程：
1.首先，根据个人信息绘制二维码，并绘制用于二维码的插件。具体的实现过程，请参考前面的文章，然后将绘制的二维码画布导出到图片中，并将其带到图片的本地临时链接，以便稍后在海报上绘制二维码时调用。
2.获取设备屏幕信息，并在海报预览时计算图片的宽度和高度，因为图像组件的默认宽度为300px，高度为225px。如果不计算，当以固定大小呈现时，图片可能会变形。
3.绘制画布。首先在定义的画布上画一张海报。这个示例基础与绘制的画布大小相同，然后将用户的二维码绘制到海报的右下角。
4.设置海报的导出大小，并导出画布内容以生成指定大小的图片。注意：wx canvasToTempFilePath必须在draw的回调中执行，否则将无法生成。官方文档解释说，需要保存生成的图像路径，以便在按住保存时可以直接使用图像路径进行操作
5.长按可将图片保存到系统相册
基脚记录：
1、在二维码中间绘制logo图片：如果您使用网络地址的图片，需要先使用Wx GetImageInfo获取图片信息；
2.用x，y绘制二维码图片，有填充感；
3.在回调中直接调用wx canvasToTempFilePath在某些Android计算机上传输的二维码图像异常（不完整），无法扫描二维码，因此需要设置定时器；
实施代码：
索引.wxml：
索引.js：
从'../../utils/weapp.qrcode.js'导入drawQrcode
第页({
数据：{
shareUrl:“https://www.baidu.com/ ",
shareQrcodeImage:“”，
shareQrcodeWidth:200，
shareQrcodeHeight:200，
haibaoBgUrl:“https://upload-images.jianshu.io/upload_images/13079544-96b37469be760003.jpg?imageMogr2/auto-定向/剥离%7CimageView2/2/w/1240“，
海宝宽度：750，//海报的默认宽度
海宝高度：1334，//海报的默认高度
海宝显示高度：0，
qrcode_x:600，//二维码左上角与x轴之间的距离
qrcode_y:980，//二维码数据左上角y轴之间的距离
显示：“无”，
用户id:1
},
onLoad:函数（）{
var=这个；
//生成专属二维码
创建QrCode（）；
//获取屏幕信息
wx.获取系统信息({
成功（res）{
that.setData（设置数据）({
窗口宽度：res.windowWidth，
windowHeight:res.windowHeight（窗口高度）
})
}
});
},
hideModal:函数（）{
this.set数据({
显示：“无”，
位置：“”
})
},
/**生成200*200二维码
