上篇介绍了一下我从Typora中学到的Clipboard妙用：我们从网页复制文字时，剪切板中会塞入两种格式的数据：纯文本和富文本。当我们粘贴到其他编辑器时，文本编辑器会使用纯文本数据，富文本编辑器会使用富文本数据(Typora中会把对应的文本提取成MarkDown格式)。
具体内容和简单的代码实现可以查看：我从Typora中学到的Clipboard妙用.md
Typora中图片处理方式
经常使用Typora的人应该都知道Typora对于处理图片也有着优秀的使用体验，当插入图片时，你可以指定图片存储方式：
Typora中处理图片上传方式
当我们插入图片时，上传服务会把剪切板中的图片或拖拽的图片自动上传，替换成网络地址。这样当你发送文档给别人时或者发布文档到博客时，不会因为文档在本地而无法查看。
本地文件自动上传并替换为在线地址
我自己也写了一个小工具：file-uploader-cli ,可以处理文件上传到对应的存储服务，比如github、ftp、对象存储等，可以访问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/html和image/png。具体可以参考：我从Typora中学到的Clipboard妙用.md
只复制网络图片
包含网络图片和文字时，clipboard会得到：text/plain和text/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中：
拖拽插入图片
“混沌前端”
网友评论