背景
二维码组件目前支持在 PC 端和小程序端以图片的格式保存到本地或手机相册，针对 H5 端场景，由于二维码组件生成的图片为 canvas 绘制的，不能直接保存到手机相册，用户只能用截屏的方式来保存二维码，使用起来很不方便。本篇实践主要介绍在 H5 端将二维码组件生成的二维码以图片的格式保存到手机相册。
实践思路
1. 在编辑器中使用普通容器、二维码、按钮组件构建业务场景，其中大纲树结构如下。
2. 新建
JavaScript 方法 function1 用来将二维码转换成图片格式，由于微信和 iOS 不支持下载图片，可以显示出图片，然后提示让用户自己去保存。
代码如下：
export default function ({ event, data }) {// 获取Canvas元素var canvas = document.querySelector('.wd-h5-qrcode');// 将Canvas转换为Base64编码的图片var dataURL = canvas.toDataURL('image/png'); // 或者 'image/jpeg'// 创建一个img标签用于显示图片var canvimg = document.createElement('img')canvimg.src = dataURLcanvimg.style.width = '70%'// canvimg.style.height = '100%'document.getElementById('container1').appendChild(canvimg)canvas.style.display='none' //隐藏原有的二维码元素}
3. 按钮点击事件绑定上述 js 方法。
4. 分享当前页，在真机环境下扫码预览。
4.1 二维码默认非图片格式，长按二维码不能保存到相册。
4.2 单击按钮，触发转化为图片方法，二维码成功转换成图片后，长按二维码，出现存储到“照片”选项（以下为 iOS 系统示例）。
