qrcode.js 生成的二维码怎么转成图片
时间: 2024-03-26 21:38:40 浏览: 14
你可以使用 qrcode.js 库生成的二维码是一个 SVG 图像,你可以通过以下步骤将其转换为 PNG 或 JPEG 格式的图像:
1. 将 SVG 图像作为字符串获取并将其插入到 HTML 页面中的 `<svg>` 标记中。
2. 使用 `canvas` 元素将 SVG 图像绘制到画布上。
3. 使用 `canvas` 元素的 `toDataURL()` 方法将画布内容转换为 PNG 或 JPEG 格式的数据 URL。
4. 创建一个新的 `Image` 对象,将数据 URL 分配给 `src` 属性。
5. 在 `Image` 对象的 `onload` 事件处理程序中,将图像绘制到画布上。
6. 使用 `canvas` 元素的 `toDataURL()` 方法将画布内容转换为 PNG 或 JPEG 格式的数据 URL。
以下是示例代码:
```javascript
// 获取 SVG 图像字符串
var svgString = document.querySelector('svg').outerHTML;
// 创建一个新的画布元素
var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
// 获取画布上下文
var ctx = canvas.getContext('2d');
// 将 SVG 图像绘制到画布上
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
// 将画布内容转换为 PNG 格式的数据 URL
var pngUrl = canvas.toDataURL('image/png');
// 创建一个新的 Image 对象并将 PNG 数据 URL 分配给 src 属性
var img2 = new Image();
img2.src = pngUrl;
// 在 Image 对象的 onload 事件处理程序中,将 PNG 图像绘制到画布上
img2.onload = function () {
ctx.drawImage(img2, 0, 0);
DOMURL.revokeObjectURL(pngUrl);
// 将画布内容转换为 PNG 格式的数据 URL
var finalPngUrl = canvas.toDataURL('image/png');
// 在此处使用 finalPngUrl 来处理图像
};
};
img.src = url;
```
请注意,上述代码生成的 PNG 图像将具有与画布相同的大小。您可以根据需要更改画布的大小,并相应地更改 `canvas` 元素的宽度和高度。