压缩封面图

lib/notion/getPageProperties.js

@@ -2,9 +2,9 @@ import { getTextContent, getDateValue } from 'notion-utils'
 import { NotionAPI } from 'notion-client'
 import BLOG from '@/blog.config'
 import formatDate from '../formatDate'
-import { defaultMapImageUrl } from 'react-notion-x'
 // import { createHash } from 'crypto'
 import md5 from 'js-md5'
+import { mapImgUrl } from './mapImage'
 
 export default async function getPageProperties(id, block, schema, authToken, tagOptions) {
   const rawProperties = Object.entries(block?.[id]?.value?.properties || [])
@@ -96,8 +96,9 @@ export default async function getPageProperties(id, block, schema, authToken, ta
   properties.createdTime = formatDate(new Date(value.created_time).toString(), BLOG.LANG)
   properties.lastEditedTime = formatDate(new Date(value?.last_edited_time).toString(), BLOG.LANG)
   properties.fullWidth = value.format?.page_full_width ?? false
-  properties.pageIcon = getImageUrl(block[id].value?.format?.page_icon, block[id].value) ?? ''
-  properties.page_cover = getImageUrl(block[id].value?.format?.page_cover, block[id].value) ?? ''
+  properties.pageIcon = mapImgUrl(block[id].value?.format?.page_icon, block[id].value) ?? ''
+  properties.pageCover = mapImgUrl(block[id].value?.format?.page_cover, block[id].value) ?? ''
+  properties.pageCoverThumbnail = mapImgUrl(block[id].value?.format?.page_cover, block[id].value, 'block', 'pageCoverThumbnail') ?? ''
   properties.content = value.content ?? []
   properties.password = properties.password
     ? md5(properties.slug + properties.password)
@@ -109,27 +110,6 @@ export default async function getPageProperties(id, block, schema, authToken, ta
   return properties
 }
 
-// 从Block获取封面图;优先取PageCover，否则取内容图片
-function getImageUrl(imgObj, blockVal) {
-  if (!imgObj) {
-    return null
-  }
-  if (imgObj.startsWith('/')) {
-    return BLOG.NOTION_HOST + imgObj // notion内部图片转相对路径为绝对路径
-  }
-
-  if (imgObj.startsWith('http')) {
-    // 判断如果是notion上传的图片要拼接访问token
-    const u = new URL(imgObj)
-    if (u.pathname.startsWith('/secure.notion-static.com') && u.hostname.endsWith('.amazonaws.com')) {
-      return defaultMapImageUrl(imgObj, blockVal) // notion上传的图片需要转换请求地址
-    }
-  }
-
-  // 其他图片链接 或 emoji
-  return imgObj
-}
-
 function mapProperties(properties) {
   if (properties?.type === BLOG.NOTION_PROPERTY_NAME.type_post) {
     properties.type = 'Post'

lib/notion/mapImage.js

@@ -1,13 +1,33 @@
 import BLOG from '@/blog.config'
 
 /**
- * notion图片可以通过指定url-query参数来压缩裁剪图片 例如 ?width=200
+ * 压缩图片
+ * 1. Notion图床可以通过指定url-query参数来压缩裁剪图片 例如 ?xx=xx&width=400
+ * 2. UnPlash 图片可以通过api q=50 控制压缩质量 width=400 控制图片尺寸
  * @param {*} image
  */
-const compressImage = (image) => {
+const compressImage = (image, width = 400) => {
   if (image && image.indexOf(BLOG.NOTION_HOST) === 0) {
-    return image + '&width=200'
+    return `${image}&width=${width}`
   }
+  // 压缩unsplash图片
+  if (image && image.indexOf('https://images.unsplash.com/') === 0) {
+    // 将URL解析为一个对象
+    const urlObj = new URL(image)
+    // 获取URL参数
+    const params = new URLSearchParams(urlObj.search)
+    // 将q参数的值替换
+    params.set('q', '50')
+    // 尺寸
+    params.set('width', width)
+    // 格式
+    params.set('fmt', 'webp')
+    // 生成新的URL
+    urlObj.search = params.toString()
+    return urlObj.toString()
+  }
+
+  return image
 }
 
 /**
@@ -18,7 +38,7 @@ const compressImage = (image) => {
  * @param {*} value
  * @returns
  */
-const mapImgUrl = (img, block, type = 'block') => {
+const mapImgUrl = (img, block, type = 'block', from) => {
   if (!img) {
     return null
   }
@@ -30,16 +50,16 @@ const mapImgUrl = (img, block, type = 'block') => {
     ret = img
   }
 
-  // 书签的地址本身就是永久链接，无需处理
-  if (block?.type === 'bookmark') {
-    ret = img
-  }
-
-  // notion 图床转换为永久图床地址
+  // Notion 图床转换为永久地址
   if (ret.indexOf('secure.notion-static.com') > 0 && (BLOG.IMG_URL_TYPE === 'Notion' || type !== 'block')) {
     ret = BLOG.NOTION_HOST + '/image/' + encodeURIComponent(ret) + '?table=' + type + '&id=' + block.id
   }
-  console.log('图床', ret)
+
+  // 文章封面
+  if (from === 'pageCoverThumbnail') {
+    ret = compressImage(ret)
+  }
+
   return ret
 }