|
@@ -249,16 +249,29 @@ export default {
|
|
|
colorDark: '#000000',
|
|
colorDark: '#000000',
|
|
|
colorLight: 'rgba(255,255,255,0)', // 完全透明背景
|
|
colorLight: 'rgba(255,255,255,0)', // 完全透明背景
|
|
|
correctLevel: QRCode.CorrectLevel.H,
|
|
correctLevel: QRCode.CorrectLevel.H,
|
|
|
- width: 100,
|
|
|
|
|
- height: 100,
|
|
|
|
|
|
|
+ width: 150, // 固定尺寸保证安卓一致性
|
|
|
|
|
+ height: 150,
|
|
|
margin: 2,
|
|
margin: 2,
|
|
|
render: 'canvas',
|
|
render: 'canvas',
|
|
|
onRenderingEnd: () => {
|
|
onRenderingEnd: () => {
|
|
|
const canvas = this.$refs.QRcodes.querySelector('canvas');
|
|
const canvas = this.$refs.QRcodes.querySelector('canvas');
|
|
|
- canvas.style.width = '100%';
|
|
|
|
|
- canvas.style.height = '100%';
|
|
|
|
|
- canvas.style.imageRendering = 'crisp-edges';
|
|
|
|
|
|
|
+ // 显式设置物理像素尺寸
|
|
|
|
|
+ const dpr = window.devicePixelRatio || 1;
|
|
|
|
|
+ canvas.width = 200 * dpr;
|
|
|
|
|
+ canvas.height = 200 * dpr;
|
|
|
|
|
+
|
|
|
|
|
+ // 设置CSS显示尺寸保持200x200
|
|
|
|
|
+ canvas.style.width = '200px';
|
|
|
|
|
+ canvas.style.height = '200px';
|
|
|
|
|
+
|
|
|
|
|
+ // 优化安卓设备显示
|
|
|
|
|
+ canvas.style.imageRendering = 'pixelated';
|
|
|
|
|
+ canvas.style.transform = 'translateZ(0)'; // 触发硬件加速
|
|
|
canvas.style.backgroundColor = '#fff';
|
|
canvas.style.backgroundColor = '#fff';
|
|
|
|
|
+
|
|
|
|
|
+ // 调整画布缩放比例
|
|
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
|
|
+ ctx.scale(dpr, dpr);
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
@@ -472,19 +485,21 @@ export default {
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
.share {
|
|
.share {
|
|
|
.QRcodes {
|
|
.QRcodes {
|
|
|
- width: 100px; /* 固定尺寸保证安卓一致性 */
|
|
|
|
|
- height: 100px;
|
|
|
|
|
|
|
+ width: 150px; /* 固定像素尺寸 */
|
|
|
|
|
+ height: 150px;
|
|
|
margin-right: 12px;
|
|
margin-right: 12px;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
image-rendering: crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
|
|
|
+ image-rendering: -webkit-optimize-contrast; /* 安卓浏览器兼容 */
|
|
|
|
|
+ // padding: 2px;
|
|
|
.logo {
|
|
.logo {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
|
- width: 35px;
|
|
|
|
|
- height: 35px;
|
|
|
|
|
|
|
+ width: 40px;
|
|
|
|
|
+ height: 40px;
|
|
|
img {
|
|
img {
|
|
|
width: 100% !important;
|
|
width: 100% !important;
|
|
|
height: 100% !important;
|
|
height: 100% !important;
|