vue qrcode 添加logo和标题后怎么将整个转为图片
时间: 2024-03-28 09:40:36 浏览: 12
要将带有 logo 和标题的 qrcode 转为图片,可以使用百度开发的 qrcodejs 库来实现,具体步骤如下:
1. 引入 qrcodejs 库和 canvas-toBlob 库
```html
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-canvas-to-blob/3.14.0/js/canvas-toBlob.min.js"></script>
```
2. 创建 qrcode 实例,并设置参数
```javascript
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "https://www.example.com", // qrcode 内容
width: 256, // qrcode 宽度
height: 256, // qrcode 高度
colorDark: "#000000", // qrcode 暗色
colorLight: "#ffffff", // qrcode 亮色
correctLevel: QRCode.CorrectLevel.H // qrcode 纠错级别
});
```
3. 在 qrcode 上绘制 logo 和标题
```javascript
var canvas = document.getElementById("qrcode-canvas");
var ctx = canvas.getContext("2d");
// 绘制 qrcode
qrcode._oDrawing._drawQrcode(ctx);
// 绘制 logo
var logoImg = new Image();
logoImg.src = "logo.jpg";
logoImg.onload = function() {
var logoSize = qrcode._htOption.width * 0.2; // logo 大小为 qrcode 宽度的 20%
var logoX = (qrcode._htOption.width - logoSize) / 2; // logo 横坐标为 qrcode 宽度的一半减去 logo 宽度的一半
var logoY = (qrcode._htOption.height - logoSize) / 2; // logo 纵坐标为 qrcode 高度的一半减去 logo 高度的一半
ctx.drawImage(logoImg, logoX, logoY, logoSize, logoSize);
}
// 绘制标题
ctx.font = "bold 16px Arial";
ctx.textAlign = "center";
ctx.fillStyle = "#000000";
ctx.fillText("Scan Me", qrcode._htOption.width / 2, qrcode._htOption.height * 0.8);
```
4. 将 canvas 转为图片并保存
```javascript
var canvas = document.getElementById("qrcode-canvas");
canvas.toBlob(function(blob) {
var link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "qrcode.png";
link.click();
});
```
最后,将上面的代码整合到一起,就可以实现将带有 logo 和标题的 qrcode 转为图片并保存了。