uqrcode生成分享二维码海报

利用 uqrcode.js 创建个性化二维码

在当今数字化社会中，二维码已经成为了一种便捷的信息传递方式。uqrcode.js 是一个强大且灵活的 JavaScript 库，可以让你在网页或应用中轻松生成个性化的二维码。接下来，我们将一步步介绍如何安装、引入和使用这个库。

1. 安装 uqrcode.js

首先，在你的项目中安装 uqrcode.js。使用 npm，在命令行中输入以下指令：

npm install uqrcodejs

2. 引入 uqrcode.js

一旦安装完成，你需要在你的代码中引入 uqrcode.js。这个库提供了 UQRCode 类，可以帮助你生成二维码。

import UQRCode from "uqrcodejs"; // npm install uqrcodejs

3. 生成二维码

接下来，在你的应用或网页中创建一个 Canvas 元素，利用 uqrcode.js 生成二维码。

<template>
	<canvas id="qrcode" canvas-id="qrcode" style="width: 100px; height: 100px"></canvas>
</template>

<script>
export default {
	onReady() {
		this.createUqrCode();
	},
	methods: {
		// 创建二维码
		createUqrCode()
			const inviteCode = this.$store.getters.openId
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = `${SHARE_URL}?${INVITE_CODE}=${inviteCode}`;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 100;
			// 调用制作二维码方法
			qr.make();
			// 二维码前景图
			qr.foregroundImageSrc = "../../../static/images/icons/loading_icon.jpg";
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas()
		},
	}
}
</script>

4. 二维码与海报合并

除了单独展示二维码外，我们还可以将它与海报图片合并，以提升用户体验。

<template>
	<view>
		<view class="section-share">
			<image class="image" :src="canvasUrl" mode="widthFix"></image>
		</view>
		<view class="hidden">
			<canvas id="shareCanvas" canvas-id="shareCanvas" style="width: 750px; height: 1607px"></canvas>
			<canvas id="qrcode" canvas-id="qrcode" style="width: 100px; height: 100px"></canvas>
		</view>
		<common-confirmframe :show.sync="show" :showCancelBtn="false" title="" @confirmFrame="show = false">
			<view class="tips text-center font32">
				<view>
					长按图片或截图保存
				</view>
				<view class="x-m-t-15">
					分享给您的好友即可送礼哦
				</view>
			</view>
		</common-confirmframe>
	</view>
</template>

<script>
	import {
		isWechat
	} from "@/utils/wechat.js";
	import {
		INVITE_CODE,
		SHARE_URL
	} from '@/env.js'
	import UQRCode from "uqrcodejs"; // npm install uqrcodejs
	export default {
		data() {
			return {
				show: false,
				shareCodeImage: '', // 二维码
				canvasUrl: '' // 画布保存地址
			};
		},
		onReady() {
			this.createUqrCode();
		},
		methods: {
			createShareImage() {
				let context = uni.createCanvasContext("shareCanvas", this);

				// 图片的rpx大小
				let imageWidthInRpx = 750; // 图片宽度
				let imageHeightInRpx = 1400; // 图片高度

				// 绘制图片到Canvas上
				context.drawImage(
					"../static/images/share.png",
					0,
					0,
					imageWidthInRpx,
					imageHeightInRpx
				);

				context.save()

				context.drawImage(
					this.shareCodeImage,
					52,
					1115,
					200,
					200
				)

				context.save()

				context.draw()

				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'shareCanvas',
						width: imageWidthInRpx,
						height: imageHeightInRpx,
						destWidth: imageWidthInRpx,
						destHeight: imageHeightInRpx,
						success: (res) => {
							uni.hideLoading()
							this.show = true
							this.canvasUrl = res.tempFilePath
						}
					})
				}, 300);
			},
			// 创建二维码
			createUqrCode() {
				uni.showLoading({
					mask: true,
					title: '美图生成中'
				})
				const inviteCode = this.$store.getters.openId
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = `${SHARE_URL}?${INVITE_CODE}=${inviteCode}`;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 100;
				// 调用制作二维码方法
				qr.make();
				// 二维码前景图
				qr.foregroundImageSrc = "../../../static/images/icons/loading_icon.jpg";
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				// 将canvas导出临时地址合并
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'qrcode',
						width: 100,
						height: 100,
						success: res => {
							this.shareCodeImage = res.tempFilePath
							this.createShareImage()
						},
						fail: err => {
							console.log(err);
						}
					})
				}, 300);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.hidden {
		width: 0;
		height: 0;
		overflow: hidden;
	}

	.section-share {
		position: relative;

		.image {
			margin: 0 auto;
			height: 100vh;
			width: 100%;
		}
	}

	.tips{
		font-weight: bold;
	}
</style>

通过将二维码图案合并到海报图片上，我们为用户提供了更加直观、吸引人的分享方式。

这些简单的步骤能够帮助你快速地将二维码功能整合到你的项目中。记住根据实际需求，自定义二维码的大小、颜色和包含的信息。享受编码与分享的乐趣吧！