UniApp Canvas绘制 Base64 二维码真机不显示的解救方案

2023-08-07 07:10:14

在 UniApp 中使用 Canvas 绘制安全二维码：真机调试显示难题的完美解决方案

引言

在 UniApp 小程序开发中，使用 Canvas 绘制二维码并输出 Base64 格式是一个常见的场景。然而，开发者经常会遇到这样的问题：在开发者工具中，二维码可以正常显示，但在真机调试时却无影无踪。本文将深入分析这个问题的根源并提供一个彻底的解决方案，帮助你轻松解决真机调试中无法显示二维码的难题。

问题分析：安全检查的拦路虎

真机调试无法显示二维码的原因在于，微信对 Base64 格式的二维码实施了严格的安全检查。如果二维码中包含了某些不安全的字符，微信就会阻止其显示，以保障用户的安全。

解决方案：过滤不安全字符

为了解决这个问题，我们需要对 Base64 格式的二维码进行处理，过滤掉那些不安全的字符。具体步骤如下：

将 Base64 字符串转换为 ArrayBuffer： 创建一个新的 Uint8Array 对象，并将 Base64 字符串以 base64 编码格式转换为 ArrayBuffer。
使用 atob() 函数转换为字符串： 使用 window.atob() 函数将 ArrayBuffer 转换为一个字符串。
过滤不安全字符： 使用正则表达式 /[^\w.-]/g 过滤掉字符串中所有不安全的字符。这些字符包括特殊符号、空格和其他非单词字符。
重新转换为 Base64 字符串： 使用 Buffer.from(filteredString, 'utf-8').toString('base64') 将过滤后的字符串重新转换为 Base64 格式。

代码示例

以下是一个代码示例，展示了如何过滤 Base64 格式的二维码并进行绘制：

// 将 Base64 字符串转换为 ArrayBuffer
const arrayBuffer = new Uint8Array(Buffer.from(base64String, 'base64')).buffer;

// 使用 atob() 函数转换为字符串
const string = window.atob(arrayBuffer);

// 过滤不安全字符
const filteredString = string.replace(/[^\w.-]/g, '');

// 重新转换为 Base64 字符串
const filteredBase64String = Buffer.from(filteredString, 'utf-8').toString('base64');

// 在 Canvas 中绘制过滤后的 Base64 格式二维码
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.drawImage(filteredBase64String, 0, 0);