Merge pull request #1794 from tangly1024/feat/compress-img-in-article

Feat/compress img in article
tangly1024 · Jan 21, 2024 · 993fb15 · 993fb15
2 parents 27eb090 + 5eddf37
commit 993fb15
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 45 deletions.
diff --git a/lib/notion/getPostBlocks.js b/lib/notion/getPostBlocks.js
@@ -62,8 +62,10 @@ export async function getPageWithRetry(id, from, retryAttempts = 3) {
 }
 
 /**
- * 获取到的blockMap删除不需要的字段
- * 并且对于页面内容进行特殊处理，比如文件url格式化
+ * 获取到的页面BLOCK特殊处理
+ * 1.删除冗余字段
+ * 2.比如文件、视频、音频、url格式化
+ * 3.代码块等元素兼容
  * @param {*} id 页面ID
  * @param {*} pageBlock 页面元素
  * @param {*} slice 截取数量

diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js
@@ -1,45 +1,5 @@
 import BLOG from '@/blog.config'
 
-/**
- * 压缩图片
- * 1. Notion图床可以通过指定url-query参数来压缩裁剪图片 例如 ?xx=xx&width=400
- * 2. UnPlash 图片可以通过api q=50 控制压缩质量 width=400 控制图片尺寸
- * @param {*} image
- */
-const compressImage = (image, width = 800, quality = 50, fmt = 'webp') => {
-  if (!image) {
-    return null
-  }
-  if (image.indexOf(BLOG.NOTION_HOST) === 0 && image.indexOf('amazonaws.com') > 0) {
-    return `${image}&width=${width}`
-  }
-  // 压缩unsplash图片
-  if (image.indexOf('https://images.unsplash.com/') === 0) {
-    // 将URL解析为一个对象
-    const urlObj = new URL(image)
-    // 获取URL参数
-    const params = new URLSearchParams(urlObj.search)
-    // 将q参数的值替换
-    params.set('q', quality)
-    // 尺寸
-    params.set('width', width)
-    // 格式
-    params.set('fmt', fmt)
-    params.set('fm', fmt)
-    // 生成新的URL
-    urlObj.search = params.toString()
-    return urlObj.toString()
-  }
-
-  // 此处还可以添加您的自定义图传的封面图压缩参数。
-  // .e.g
-  if (image.indexOf('https://your_picture_bed') === 0) {
-    return 'do_somethin_here'
-  }
-
-  return image
-}
-
 /**
  * 图片映射
  * 1. 如果是 /xx.xx 相对路径格式，则转化为 完整notion域名图片
@@ -96,9 +56,11 @@ const mapImgUrl = (img, block, type = 'block', from) => {
     }
   }
 
-  // 文章封面
-  if (from === 'pageCoverThumbnail') {
-    ret = compressImage(ret)
+  // 文章封面压缩
+  if (from === 'pageCoverThumbnail' || block.type === 'image') {
+  // 统一压缩图片
+    const width = block?.format?.block_width
+    ret = compressImage(ret, width)
   }
 
   return ret
@@ -114,4 +76,44 @@ function isEmoji(str) {
   return emojiRegex.test(str);
 }
 
+/**
+ * 压缩图片
+ * 1. Notion图床可以通过指定url-query参数来压缩裁剪图片 例如 ?xx=xx&width=400
+ * 2. UnPlash 图片可以通过api q=50 控制压缩质量 width=400 控制图片尺寸
+ * @param {*} image
+ */
+const compressImage = (image, width = 800, quality = 50, fmt = 'webp') => {
+  if (!image) {
+    return null
+  }
+  if (image.indexOf(BLOG.NOTION_HOST) === 0 && image.indexOf('amazonaws.com') > 0) {
+    return `${image}&width=${width}&cache=v2`
+  }
+  // 压缩unsplash图片
+  if (image.indexOf('https://images.unsplash.com/') === 0) {
+    // 将URL解析为一个对象
+    const urlObj = new URL(image)
+    // 获取URL参数
+    const params = new URLSearchParams(urlObj.search)
+    // 将q参数的值替换
+    params.set('q', quality)
+    // 尺寸
+    params.set('width', width)
+    // 格式
+    params.set('fmt', fmt)
+    params.set('fm', fmt)
+    // 生成新的URL
+    urlObj.search = params.toString()
+    return urlObj.toString()
+  }
+
+  // 此处还可以添加您的自定义图传的封面图压缩参数。
+  // .e.g
+  if (image.indexOf('https://your_picture_bed') === 0) {
+    return 'do_somethin_here'
+  }
+
+  return image
+}
+
 export { mapImgUrl, compressImage }