一、操作步骤
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 = dataURL canvimg.style.width = '70%' // canvimg.style.height = '100%' document.getElementById('container1').appendChild(canvimg) canvas.style.display='none' //隐藏原有的二维码元素}
3. 按钮点击事件绑定上述 js 方法。
4. 分享当前页,在真机环境下扫码预览。
4.1 二维码默认非图片格式,长按二维码不能保存到相册。
4.2 单击按钮,触发转化为图片方法,二维码成功转换成图片后,长按二维码,出现存储到“照片”选项(以下为 iOS 系统示例)。