多种图片的支持

README.md

@@ -14,7 +14,7 @@ version 是魔改版本
  "id": "obsidian-chat-view-qq",
  "name": "Chat View QQ",
  "version-by": "1.2.1",
- "version": "0.4.1",
+ "version": "0.4.3",
  "minAppVersion": "0.15.0",
  "description": "魔改于QQ Chat View，可以直接复制QQ聊天记录中的信息，实现自动渲染",
  "author": "LincZero",
@@ -25,6 +25,7 @@ version 是魔改版本
 ## 使用示例
 
 ==保留了原插件的功能，原插件功能详见`README 原版.md`，这里仅演示魔改后新增的功能==
+==更多扩展操作详见`demo.md`文件==
 
 使用：（复制代码块里的内容，不要复制代码块）<br/>
 （强烈建议在设置里设置自己的QQ微信名，和常用的“QQ昵称-QQ”项。不要在代码框中局部设置）
@@ -97,6 +98,10 @@ LincZero:
 
 ## 更新日志
 
+### v0.4.3（20221117）
+
+新增了 允许使用多种图片（包括相对路径图片）作为聊天头像和聊天图片。详见demo.md
+
 ### v0.4.2（20221115）
 
 新增了 右键菜单，可以将渲染的聊天记录转为图片并保存到剪切板

demo.md

@@ -0,0 +1,182 @@
+# Chat View QQ 使用示例
+
+**（请使用Obsidian安装该插件后打开）**
+
+## QQ格式
+
+```chat-qq
+{self=用户}
+[作者 LincZero=762699299]
+
+【群友】用户 1:19:33 
+请问这个插件需要怎么使用呢？ 
+ 
+【群主】【作者】LincZero 1:20:22 
+只要将聊天记录直接复制到chat-qq代码框即可，无需任何额外操作与配置，简单易用
+
+```
+
+## 微信格式
+
+```chat-wechat
+{self=用户}
+[作者 LincZero=762699299]
+
+用户: 
+请问这个插件需要怎么使用呢？ 
+ 
+【作者】LincZero:
+只要将聊天记录直接复制到chat-wechat代码框即可，无需任何额外操作与配置，简单易用
+
+```
+
+## （可选）配置操作
+
+### 全局设置
+
+可以在设置菜单中，设置 Chat-qq 的相关设置
+
+也可以在代码框顶部通过 `{}` 和 `[]` 符号进行局部设置。
+
+更推荐进行全局设置
+
+### 指定己方
+
+在全局设置中可以指定多个“己方”，局部设置不能。
+
+由此你可以为你的QQ昵称、微信昵称、或多个不同群的群昵称指定为自己
+
+```chat-wechat
+{self=我自己}
+
+我自己: 
+这是自己说的话
+ 
+别人:
+这是别人说的话
+
+```
+
+### 调整局部宽度与最大高度
+
+```chat-wechat
+{width=600, max-height=500}
+
+用户: 
+当聊天信息非常长的时候
+
+用户:
+设置max-height属性非常有用
+ 
+用户: 
+该属性有默认值
+
+用户:
+如果不希望有最大高度限制
+
+用户:
+可以将值设置为9999
+
+...
+...
+...
+...
+...
+...
+...
+...
+...
+...
+
+```
+
+### 设置QQ头像
+
+使用建议：插件会为每一名用户自动分配默认头像，我也**并不建议**你为所有的聊天记录分配头像，只建议为常用的记录对象在全局设置中进行头像的指定
+
+（这里仅演示QQ头像，更多的）
+
+```chat-qq
+[LincZero=762699299]
+
+LincZero 0:00:00
+我要使用QQ头像
+
+极少出境的路人甲 0:00:00
+我用默认头像就好
+
+极少出境的路人乙 0:00:00
+我用默认头像就好
+ 
+极少出境的路人丙 0:00:00
+我用默认头像就好
+
+```
+
+### 设置微信头像
+
+由于微信API的变动，不能直接获取了（一般需要小程序过去授权，太麻烦了）
+
+## 多种格式图片的使用
+
+```chat-qq
+[LincZero=762699299, 卢曼=demo/卢曼.png, 百度=https://www.baidu.com/img/flexible/logo/pc/result.png]
+
+
+LincZero 0:00:00
+我要使用QQ头像
+我希望使用本地图片或QQ复制过来的照片
+（由于你QQ文件夹没有这张图片，该图片是不显示的）
+![](file:https:///D:\……\Image\…….png)
+
+
+卢曼 0:00:00
+我希望使用相对路径下的图片
+![](demo/卢曼.png)
+
+
+百度 0:00:00
+我希望使用网络上的图片
+（但链接中不能有等号）
+![](https://www.baidu.com/img/flexible/logo/pc/result.png)
+
+
+
+```
+
+## 应用扩展
+
+这里介绍一些使用技巧
+
+该插件可以很方便地记录：
+1. 群友给你的灵感
+2. 有自己QQ给自己发信息记录东西习惯的可以用这个来备份
+3. 可以用来记录名人名言
+4. 不要用来伪造聊天用于其他用途
+
+这里演示一下第三点
+
+```chat-qq
+{self=我}
+[亚里士多德=demo/亚里士多德.png ,伽利略=demo/伽利略.png, 鲁迅=demo/鲁迅.png,]
+
+亚里士多德 0:00:00
+重的物体比轻的物体下落得快
+
+伽利略 0:00:00
+错误的，两个铁球同时落地
+![](demo/比萨斜塔实验.png)
+
+我 0:00:00
+错误的，该课本内容纯属虚构
+真实的是：伽利略没有做过比萨斜塔实验
+再次强调：不要伪造聊天记录
+
+鲁迅 0:00:00
+特别是不要伪造我说的话
+——《我确实没说过》
+```
+
+## 其他功能（导出）
+
+可以在渲染的聊天记录上右键，导出为图片

