第一个div是生成 二维码 的,仅用于生成二维码画布
第二个存的是自己定义一个canvas,里面的内容有 第一个改造后的二维码+文本内容
<div id="old-qrcode" class="old-qrcode"></div>
<div id="new-qrcode"></div>
let qrcode = $('#old-qrcode').qrcode({
render: 'canvas',
width: 300,
height: 300,
text: ‘123’, // 二维码内容
});
createNewQrcode(document.querySelector('#old-qrcode canvas'),this.innerText); // 将生成的画布二维码传递过去
function createNewQrcode(originalQrcode,bottomText) {
let newQrcodeWrap = document.querySelector('#new-qrcode');
let resolutionMultiple = 2; // 分辨率倍数
let borderSize = 10 * resolutionMultiple; // 边框留白
let canvasWidth = 300 * resolutionMultiple; // 图片宽度
let logoSize = 80 * resolutionMultiple; // logo直径
let logoBorderSize = 4 * resolutionMultiple; // logo描边
let logoUrl = './images/logo-white-bg.jpg'; // logo 文件地址 可自定义自己的
let text = bottomText; // 底部要显示的文字
let fontSize = 30 * resolutionMultiple; // 设置文字大小
let canvasHeight = canvasWidth + fontSize;
let canvas = document.createElement('canvas'); // 创建新的画布,用来存放新二维码
if (!canvas.getContext) return;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(255,255,255)'; // 调色(纯白)
ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 绘制背景
let qrcodeSize = canvasWidth - borderSize * 2;
ctx.drawImage(
originalQrcode,
borderSize,
borderSize,
qrcodeSize,
qrcodeSize
); // 填充二维码
let logoCenterX = borderSize + qrcodeSize / 2;
let logoCenterY = logoCenterX;
ctx.arc(
logoCenterX,
logoCenterY,
logoSize / 2 + logoBorderSize,
0,
Math.PI * 2,
false
); // 绘制logo圆形底图
ctx.fill(); // 填充背景
let logoX = (qrcodeSize - logoSize) / 2 + borderSize;
let logoY = logoX;
let logo = new Image();
logo.setAttribute('crossOrigin', 'anonymous'); // logo跨域许可
logo.onload = function() {
ctx.beginPath();
ctx.arc(
logoCenterX,
logoCenterY,
logoSize / 2,
0,
Math.PI * 2,
false
);
ctx.fill();
ctx.clip(); // 裁剪logo成圆形
ctx.drawImage(logo, logoX, logoY, logoSize, logoSize); // 填充logo
createImage();
};
logo.src = logoUrl; // 设置logo源地址
ctx.fillStyle = 'rgb(0,0,0)'; // 调色(纯黑)
ctx.font = fontSize + 'px Arial'; // 文本大小, 字体
ctx.textAlign = 'center';
ctx.fillText(
text,
canvasWidth / 2,
qrcodeSize + borderSize + fontSize,
qrcodeSize
); // 绘制文本
originalQrcode.style.display = 'none';
newQrcodeWrap.appendChild(canvas);
canvas.style.display = 'none'; // 需要显示图片,因此canvas隐藏,如果不转成图片,则不必调用下面的方法,并注释此行
function createImage() {
// logo加载完成后再生成img,否则logo部分空白
let newQrcodeImg = new Image();
newQrcodeImg.src = canvas.toDataURL('image/png');
newQrcodeWrap.appendChild(newQrcodeImg);
}
}