可以用以上方法生成二维码图片保存下来吗
时间: 2023-10-10 13:11:00 浏览: 62
可以的,你可以使用 JavaScript 生成的二维码,将其转换为图片并保存。具体步骤如下:
1.使用 qrcode 生成二维码,并将其渲染到一个 canvas 元素上。
2.使用 canvas 的 toDataURL 方法将 canvas 转换为 base64 编码的图片数据。
3.将 base64 编码的图片数据转换为 Blob 对象,再通过 URL.createObjectURL 方法生成图片 URL。
4.创建一个图片元素,并将图片 URL 赋给它的 src 属性。
5.使用 JavaScript 下载图片。
示例代码如下:
```javascript
// 使用 qrcode 生成二维码
jQuery('#codeer').qrcode({
render: 'canvas',
text: '<%=QrPayUrl%>',
width: 200,
height: 200
});
// 获取 canvas 元素
var canvas = document.getElementById('codeer').getElementsByTagName('canvas')[0];
// 获取 base64 编码的图片数据
var dataURL = canvas.toDataURL('image/png');
// 将 base64 编码的图片数据转换为 Blob 对象
var blob = dataURLtoBlob(dataURL);
// 生成图片 URL
var imgUrl = URL.createObjectURL(blob);
// 创建图片元素,并设置图片 URL
var img = new Image();
img.src = imgUrl;
// 下载图片
downloadImage(imgUrl);
// 将 base64 编码的图片数据转换为 Blob 对象的函数
function dataURLtoBlob(dataURL) {
var arr = dataURL.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
// 下载图片的函数
function downloadImage(url) {
var a = document.createElement('a');
a.href = url;
a.download = 'qrcode.png';
a.click();
}
```
在上面的代码中,我们使用了 `dataURLtoBlob` 函数将 base64 编码的图片数据转换为 Blob 对象,使用了 `downloadImage` 函数下载图片。注意,在下载图片之前,浏览器需要获取用户授权,因此需要用户手动点击下载链接。
阅读全文