manifest.json

@@ -2,7 +2,7 @@
  "id": "obsidian-qq-chat-view",
  "name": "Chat View QQ",
  "version-by": "1.2.1",
- "version": "0.4.2",
+ "version": "0.4.3",
  "minAppVersion": "0.15.0",
  "description": "魔改于Chat View，可以直接复制QQ聊天记录中的信息，并自动渲染QQ聊天界面",
  "author": "LincZero",

src/codeBlock.ts

@@ -3,7 +3,7 @@ import {ChatPluginSettings} from "./settings"
 import {registerContextMenu} from "./contextMenu"
 
 import * as webvtt from "node-webvtt";
-import { moment } from 'obsidian'
+import { moment, Notice } from 'obsidian'
 import { MarkdownPostProcessorContext } from 'obsidian';
 
 
@@ -30,7 +30,7 @@ class ChatPatterns {
  static readonly voice = /<v\s+([^>]+)>([^<]+)<\/v>/; // chat-webvtt模式下的对话检测
 
  // static readonly qq_msg = /(.*?)(\s|&nbsp;)([0-2][0-9]:[0-6][0-9]:[0-6][0-9])(\s*?)$/;
- static readonly qq_msg = /(.*?)(\s|&nbsp;)(\d\d\d\d-\d\d-\d\d(\s|&nbsp;))?([0-2][0-9]:[0-6][0-9]:[0-6][0-9])(\s*?)$/; // 分别是：名字 空格 日期空格 时间
+ static readonly qq_msg = /(.*?)(\s|&nbsp;)(\d\d\d\d-\d\d-\d\d(\s|&nbsp;))?([0-2]?[0-9]:[0-6][0-9]:[0-6][0-9])(\s*?)$/; // 分别是：名字 空格 日期空格 时间
  static readonly qq_qunTouXian = /【.*?】(.*?$)/
  static readonly qq_chehui = /(.*?)撤回了一条消息/;
  static readonly qq_jinqyun = /(.*?)加入本群。/;
@@ -281,7 +281,18 @@ export function chat_qq (
  // 颜色头像
  // else if (COLORS.contains(qqHeader)) headerIcon.set(header, `flagColor_${qqHeader}`) // 颜色标记
  // 网址头像
- else headerIcon.set(header, qqHeader);
+ else if(/^http/.test(qqHeader)) {
+ headerIcon.set(header, qqHeader);
+ }
+ // 库内图片
+ else if(/(.*?)(\.png|\.jpg|\.jpeg|\.gif|\.svg|\.bmp)$/gi.test(qqHeader)) {
+ let src = "app:https://local/"+this.app.vault.adapter.basePath+"/"+_.sourcePath.replace(/(\/(?!.*?\/).*?\.md$)/, "")+"/"+qqHeader
+ headerIcon.set(header, src);
+ }
+ // 其他头像
+ else {
+ headerIcon.set(header, qqHeader);
+ }
  }
  // 自动分配默认头像
  else if (countDefaultIcon < numDefaultIcon) {
@@ -313,6 +324,7 @@ export function chat_qq (
  subtext, // subtext
  KEYMAP[line.charAt(0)], 
  el,
+ _,
  continued, // continued
  headerIcon,
  selfConfigs,
@@ -425,6 +437,7 @@ export function chat_wechat (
  subtext, // subtext
  KEYMAP[line.charAt(0)], 
  el,
+ _,
  continued, // continued
  headerIcon,
  selfConfigs,

src/main.ts

@@ -1,4 +1,4 @@
-import {Plugin} from "obsidian";
+import {Plugin, Notice} from "obsidian";
 // import {MarkdownRenderChild} from "obsidian"; // md后处理器
 
 // 全局设置
@@ -37,6 +37,10 @@ export default class ChatViewPlugin extends Plugin {
  this.registerMarkdownCodeBlockProcessor("chat-wechat", (source, el, _) => {
  chat_wechat(source, el, _, this)
  });
+
+ // Vault 是一个资源库，用于存储和管理文档和文件
+ /*new Notice(this.app.vault.getName()); // 这个是整个库的名字
+ console.log(this.app.vault.getFiles());*/
  }
 
  // 插件设置加载后，加载配置

src/render.ts

@@ -1,4 +1,4 @@
-import {Platform, Notice} from "obsidian";
+import {Platform, Notice, FileSystemAdapter, MarkdownPostProcessorContext} from "obsidian";
 
 /**
  * .chat-view-bubble.chat-view-bubble-mode-qq
@@ -22,6 +22,7 @@ export function createChatBubble_withIcon(
  subtext: string,
  align: string,
  element: HTMLElement,
+ _: MarkdownPostProcessorContext,
  continued: boolean,
  headerIcon: Map<string, string>,
  selfConfigs: Array<String>,
@@ -105,15 +106,35 @@ export function createChatBubble_withIcon(
  let msg_splits = msg_line.split(qq_img_re)
  if (msg_splits.length % 2 == 0) new Notice('【可能产生的错误】正则split分割数复数');
  for (let i=0; i<msg_splits.length; i++) {
- // 分隔后的信息
+ // 分隔后的文字信息
  if (i%2==0) message_line.createEl('span', {
  text: msg_splits[i], 
  cls: ["chat-view-qq-message-text"]
  });
- else message_line.createEl('img', {
- cls: ["chat-view-qq-message-msg"],
- attr: {"src": msg_splits[i].replace("file:https:///", "app:https://local/")}
- });
+ // 分隔后的QQ图片/绝对路径图片信息
+ else if (/^file:\/\/\//.test(msg_splits[i])) {
+ message_line.createEl('img', {
+ cls: ["chat-view-qq-message-msg"],
+ attr: {"src": msg_splits[i].replace("file:https:///", "app:https://local/")}
+ });
+ }
+ // 网址图片
+ else if(/^http/.test(msg_splits[i])) {
+ message_line.createEl('img', {
+ cls: ["chat-view-qq-message-msg"],
+ attr: {"src": msg_splits[i] }
+ });
+ }
+ // 分隔后的普通图片信息（相对路径）
+ else {
+ // this.app.vault.adapter.basePath // 可能报错，但能运行
+ // this.app.vault.getName()
+ let src = "app:https://local/"+this.app.vault.adapter.basePath+"/"+_.sourcePath.replace(/(\/(?!.*?\/).*?\.md$)/, "")+"/"+msg_splits[i]
+ message_line.createEl('img', {
+ cls: ["chat-view-qq-message-msg"],
+ attr: {"src": src }
+ });
+ }
  }
  }
  }