jquery.qrcode生成带logo和文本的二维码,并生成图片

第一个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);
	}
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Swn_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值