feat: support extract images (#67)

laggage · web-flow · commit 74521124db20 · 2022-09-17T22:04:18.000+08:00
* feat: support extract images

* feat(extract-images): allow optionally extract local or web images

* feat(extract-images): allow automatically upload before save if configured

* docs: add introduction about extract images
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@
 	- [图片上传](#图片上传)
 	- [博文分类管理](#博文分类管理)
 	- [导出 pdf](#导出-pdf)
+	- [提取图片](#提取图片)
 	- [博文设置面板](#博文设置面板)
 - [vscode 版本要求](#vscode-版本要求)
 - [插件设置](#插件设置)
@@ -106,6 +107,22 @@
 
 <kbd><img src="https://img2022.cnblogs.com/blog/35695/202209/35695-20220907203200119-1667606464.png"></kbd>
 
+### 提取图片
+
+你可能会在markdown文件中使用本地的相对路径的图片, 将这样的markdown发布到博客园会导致图片无法正常展示, 为此我们提供了 `提取图片` 功能, 你可以通过编辑器的上下文菜单调用此功能
+
+![image](https://img2022.cnblogs.com/blog/1596066/202209/1596066-20220917215536822-836105648.png)
+
+也可以在设置中配置保存到博客园时自动提取图片
+
+![image](https://img2022.cnblogs.com/blog/1596066/202209/1596066-20220917215650930-372126612.png)
+
+此功能除了可以提取本地图片, 也可以提取其他承载在第三方图床中的图片
+
+![image](https://img2022.cnblogs.com/blog/1596066/202209/1596066-20220917215802986-44248462.png)
+
+此功能会上传图片到博客园然后替换源markdown文件中的图片链接
+
 ### 博文设置面板
 
 首次发布本地 markdown 文件到博客园时，会打开博文设置面板允许编辑博文相关的设置
diff --git a/package.json b/package.json
@@ -226,6 +226,12 @@
                 "title": "导出pdf",
                 "category": "Cnblogs",
                 "enablement": "vscode-cnb.isAuthorized"
+            },
+            {
+                "command": "vscode-cnb.extract-images",
+                "title": "提取图片",
+                "category": "Cnblogs",
+                "enablement": "vscode-cnb.isAuthorized"
             }
         ],
         "configuration": [
@@ -262,6 +268,25 @@
                         "scope": "application",
                         "type": "boolean",
                         "markdownDescription": "设置是否根据博文分类保存到不同的文件夹中"
+                    },
+                    "cnblogsClientForVSCode.automaticallyExtractImages": {
+                        "order": 4,
+                        "default": "---",
+                        "scope": "application",
+                        "enum": [
+                            "---",
+                            "local",
+                            "web",
+                            "all"
+                        ],
+                        "enumItemLabels": [
+                            "不自动提取图片",
+                            "自动提取本地图片",
+                            "自动提取网络图片",
+                            "自动提取全部图片"
+                        ],
+                        "editPresentation": "singlelineText",
+                        "description": "配置保存到博客园时要自动进行提取上传到博客园的图片"
                     }
                 }
             }
@@ -583,6 +608,11 @@
                     "command": "vscode-cnb.export-post-to-pdf",
                     "when": "resourceLangId == markdown",
                     "group": "cnblogs@8"
+                },
+                {
+                    "command": "vscode-cnb.extract-images",
+                    "when": "resourceLangId == markdown",
+                    "group": "cnblogs@9"
                 }
             ],
             "editor/title": [
diff --git a/src/commands/commands-registration.ts b/src/commands/commands-registration.ts
@@ -33,6 +33,7 @@ import { revealWorkspaceInOs } from './reveal-workspace-in-os';
 import { viewPostOnline } from './view-post-online';
 import { exportPostToPdf } from './pdf/export-pdf.command';
 import { pullPostRemoteUpdates } from './pull-post-remote-updates';
+import { extractImages } from './extract-images';
 
 export const registerCommands = () => {
     const context = globalState.extensionContext;
@@ -74,6 +75,7 @@ export const registerCommands = () => {
         commands.registerCommand(`${appName}.reveal-workspace-in-os`, revealWorkspaceInOs),
         commands.registerCommand(`${appName}.view-post-online`, viewPostOnline),
         commands.registerCommand(`${appName}.export-post-to-pdf`, exportPostToPdf),
+        commands.registerCommand(`${appName}.extract-images`, extractImages),
     ];
     context?.subscriptions.push(...disposables);
 };
diff --git a/src/commands/extract-images.ts b/src/commands/extract-images.ts
@@ -0,0 +1,111 @@
+import { Uri, workspace, window, MessageOptions, MessageItem, ProgressLocation, Range } from 'vscode';
+import { MarkdownImage, MarkdownImagesExtractor } from '../services/images-extractor.service';
+
+export const extractImages = async (
+    arg: unknown,
+    inputImageType: MarkdownImagesExtractor['imageType'] | null | undefined
+) => {
+    if (arg instanceof Uri && arg.scheme === 'file') {
+        const markdown = new TextDecoder().decode(await workspace.fs.readFile(arg));
+        const extractor = new MarkdownImagesExtractor(markdown, arg);
+        const images = extractor.findImages();
+        const availableWebImagesCount = images.filter(extractor.createImageTypeFilter('web')).length;
+        const availableLocalImagesCount = images.filter(extractor.createImageTypeFilter('local')).length;
+        if (images.length <= 0) {
+            await window.showWarningMessage('没有可以提取的图片');
+            return;
+        }
+        const messageItems: (MessageItem & Partial<Pick<MarkdownImagesExtractor, 'imageType'>>)[] = [
+            { title: '提取本地图片', imageType: 'local' },
+            { title: '提取网络图片', imageType: 'web' },
+            { title: '提取全部', imageType: 'all' },
+            { title: '取消', imageType: undefined, isCloseAffordance: true },
+        ];
+        let result = messageItems.find(x => inputImageType != null && x.imageType === inputImageType);
+        result = result
+            ? result
+            : await window.showInformationMessage<typeof messageItems extends [...infer U] ? U[0] : never>(
+                  '请选择要提取哪些图片? 注意! 此操作会替换源文件中的图片链接!',
+                  {
+                      modal: true,
+                      detail:
+                          `共找到 ${availableWebImagesCount} 张可以提取的网络图片\n` +
+                          `${availableLocalImagesCount} 张可以提取的本地图片`,
+                  } as MessageOptions,
+                  ...messageItems
+              );
+        const editor = window.visibleTextEditors.find(x => x.document.fileName === arg.fsPath);
+
+        if (result && result.imageType && editor) {
+            extractor.imageType = result.imageType;
+            if (extractor.findImages().length <= 0) {
+                await window.showWarningMessage('没有可以提取的图片');
+                return;
+            }
+            const document = editor.document;
+            await document.save();
+            const failedImages = await window.withProgress(
+                { title: '提取图片', location: ProgressLocation.Notification },
+                async progress => {
+                    extractor.onProgress = (idx, images) => {
+                        const total = images.length;
+                        const image = images[idx];
+                        progress.report({
+                            increment: (idx / total) * 80,
+                            message: `[${idx + 1} / ${total}] 正在提取 ${image.symbol}`,
+                        });
+                    };
+                    const extractResults = await extractor.extract();
+                    let idx = 0;
+                    const total = extractResults.length;
+                    await editor.edit(editBuilder => {
+                        for (let [range, , extractedImage] of extractResults
+                            .filter((x): x is [source: MarkdownImage, result: MarkdownImage] => x[1] != null)
+                            .map(
+                                ([sourceImage, result]): [
+                                    range: Range | null,
+                                    sourceImage: MarkdownImage,
+                                    extractedImage: MarkdownImage
+                                ] => {
+                                    if (sourceImage.index == null) {
+                                        return [null, sourceImage, result];
+                                    }
+
+                                    const endPos = document.positionAt(
+                                        sourceImage.index + sourceImage.symbol.length - 1
+                                    );
+                                    return [
+                                        new Range(
+                                            document.positionAt(sourceImage.index),
+                                            endPos.with({ character: endPos.character + 1 })
+                                        ),
+                                        sourceImage,
+                                        result,
+                                    ];
+                                }
+                            )) {
+                            if (range == null) {
+                                continue;
+                            }
+                            progress.report({
+                                increment: (idx / total) * 20 + 80,
+                                message: `[${idx + 1} / ${total}] 执行替换 ${extractedImage.symbol}`,
+                            });
+
+                            editBuilder.replace(range, extractedImage.symbol);
+                        }
+                    });
+                    await document.save();
+                    return extractResults.filter(x => x[1] === null).map(x => x[0]);
+                }
+            );
+            if (failedImages && failedImages.length > 0) {
+                await window.showErrorMessage(
+                    `${failedImages.length}张图片提取失败\n${failedImages
+                        .map(x => [x.symbol, extractor.errors.find(y => y[0] === x.symbol)?.[1] ?? ''].join(': '))
+                        .join('\n')}`
+                );
+            }
+        }
+    }
+};
diff --git a/src/commands/posts-list/save-post.ts b/src/commands/posts-list/save-post.ts
@@ -14,6 +14,8 @@ import { PostEditDto } from '../../models/post-edit-dto';
 import { PostTitleSanitizer } from '../../services/post-title-sanitizer.service';
 import { postConfigurationPanel } from '../../services/post-configuration-panel.service';
 import { saveFilePendingChanges } from '../../utils/save-file-pending-changes';
+import { extractImages } from '../extract-images';
+import { Settings } from '../../services/settings.service';
 
 const parseFileUri = async (fileUri: Uri | undefined): Promise<Uri | undefined> => {
     if (fileUri && fileUri.scheme !== 'file') {
@@ -104,9 +106,13 @@ export const saveLocalDraftToCnblogs = async (localDraft: LocalFileService) => {
         post,
         successCallback: async savedPost => {
             await refreshPostsList();
+            await openPostFile(localDraft);
+            if (Settings.automaticallyExtractImagesType) {
+                await extractImages(localDraft.filePathUri, Settings.automaticallyExtractImagesType);
+            }
             await PostFileMapManager.updateOrCreate(savedPost.id, localDraft.filePath);
-            postsDataProvider.fireTreeDataChangedEvent(undefined);
             await openPostFile(localDraft);
+            postsDataProvider.fireTreeDataChangedEvent(undefined);
             AlertService.info('博文已创建');
         },
         beforeUpdate: async (postToSave, panel) => {
@@ -162,6 +168,9 @@ export const savePostToCnblogs = async (input: Post | PostEditDto | undefined, i
             });
             let success = false;
             try {
+                if (Settings.automaticallyExtractImagesType && localFilePath) {
+                    await extractImages(Uri.file(localFilePath), Settings.automaticallyExtractImagesType);
+                }
                 let { id: postId } = await postService.updatePost(post);
                 if (!isNewPost) {
                     await openPostInVscode(postId);
diff --git a/src/services/image.service.ts b/src/services/image.service.ts
@@ -1,8 +1,10 @@
 import fetch from 'node-fetch';
+import FormData from 'form-data';
 import { accountService } from './account.service';
 import { globalState } from './global-state';
-import FormData from 'form-data';
 import { throwIfNotOkResponse } from '../utils/throw-if-not-ok-response';
+import { Stream } from 'stream';
+import mime from 'mime';
 
 export class ImageService {
     private static _instance: ImageService;
@@ -18,7 +20,10 @@ export class ImageService {
 
     async upload(file: any): Promise<string> {
         const form = new FormData();
-        form.append('image', file, file.name);
+        form.append('image', file, {
+            filename: file.name ?? 'image.png',
+            contentType: 'image/png',
+        });
         const response = await fetch(`${globalState.config.apiBaseUrl}/api/posts/body/images`, {
             method: 'POST',
             headers: [accountService.buildBearerAuthorizationHeader()],
@@ -27,6 +32,22 @@ export class ImageService {
         await throwIfNotOkResponse(response);
         return await response.text();
     }
+
+    async download(
+        link: string,
+        fileNameWithoutExtension?: string
+    ): Promise<Stream | [statusCode: number, statusText: string, responseBody: string]> {
+        const response = await fetch(link, {
+            method: 'get',
+        });
+        const contentType = response.headers.get('content-type') ?? 'image/png';
+        fileNameWithoutExtension = !fileNameWithoutExtension ? 'image' : fileNameWithoutExtension;
+        return response.ok && response.body != null
+            ? Object.assign(Stream.Readable.from(await response.buffer()), {
+                  path: fileNameWithoutExtension + '.' + mime.extension(contentType),
+              })
+            : [response.status, response.statusText, await response.text()];
+    }
 }
 
 export const imageService = ImageService.instance;
diff --git a/src/services/images-extractor.service.ts b/src/services/images-extractor.service.ts
diff --git a/src/services/settings.service.ts b/src/services/settings.service.ts
