利用 qrcode 在图片生成二维码
百度网盘下载： qrcode 提取码: ubax，详细文档说明：请查看
对比图
效果图
下载下来后我把他引入下面页面--qr.html（路径记得换成你自己的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>利用 qrcode 在图片生成二维码</title>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
max-width: 7.5rem;
margin: 0 auto;
}
#Original,
#Qr {
display: none;
}
#Poster {
display: block;
width: 100%;
}
</style>
<script>
!(function (doc, win) {
var docEl = document.documentElement,
resizeEvt =
"orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = "100px";
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
}
};
if (!doc.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
</script>
</head>
<body>
<div id="app">
<canvas id="Original"></canvas>
<canvas id="Qr"></canvas>
<img id="Poster" data-src="http">
</div>
<script src="./qrcode.min.js"></script>
<script>
let img = new Image();
img.src = './shenxianjiejie.jpg';
img.onload = function () {
let original = document.getElementById('Original');
let context = original.getContext('2d');
context.save(); // 保存当前环境
original.setAttribute('width', this.width);
original.setAttribute('height', this.height);
// 向画布上绘制图片
context.drawImage(this, 0, 0, this.width, this.height);
// 进行绘制
context.restore();
let qr = document.getElementById('Qr');
// 二维码的内容
let qrContent = '这里是文字，可以是链接';
QRCode.toCanvas(qr, qrContent, (error) => {
if (error) {
console.error(error)
}
let image = new Image();
image.src = qr.toDataURL('image?png');
image.onload = function () {
// 保存已绘制的图片
context.save();
// 绘制二维码的位置和大小
context.drawImage(this, 40, 40, 200, 200);
// 进行绘制
context.restore();
let poster = document.getElementById('Poster')
poster.setAttribute('src', original.toDataURL('image/png'));
}
})
}
</script>
</body>
</html>
由于我这里引用是本地图片，所以需要搭建本地服务，我这里在 node 环境下搭建了简单的 express 服务
const express = require('express')
const server = express();
const port = 8496;
server.use(express.static('./'));
server.listen(port, _ => {
console.log(`http://localhost:${port}`);
})
现在运行服务后直接访问 http://localhost:8496/qr.html
