fix: image

pages/make/index.vue

@@ -1122,17 +1122,19 @@ const saveByCanvas = async (save = true) => {
         const ctx = canvas.getContext("2d");
 
         // 初始化画布尺寸
-        const dpr = uni.getSystemInfoSync().pixelRatio;
-        // 保持 540x960 的逻辑尺寸，为了清晰度可以考虑 * dpr，
-        // 但为了保持和原来一致的输出尺寸，这里先固定物理尺寸
-        // 如果要高清，可以 set width = 540 * dpr，然后 scale(dpr, dpr)
-        // 这里为了简单兼容原逻辑，我们让物理尺寸等于逻辑尺寸
-        canvas.width = 540;
-        canvas.height = 960;
+        const dpr = uni.getSystemInfoSync().pixelRatio || 2;
+        // 为了高清画质，将物理像素设置为逻辑像素的 dpr 倍
+        const baseW = 540;
+        const baseH = 960;
+        canvas.width = baseW * dpr;
+        canvas.height = baseH * dpr;
 
-        // 画布尺寸（rpx 转 px）
-        const W = 540;
-        const H = 960;
+        // 缩放上下文，使得后续绘制指令依然可以使用逻辑坐标 (baseW, baseH)
+        ctx.scale(dpr, dpr);
+
+        // 画布尺寸（逻辑像素）
+        const W = baseW;
+        const H = baseH;
 
         // 辅助函数：加载图片为 Image 对象
         const loadCanvasImage = (url) => {
@@ -1145,7 +1147,7 @@ const saveByCanvas = async (save = true) => {
         };
 
         // 辅助函数：rpx 转 px (基于预览容器宽度 506rpx 对应 Canvas 540px)
-        const r2p = (rpx) => (rpx * 540) / 506;
+        const r2p = (rpx) => (rpx * baseW) / 506;
 
         try {
           // 1️⃣ 画背景
@@ -1213,10 +1215,12 @@ const saveByCanvas = async (save = true) => {
           // 6️⃣ 输出
           uni.canvasToTempFilePath({
             canvas: canvas, // Canvas 2D 必须传 canvas 实例
-            width: W,
-            height: H,
-            destWidth: W,
-            destHeight: H,
+            width: canvas.width,
+            height: canvas.height,
+            destWidth: canvas.width,
+            destHeight: canvas.height,
+            fileType: "png", // 使用 PNG 避免 JPG 压缩损耗
+            quality: 1.0, // 最高质量
             success: (res) => {
               if (save) saveImage(res.tempFilePath);
               resolve(res.tempFilePath);