feat(showheaderavatar): support config showHeaderAvatar

weirui88888 · Dec 15, 2023 · 6a4972e · 6a4972e
1 parent 4ccea0c
commit 6a4972e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/src/defaultCanvasSetting.js b/src/defaultCanvasSetting.js
@@ -25,6 +25,7 @@ const defaultCanvasSetting = {
     headerPaddingTop: 100,
     headerPaddingBottom: 30,
     // avatar
+    showHeaderAvatar: true,
     headerAvatarSize: 80,
     headerAvatarBorderWidth: 4,
     headerAvatarBorderColor: '#ffcc00',

diff --git a/src/draw.js b/src/draw.js
@@ -233,13 +233,20 @@ class Drawer {
 
   async drawAvatar() {
     const { ctx, avatar: avatarSrc, barWatcher, headerCpu } = this
+    const {
+      showHeaderAvatar,
+      headerAvatarBorderWidth,
+      headerAvatarBorderColor,
+      avatarRadius,
+      avatarCenterPointX,
+      avatarCenterPointY
+    } = headerCpu.calculateApplyAvatar
+    if (!showHeaderAvatar) return this
     // DONE STEP3
     barWatcher.setTotal(4)
     barWatcher.update(3, {
       step: 'Drawing Avatar'
     })
-    const { headerAvatarBorderWidth, headerAvatarBorderColor, avatarRadius, avatarCenterPointX, avatarCenterPointY } =
-      headerCpu.calculateApplyAvatar
     const avatar = await loadImage(avatarSrc)
     ctx.save()
     ctx.beginPath()

diff --git a/src/headerCpu.js b/src/headerCpu.js
@@ -22,8 +22,10 @@ class HeaderCpu {
   }
 
   get calculateApplyAvatar() {
-    const { headerAvatarSize, headerAvatarBorderWidth, headerAvatarBorderColor } = this.canvasHeaderSetting
+    const { showHeaderAvatar, headerAvatarSize, headerAvatarBorderWidth, headerAvatarBorderColor } =
+      this.canvasHeaderSetting
     return {
+      showHeaderAvatar,
       avatarSize: headerAvatarSize,
       avatarRadius: headerAvatarSize / 2,
       headerAvatarBorderWidth,
@@ -100,8 +102,15 @@ class HeaderCpu {
   }
 
   get calculateAvatarCenterPointPosition() {
-    const { headerAlign, headerPaddingTop, headerAvatarSize, headerAvatarBorderWidth } = this.canvasHeaderSetting
+    const { showHeaderAvatar, headerAlign, headerPaddingTop, headerAvatarSize, headerAvatarBorderWidth } =
+      this.canvasHeaderSetting
     const { x, canvasWidth } = this
+    if (!showHeaderAvatar) {
+      return {
+        avatarCenterPointX: canvasWidth / 2,
+        avatarBottomY: headerPaddingTop
+      }
+    }
     switch (headerAlign) {
       case 'left':
         return {

diff --git a/src/themes/default/index.js b/src/themes/default/index.js
@@ -35,6 +35,7 @@ You can use the generated images anywhere, such as on social media, resumes, jou
       headerPaddingTop: 100,
       headerPaddingBottom: 30,
       // avatar
+      showHeaderAvatar: true,
       headerAvatarSize: 80,
       headerAvatarBorderWidth: 4,
       headerAvatarBorderColor: '#ffcc00',