crossnote-app icon indicating copy to clipboard operation
crossnote-app copied to clipboard

希望增加直接粘贴系统拷贝的图片的功能。

Open lvoooo opened this issue 5 years ago • 23 comments

希望增加直接粘贴系统拷贝的图片的功能。

体验了一下,自己上传图片再回过头贴链接,或者点击打开文件夹再上传都感觉比较麻烦。

要是直接能复制粘贴就好了。

或者进一步,提供配置图床的功能,这样图片多的用户,自己配置图床就好了,也不用给开发者增加负担。

lvoooo avatar Jan 06 '20 06:01 lvoooo

Hi @lvoooo

谢谢你的反馈。直接通过系统复制图片然后粘贴到浏览器这种我记得浏览器是不支持的,我得再去调研下。不过拖动图片到浏览器再上传是可以被支持的。

关于图床,我目前知道这么几个:

  • sm.ms: 貌似 sm.ms 现在的跨域做了限制,导致图片是无法从 crossnote.app 上被上传的。
  • imgur:这个是国外的图床,问题就是通过这个图片上传的图片会导致国内的人看不到图片。
  • qiniu:这个好像需要用户自己提供 API Key 什么的给我,然后我储存下。感觉这个就涉及到了用户信任的问题。

其实我目前倾向于我自己搭建个免费的图床专门用于 crossnote 网站,可能就使用阿里云的 OSS 吧,不过开发支持需要点时间。

感谢

shd101wyy avatar Jan 06 '20 08:01 shd101wyy

图片直接粘贴功能+1,离不开typora 、印象笔记是因为可以直接粘贴图片进去自动上传到图床

Ahian avatar Apr 07 '20 06:04 Ahian

@Ahian 当前可以在编辑器中用 /image 命令来上传图片。 今天下午我去研究一下咋整系统粘贴。

shd101wyy avatar Apr 07 '20 06:04 shd101wyy

很遗憾,貌似浏览器端实现不了系统粘贴图片。试了下印象笔记的网页端也无法从系统粘贴直接上传笔记。

shd101wyy avatar Apr 07 '20 06:04 shd101wyy

图片直接保存到 git 中更直接。

snowyu avatar Jul 10 '20 04:07 snowyu

可以借鉴一下 tinymce 这个编辑器,可以直接复制图片然后上传,也可以拖拽 要是插件支持复制上传,我就抛弃typora了。 另外好像没看到配置阿里oss的?用的是七牛?

Lingouzi avatar Apr 25 '21 03:04 Lingouzi

需要浏览器支持 async-clipboard api,并且浏览器也必须设置允许该网站访问剪贴板.

snowyu avatar Apr 25 '21 07:04 snowyu

我最近正在考虑迁移 crossnote 到 vscode-pwa,作为一个插件的形式存在。

shd101wyy avatar Apr 25 '21 12:04 shd101wyy

不错, 这样做, 包一个Electron的壳也非常容易本地存储.

文件系统可以考虑参考这个: BrowserFS, 模拟nodejs的FileSystemAPI, 有各种FS插件,便于扩展. 甚至可以将zip文件当文件系统(默认的带ZIP插件是只读,不过自己扩展也不难)

snowyu avatar Apr 26 '21 01:04 snowyu

@isomorphic-git/lightning-fs 作为git的FS使用过,这货的问题是当我改用其它backend就触雷了, 提过一个pr feat: add multi database backend supports

snowyu avatar Apr 26 '21 01:04 snowyu

文件系统我已经差不多写好:https://github.com/0xGG/vscode-web-fs 现在主要就是在写 isomorphic-git 的支持:https://github.com/0xGG/vscode-isomorphic-git , 会花费很多时间。但是写完之后就可以开始移植 Crossnote 的 vscode 插件了。

shd101wyy avatar Apr 26 '21 08:04 shd101wyy

@isomorphic-git/lightning-fs 在cordova 上跑有问题,如果修改lightning-fs 直接用Cordova 的File API, isomorphic-git 会大量报错,这是Cordova的设计局限. 而用indexDB, local-storage则会受到浏览器的存储限制.

web-fs 不建议用 lightning-fs 作为适配,换后端文件系统太麻烦. 当然如果你绑定使用 isomorphic-git 例外,可以使用我的那个pr. 不过我记得 isomorphic-git 是支持 BrowserFS 作为它的文件系统的. BrowserFS 的强大在于多文件系统混合使用,更换也方便. 至于有多少坑,我没有用过,不好说. 反正 lightning-fs 和 isomorphic-git 的坑也不少.

另外 isomorphic-git 的也不是git 的完全实现,有许多功能还不完善,比如 log file 和自动 merge 处理, 不过基本够用. 更完善的git实现是这个: https://github.com/petersalomonsen/wasm-git 直接将 libgit2 通过 emscripten 编译为 webasm 的版本, git的完整实现. 然后用BrowserFS的Emscripten后端访问. 这个的问题是要自己写Emscripten的文件系统后端,它自带的后端只有: MEMFS, NODEFS 和 IDBFS.

如果要工作在浏览器上,使用MEMFS会有内存限制的问题,而使用IDB(indexDB)会好些,但是也会受到浏览器的限制 这可能导致只能在浏览器上缓存部分文件.导致开发实现的逻辑复杂. 如果有客户端(例如Electron)支持就不用考虑这些.

