Parcourir la source

日报分享日报分享

zhujindu il y a 7 mois
Parent
commit
a4389083b3
1 fichiers modifiés avec 24 ajouts et 9 suppressions
  1. 24 9
      src/components/share.vue

+ 24 - 9
src/components/share.vue

@@ -249,16 +249,29 @@ export default {
         colorDark: '#000000',
         colorLight: 'rgba(255,255,255,0)', // 完全透明背景
         correctLevel: QRCode.CorrectLevel.H,
-        width: 100,
-        height: 100,
+        width: 150, // 固定尺寸保证安卓一致性
+        height: 150,
         margin: 2,
         render: 'canvas',
         onRenderingEnd: () => {
           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';
+
+          // 调整画布缩放比例
+          const ctx = canvas.getContext('2d');
+          ctx.scale(dpr, dpr);
         },
       });
     },
@@ -472,19 +485,21 @@ export default {
 <style lang="scss">
 .share {
   .QRcodes {
-    width: 100px; /* 固定尺寸保证安卓一致性 */
-    height: 100px;
+    width: 150px; /* 固定像素尺寸 */
+    height: 150px;
     margin-right: 12px;
     position: relative;
     background: #ffffff;
     image-rendering: crisp-edges;
+    image-rendering: -webkit-optimize-contrast; /* 安卓浏览器兼容 */
+    // padding: 2px;
     .logo {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: 35px;
-      height: 35px;
+      width: 40px;
+      height: 40px;
       img {
         width: 100% !important;
         height: 100% !important;