第一个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);
	}
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