vscode-isomorphic-git 的目的是什么,解决什么问题? 如果是 vscode的插件, vscode不是早就支持Git了么 另外 vscode-web-fs 也是, 它的目的? vscode 不就是一个Electron应用,直接能访问到local file system 的.

snowyu avatar Apr 26 '21 12:04 snowyu

另外 vscode-web-fs 也是, 它的目的? vscode 不就是一个Electron应用,直接能访问到local file system 的.

现在想做的是把 vscode 打包成 pwa。vscode-web-fs 实现了 memfs 和 nativefs 两种 file system provider。基本上来讲可以在网页端利用 native file system api 编辑本地文件。

shd101wyy avatar Apr 26 '21 12:04 shd101wyy

vscode-web 的目标是直接编译vscode项目直接在浏览器上运行vscode. 那么你的目标是通过vscode-web-fs插件,同时实现crossnote在浏览器上或本地 vscode 运行?

这个已经能够直接读取github文件: https://github1s.com/conwnet/github1s 可以参考.

snowyu avatar Apr 26 '21 13:04 snowyu

他的这个和我这个差别还是很大的。他的实现使用了 github 的 api 来实现 vscode 的 file system provider,所以会有些限制,例如项目内的全文本搜索就无法实现。
我现在在做的是在浏览器端支持 isomorphic-git 来克隆一个完整的 git 仓库,而且不仅仅是 github 的仓库。

shd101wyy avatar Apr 26 '21 14:04 shd101wyy

我大概这周可以完成一个小的 git 支持的 vscode-pwa 雏形。

shd101wyy avatar Apr 26 '21 14:04 shd101wyy

vscode-web 的目标是直接编译vscode项目直接在浏览器上运行vscode. 那么你的目标是通过vscode-web-fs插件,同时实现crossnote在浏览器上或本地 vscode 运行?

对 :+1:

我准备看看 wasm-git,谢谢!

shd101wyy avatar Apr 26 '21 15:04 shd101wyy

如果是这样, 实现能支持多后端的FS 架构更好. 可能这块你没有理解我的意思.

举个例子, 开发不同的云盘后端插件, 可以配置挂不同云盘, 而且可以利用复合FS(BrowserFS的 AsyncMirror后端有点这个意思)的概念: 可以在保存到本地文件的同时同步到云盘, 再做一个带版本管理的Git FS后端, 复合到上面的FS,就可以实现同步远程Git仓库并同步云盘.

用伪代码可能更清楚些:

const fs = await FS.configure({
  name: 'MountableFileSystem', // 实现挂载点的后端
  mountPoint: {
    '/tmp': 'inMemory', // 该挂载点启用内存后端
    '/data': {
      name: 'Git', // 该挂载点启用Git后端进行版本控制
      fs: { // 配置Git的后端
        name: 'mirror', // 启用 镜像 后端
        mirrors: [
          {
              name: 'nodejs' // nodejs 本地文件存储后端
              folder: '/user/data', // 配置存储的文件夹
          },
          {
              name: 'dropbox' //  dropbox存储后端
              ...., // 其它dropbox参数
          },
        ],
      },
    },
    '/pic': {
      name: 'dropbox', // 图片直接扔到云盘,不用版本控制
    }
  }
})

snowyu avatar Apr 27 '21 00:04 snowyu

这样的工作量看上去有点大 😂 我先快速开发下,以后有必要再进行迁移。

shd101wyy avatar Apr 27 '21 03:04 shd101wyy

我刚看了下 BrowserFS,却是很好 :+1: 我考虑下使用它吧!

shd101wyy avatar Apr 30 '21 06:04 shd101wyy

这样后面适配会更容易些 :+1:

先试验下需要的主要功能能否跑通.

snowyu avatar Apr 30 '21 07:04 snowyu

才发现 BrowserFS 的最新一次 npm package 的 release 时间是 2017 年 :joy:

我试了下 wasm-git,发现有些命令不支持,例如 revparse, branch 等。所以我可能还是暂时使用 isomorphic-git 了

shd101wyy avatar Apr 30 '21 07:04 shd101wyy

branch 是更高层的配置指令,revparse是有的,它完整API指令集如下:

	{ "add",          lg2_add,          1 },
	{ "blame",        lg2_blame,        1 },
	{ "cat-file",     lg2_cat_file,     1 },
	{ "checkout",     lg2_checkout,     1 },
	{ "clone",        lg2_clone,        0 },
	{ "commit",       lg2_commit,       1 },
	{ "config",       lg2_config,       1 },
	{ "describe",     lg2_describe,     1 },
	{ "diff",         lg2_diff,         1 },
	{ "fetch",        lg2_fetch,        1 },
	{ "for-each-ref", lg2_for_each_ref, 1 },
	{ "general",      lg2_general,      0 },
	{ "index-pack",   lg2_index_pack,   1 },
	{ "init",         lg2_init,         0 },
	{ "log",          lg2_log,          1 },
	{ "ls-files",     lg2_ls_files,     1 },
	{ "ls-remote",    lg2_ls_remote,    1 },
	{ "merge",        lg2_merge,        1 },
	{ "push",         lg2_push,        1  },
	{ "remote",       lg2_remote,       1 },
	{ "rev-list",     lg2_rev_list,     1 },
	{ "rev-parse",    lg2_rev_parse,    1 },
	{ "show-index",   lg2_show_index,   0 },
	{ "stash",        lg2_stash,        1 },
	{ "status",       lg2_status,       1 },
	{ "tag",          lg2_tag,          1 },

snowyu avatar Apr 30 '21 11:04 snowyu