从剪切版里粘贴图片: HTML5 Clipboard API hacking

发布于 2015年11月28日
by
归档于 HTML
最近在做一个在线图片编辑器，觉得如果让用户使用剪切板来粘贴图片（而不是将图片保存到本地，然后再选取文件上传）会很方便。在衡量了客户的浏览器状况之后，我决定使用HTML5的local features来hack一下，最终想达到的效果就是：

  1. 用户在photoshop里编辑好原图（可能是从数码相机里传上来的照片）
  1. 然后在photoshop里选取一部分图片区域（比如说照片中的人脸）
  1. 然后在编辑器里点Ctrl + V
  1. 搞掂!photoshop可以关了（保存还是不保存就随便用户咯）
想一想，这一个工作用剪切板来代替文件上传是会方便很多（不用再单独将编辑结果保存为另外一个文件）
prepare!
所以，这个想法就从一个demo开始了。首先，要做好界面上的其他元素的渲染，这个编辑器的界面是用canvas来渲染的，所以要先了解一下canvas的世界里图片是怎样表示的。
about canvas
MDN上的这篇文章列出了一个简单的在canvas中使用位图的例子，然而如果不太考虑计算效率，我们能拿到粘贴过来的图像的dataURL的话，就最方便了，因为dataURL就是一个简单的字符串。
about clipboard
然后还要对“剪切板“这个系统功能有个简单的认识，不管是OSX, Windows, 还是Linux世界里的一堆桌面环境，现在都对剪切板有了以下共识：
  • 剪切板里可以装1个或者多个数据项
  • “粘贴一个图片文件”和“粘贴一块图片”是不同的(!important)：
  • 图片文件是作为一个**文件**出现的，它里面的数据可能是任意格式的甚至不是图片。而*图片*，就肯定是表示图片的数据，它不一定有文件名，而它的数据格式也因不同实现而不同。这篇文章介绍的是第二种情况哦（虽然以后有时间我们也可以把第一种情况给解决掉）。
choose your <del>best</del> favorite weapon!
下一步便是从剪切板里读数据啦。我目前的第一开发浏览器是chrome，所以就从chrome开始边调试边开发吧。对于chrome，开发者们自己写的教程文章很多，于是我便按照这一篇开始了，总结一下，步骤很简单：
  • 拦截元素的paste事件
  • 可以是可编辑元素: input, [contenteditable]，也可以是全局元素： window，所以只有在这个元素被激活时（例如正在编辑一个 contenteditable 时），你的粘贴动作才会被拦截
  • 从event的数据里判断粘贴过来的内容是不是我们想要的内容（我们想要图片）
  • window.onpaste = (event)-> # it’s coffeescript. don’t panic!
  • for item in event.clipboardData.items # 如果你是用 jQuery 拦截了 paste 事件，你需要用 event.originalEvent 来代替 event 
  •   if item.type.match /^image\// # item.type 为粘贴过来的内容的 mime-type，如 image/png
  •     # …
  • 是图片！调用FileReader拿到它的dataURL
  • reader = new FileReader()
  • reader.onload = (event)=> # 注意这里是异步的哦
  • getImageData event.target.result, (data)->
  •   console.log data
  • reader.readAsDataURL item.getAsFile()
faithful gecko
关于在Firefox里获取剪切板数据的文章相对要少一些，而且我发现刚才针对chrome使用的clipboardData.items其实是chrome的私有API，而不是HTML5的标准接口，而 Firefox 实现的才是标准的接口。好吧咱来看看标准里面是怎样说的，其实区别不大：
  • 需要从 event.clipboardData.types (一个类数组) 里判断粘贴过来的数据的类型
  • 需要用 event.clipboardData.getData(type) 方法来获取数据
可是我试了一下后发现一个严重的问题： Firefox不允许粘贴图片 / 在Firefox里粘贴图片时获取不到数据。
ok, 其实以上那个链接中也说得很明白了，想粘贴图片，hack吧：ff里编辑[contenteditable]时，粘贴一个图片的话，ff会把图片当作图文混排的插图将它转化为一个<img />元素插进去（图片数据被转换成dataURL作为这个<img />元素的src属性了），所以该 hack 原理为：
  1. 激活(focus())一个隐藏的div[contenteditable]
  1. 获取paste事件
  1. 虽然ff不允许粘贴图片，但是paste事件还是能捕获到的，只不过从event.clipboardData获取不到任何数据
  1. setTimeout(…, 1)，等待“下一刻”图片被插入到[contenteditable]里面
  1. 在这个[contenteditable]里面找到新添加的<img />元素，并拿到它的src属性（就是我们想要的东西——图片数据的dataURL）。
Internet Explorer, the troll
IE也没有实现HTML5标准里的API，但是IE有个挺简单的私有剪切板API，而且是从IE5.5就已经实现了的。IE的私有API异常简单——直接访问window.clipboardData.getData(type)就可以获取剪切板里的数据了。btw. 大部分同学应该能马上就想到HTML5标准API不设计成这样的原因，那就是：如果API是这样的，那网页便可以随时访问用户剪切板里的内容，用户的隐私便可能会被泄漏。
不过试了一下后发现了IE11和Firefox有一样的问题: 它不认粘贴来的图片，不过IE11的[contenteditable]也支持插入图片并将其转换成<img />，所以用和ff同样的hack来解决就好了。
old-fashioned Opera
Opera的情况和Firefox类似——实现了HTML5标准里的API，但是不支持粘贴图片。不过比较糟糕的是它的[contenteditable]里也不支持插入图片，所以我也暂时没有找到什么办法让它能支持粘贴图片。
Safari
Safari的情况也和Firefox类似，但是在Safari里粘贴至[contenteditable]的图片只会转换为webkit-fake-url://…的形式，而这个数据似乎对我们没有任何用，它只是个本地的临时url，只能在当前网页的<img />元素里显示图片，用javascript也读取不到(非同源)，所以也暂时没办法让它支持粘贴图片了。
ps. webkit的bugzilla里有一个放了很久的issue，正是针对这个问题而言的，所以看来从[contenteditable]里粘贴暂时看来是没戏了，有其他办法么？
share!
其实俺一开始也到处搜索了一下，希望有人已经做了一个能实现粘贴图片功能的、支持不同浏览器的小lib(或者snippets)，后来发现确实没有，所以俺就来做这个事儿吧，这样我的编辑器也可以简单地引用它来读取剪切板里的图片:
  • 一个简单的演示页面(先复制一段文字或者图片，然后点击网页四个方框中的任意一个，然后按Ctrl + V粘贴)：http://puffant.github.io/paste.js/
在这过程中我还找到了一些十分有用的资源(上文中没有提到的)：
  • Local I/O tests：除了 Clipboard API，这里还包括 Drag&Drop、FileReader、FileSaving、CopyAPI(“点击我拷贝到剪切板”这样的功能)的原生JavaScript实现demo。
碎碎念
发表评论?

发表评论