1. 图片格式或生成的 DataURL 处理问题QRCode.toDataURL() 方法通常会生成一个 Base64 编码的 PNG 图片。某些 Android 浏览器或 WebView 可能对 Base64 编码的图片支持不好，或者由于资源限制无法正常解析。
解决方法：
尝试通过生成二维码的图片 URL 直接展示而非使用 Base64 编码。可以通过将二维码生成成一个 Blob 对象并使用 URL.createObjectURL 来实现：
QRCode.toDataURL('http://example.com', { errorCorrectionLevel: 'H' }, function (err, url) {
if (err) {
console.error(err);
return;
}
this.qrCodeUrl = url; // 将 QR 码 URL 绑定到 Vue 的数据中
});
然后在模板中渲染二维码：
<template>
<div>
<img :src="qrCodeUrl" alt="QR Code"/>
</div>
</template>
<script>
export default {
data() {
return {
qrCodeUrl: ''
};
},
mounted() {
this.generateQRCode();
},
methods: {
generateQRCode() {
QRCode.toDataURL('http://example.com', { errorCorrectionLevel: 'H' }, (err, url) => {
if (err) {
console.error(err);
return;
}
this.qrCodeUrl = url;
});
}
}
};
</script>
2. 使用 QRCode.toCanvas()
如果 toDataURL() 不能在某些设备上正常工作，可以尝试使用 QRCode.toCanvas()，将二维码直接绘制到 canvas 上，避免 Base64 编码图片问题。
QRCode.toCanvas(document.getElementById('qr-code-canvas'), 'http://example.com', function (error) {
if (error) console.error(error);
else console.log('QR code successfully generated.');
});
<template>
<canvas id="qr-code-canvas"></canvas>
</template>
3. Android WebView 和 H5 页面兼容性
如果你是在 uniapp 中使用 WebView 或者在 Android 上调试时遇到问题，可能是由于 WebView 对某些功能的支持不完全，特别是 Base64 图片或某些复杂的 DOM 操作。
解决方法：
确保你的 WebView 配置允许加载外部资源，或者通过调试工具检查 WebView 的设置和日志。如果你有控制权限，考虑将二维码生成的部分从 H5 端转移到原生 Android 层进行生成，或者使用其他的二维码生成库。
4. 缓存和清理
有时二维码的渲染可能会受到浏览器缓存的影响。确保二维码是通过动态生成的，并且在每次页面加载时都重新生成二维码。
总结
使用 QRCode.toDataURL() 生成 Base64 图片，但注意 Android WebView 可能不完全支持。
尝试使用 QRCode.toCanvas()，直接将二维码绘制到 canvas 上。
检查 Android WebView 配置，确保支持图片加载和 DOM 渲染。
确保二维码内容动态生成，避免缓存问题。
通过这些方法，可以帮助你在 Android 环境中正确渲染二维码。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/4690
