Javascript:如何在粘贴事件中从剪贴板访问Hi-DPI/Retina图像?

Cha*_*ory 6 javascript image retina-display retina

我有一个粘贴处理程序,它在剪贴板中获取图像并将其上传到服务器.我可以成功访问剪贴板数据,但如果剪贴板图像数据的分辨率高于72ppi,则会下采样到72ppi.

当将MacBook Retina上的屏幕截图带到剪贴板时(通过Command-Control-Shift-3.图像的剪贴板数据为144ppi - 这是我粘贴到Photoshop时出现的ppi.但是,当我粘贴到浏览器中时,这尤其令人烦恼)图像被下采样一半.

我谷歌搜索粘贴日试图找到解决方案,但没有运气.我假设使用.getAsFile()方法进行下采样.

这是代码的简化版本:

$('html').bind('paste', function(e) {
  e.preventDefault();
  var item = (e.clipboardData || e.originalEvent.clipboardData).items[0];
  var type = item.type.split('/').shift();
  if (type == "image"){
    var file = item.getAsFile();
    var blob = URL.createObjectURL(file); // Blob
    window.open(blob);
  }
});
Run Code Online (Sandbox Code Playgroud)

这是一个JSFiddle:

http://jsfiddle.net/zd5pX/1/
Run Code Online (Sandbox Code Playgroud)

要在Retina机器上重现问题:

  1. 截图到剪贴板Command-Control-Shift-3.
  2. 单击JSFiddle中的HTML窗格
  3. 粘贴(Command-V)
  4. 将出现一个新窗口,显示粘贴的图像.
  5. 现在打开Photoshop,创建一个新文档,然后再次粘贴.
  6. 观察到浏览器和Photoshop之间的图像分辨率和大小不同.

任何建议将不胜感激!