Javascript: How do I access Hi-DPI/Retina image from the clipboard on a paste event?

Question

I have a paste handler which takes an image in the clipboard and uploads it to the server. I can successfully access the clipboard data, but if the clipboard image data has a resolution higher than 72ppi, it gets downsampled to 72ppi.

This is especially annoying when taking a screenshot on a MacBook Retina to the clipboard (via Command-Control-Shift-3. The clipboard data of the image is at 144ppi—this is the ppi that appears when I paste into Photoshop. However, when I paste into the browser, the image is downsampled by half.

I've Google searched for the paste day trying to find a solution, but no luck. I assume the downsampling is happening with the .getAsFile() method.

Here's simplified version of the code:

$('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);
  }
});

Here is a JSFiddle:

http://jsfiddle.net/zd5pX/1/

To repro the issue on a Retina machine:

1. Take a screenshot to the clipboard Command-Control-Shift-3.
2. Click on the HTML pane in the JSFiddle
3. Paste (Command-V)
4. A new window will appear showing the pasted image.
5. Now open Photoshop, create a new document, and paste again.
6. Observe that the image resolution and size differs between the browser and Photoshop.

Any suggestions would be greatly appreciated!

Handtomouth

You should be ignoring ppi and dpi entirely. The only thing that matters is the pixel dimensions. Are you saying that the pasted image is being reduced in size by half the pixels in each dimension? FYI, I do believe there is a setting in OSX that lets you change how screen shots are saved. This might be happening at the OS level meaning there likely isn't anything you can do on your end. – Boyes

Yes, the Mac will take screenshots automatically at 144ppi, and then when I paste in a browser, everything is reduced by half. If I copy an image from Photoshop that is 144ppi in the document, the browser will also downsample this. – Handtomouth

So, to clarify, when you do the above on a 'regular' mac vs. a retina mac, what are the pixel dimensions of the images that are uploaded? Is the retina macbook twice the pixels in each dimension? – Boyes

Again, ignore ppi. We need to be working with the actual pixel dimensions. If you take a 200px x 200px image and paste it in, is that image now 100px x 100px? – Boyes

Yes, on a Retina Mac, if a take a screenshot that gets saved to the clipboard at 200 x 200px it gets halved when pasted in the browser to 100 x 100px. If I paste into Photoshop, it is 200 x 200px as expected. When I try this on a non-Retina Mac, the actual pixel dimensions remains the same in both Photoshop and browser. – Handtomouth

Ah! OK, so that is interesting. If you copy that image from PhotoShop, is that image also reduced by half in the browser? (In other words is it only screen shots in the clip board that are 'halved' or are all images 'halved' when pasted into the browser?) – Boyes

Yes, if I paste into Photoshop, then copy it from Photoshop, and then paste it into the browser, it get's halved as well. – Handtomouth

However, after pasting it into Photoshop, and changing the resolution to 72ppi (and keeping the pixel dimensions to 200 x 200px), copying it again, then pasting, it doesn't get halved! – Handtomouth

Interesting! So it appears that the (browser?) does look at the ppi meta data. This seems bizarre, since that should be completely ignored by the browser. I, alas, am not going to be much help but am really interested in the answers that come. Hopefully someone has some ideas as to what is going on here! – Boyes

I'm hoping someone can offer a solution too! – Handtomouth

Does this happen by every browser? – Impetus

My code seems to break in Safari. But I just did a quick test in Gmail's compose pop-up in both Chrome and Safari. When I paste in Gmail in Chrome, the clipboard image gets halfed. But in Safari, it's the correct size! In Firefox is is also correct. – Handtomouth

One thing to check, if you console.log(file.size), is it smaller on Chrome than it is in the other browsers? – Lowpressure