|
|
@@ -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']
|