百度网盘下载： 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