我从Typoro中学到的Clipboard妙用(二).md

简介: clipboard中图片处理

上篇介绍了一下我从Typora中学到的Clipboard妙用:我们从网页复制文字时,剪切板中会塞入两种格式的数据:纯文本和富文本。当我们粘贴到其他编辑器时,文本编辑器会使用纯文本数据,富文本编辑器会使用富文本数据(Typora中会把对应的文本提取成MarkDown格式)。

具体内容和简单的代码实现可以查看:我从Typora中学到的Clipboard妙用.md

Typora中图片处理方式

经常使用Typora的人应该都知道Typora对于处理图片也有着优秀的使用体验,当插入图片时,你可以指定图片存储方式:

Typora中处理图片上传方式

当我们插入图片时,上传服务会把剪切板中的图片或拖拽的图片自动上传,替换成网络地址。这样当你发送文档给别人时或者发布文档到博客时,不会因为文档在本地而无法查看。

本地文件自动上传并替换为在线地址

我自己也写了一个小工具:file-uploader-cli ,可以处理文件上传到对应的存储服务,比如githubftp、对象存储等,可以访问github地址查看具体的配置方法(uPic和Picgo也支持Typora)。

对于自定义上传服务,当有图片插入时,Typora会调用上传服务并传入文件路径,上传服务在控制台打印上传结果即可。

读取剪切板中图片数据

我们还是在控制台中进行快速测试,打开任意网页,在element面板中找到任意标签添加contenteditable属性,当前标签就变成可编辑元素了。

<p contenteditable>
  xxxx
</p>

控制台中执行代码:

document.addEventListener('paste', function(e){
    console.log(e)
    const items = e.clipboardData.items;
    console.log(items)
    const fileList = e.clipboardData.files
    console.log(fileList)
    for(let i=0;i< items.length;i++){
        console.log(items[i])
        let f = items[i].getAsFile()
        console.log(f)
    }
    e.preventDefault();
})
本地文件

复制本地文件(可以是图片或者其他格式文件),并在标签中执行粘贴操作:

复制本地文件

从上图可以看出,从clipboardData中取出图片数据有两种方式:

  • e.clipboardData.items,是一个DataTransferItemList类型数据,每个元素是一个DataTransferItem类型,可以通过DataTransferItem.getAsFile()获取到File对象
  • e.clipboardData.files 是一个FileList, 每个元素是一个File
只有当粘贴的是 本地文件时,DataTransferItem.getAsFile才可以获取到数据,否则为null。
网络图片

当复制的数据是网络图片时,分为两种情况:

  • 只包含网络图片
  • 包含网络图片和文字

当复制的是网络图片(从网页直接右键复制图片)时,clipboard会得到两种数据:text/htmlimage/png。具体可以参考:我从Typora中学到的Clipboard妙用.md

只复制网络图片

包含网络图片和文字时,clipboard会得到:text/plaintext/html
包含网络图片和文字

所以对于包含网络图片的两种方式,在paste事件中获取到的数据也是不同的:

只包含图片

包含图片和文本

获取图片文件

从上面的信息我们可以了解到:只有当粘贴的为本地图像和网络图片时,我们可以通过DataTransferItem.getAsFile获取到图片对象;当包含文本时可以通过DataTransferItem.getAsString获取到纯文本和富文本数据。

Typora是如何处理图片数据的
粘贴图片到Typora

如果是本地文件,Typora会根据偏好设置中的图片设置进行保存:

  • 当选择“上传服务”时,会将本地图片地址传给自定义的图片上传服务,如果上传成功则替换成网络地址;如果上传失败则保持本地图片的引用。
  • 如果选择了其他配置,则会复制图片到对应配置的文件夹下。

如果是剪切板中的非本地图片(比如截图复制),会先保存成本地文件,再进行上传或复制。

如果是富文本数据,会直接进行渲染(未勾选对网络位置的图片应用上述规则)。

拖拽图片到Typora

Typora支持paste图片自动上传,也支持拖拽图片上传,我们可以通过Drop Event获取到File对象

document.addEventListener('drop', function(e){
    console.log(e)
    const items = e.dataTransfer.items;
    console.log(items)
    const fileList = e.dataTransfer.files
    console.log(fileList)
    e.preventDefault();
})

拖拽数据存储在DragEvent.dataTransfer中:

拖拽插入图片

更多文章欢迎关注“混沌前端”

相关文章
|
消息中间件 JavaScript 小程序
SpringBoot 实现 MySQL 百万级数据量导出并避免 OOM 的解决方案
SpringBoot 实现 MySQL 百万级数据量导出并避免 OOM 的解决方案
|
安全 编译器 开发者
Python打包成.exe文件直接运行
Python打包成.exe文件直接运行
1412 1
|
SQL 关系型数据库 MySQL
实时计算 Flink版产品使用问题之如何配置Connector来保持与MySOL一致
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
存储 程序员 C语言
C语言:从内存出发,理解变量
C语言:从内存出发,理解变量
167 0
|
设计模式 存储 算法
构造者设计模式
构造者设计模式
IDEA入门到精通系列(三)
IDEA入门到精通系列(三)
547 0
IDEA入门到精通系列(三)
|
缓存 网络协议 Shell
Linux 下 python 开发环境部署(有基础)|学习笔记
快速学习 Linux 下 python 开发环境部署(有基础)
1019 0
Linux 下 python 开发环境部署(有基础)|学习笔记
memset等动态内存管理函数举例
动态内存管理 以mem开头的函数,初始化内存空间 memset–使用一个常量字节填充内存空间
163 0
|
弹性计算
【新功能】钉钉绑定ecs控制台,快速上云,高效操作资源。
钉钉绑定控制台,大大提高了用户对资源的可操作性和易用性。
3511 0
【新功能】钉钉绑定ecs控制台,快速上云,高效操作资源。
|
SQL 数据库
06-学院管理系统数据库-固定资产管理数据操作(二)
06-学院管理系统数据库-固定资产管理数据操作(二)
341 0