Ver código fonte

fix: 分享海报封面图按原比例绘制(contain 居中),不再拉伸变形

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
asus 1 mês atrás
pai
commit
bf73854a70
1 arquivos alterados com 29 adições e 2 exclusões
  1. 29 2
      cfc-frontend/components/ContentSharePoster.vue

+ 29 - 2
cfc-frontend/components/ContentSharePoster.vue

@@ -97,11 +97,23 @@ export default {
           url: this.coverImage,
           success: function(res) {
             if (res.statusCode === 200) {
-              ctx.drawImage(res.tempFilePath, cardX + 20, coverY, coverW, coverH)
+              // 按原比例绘制封面图(contain 居中),避免拉伸变形
+              uni.getImageInfo({
+                src: res.tempFilePath,
+                success: function(info) {
+                  var rect = self._fitCoverRect(info.width, info.height, cardX + 20, coverY, coverW, coverH)
+                  ctx.drawImage(res.tempFilePath, rect.x, rect.y, rect.w, rect.h)
+                  self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, colors)
+                },
+                fail: function() {
+                  ctx.drawImage(res.tempFilePath, cardX + 20, coverY, coverW, coverH)
+                  self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, colors)
+                }
+              })
             } else {
               self._drawCoverPlaceholder(ctx, cardX + 20, coverY, coverW, coverH)
+              self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, colors)
             }
-            self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, colors)
           },
           fail: function() {
             self._drawCoverPlaceholder(ctx, cardX + 20, coverY, coverW, coverH)
@@ -114,6 +126,21 @@ export default {
       }
     },
 
+    _fitCoverRect(imgW, imgH, boxX, boxY, boxW, boxH) {
+      if (!imgW || !imgH) {
+        return { x: boxX, y: boxY, w: boxW, h: boxH }
+      }
+      var scale = Math.min(boxW / imgW, boxH / imgH)
+      var w = imgW * scale
+      var h = imgH * scale
+      return {
+        x: boxX + (boxW - w) / 2,
+        y: boxY + (boxH - h) / 2,
+        w: w,
+        h: h
+      }
+    },
+
     _drawTopDecoration(ctx, w, colors) {
       var centerX = w / 2
       var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']