7

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!

Chanpory
  • 3,015
  • 6
  • 37
  • 49
  • 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. – DA. Mar 03 '14 at 00:40
  • 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. – Chanpory Mar 03 '14 at 00:42
  • 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? – DA. Mar 03 '14 at 00:42
  • 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? – DA. Mar 03 '14 at 00:44
  • 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. – Chanpory Mar 03 '14 at 00:49
  • 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?) – DA. Mar 03 '14 at 00:51
  • Yes, if I paste into Photoshop, then copy it from Photoshop, and then paste it into the browser, it get's halved as well. – Chanpory Mar 03 '14 at 00:55
  • 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! – Chanpory Mar 03 '14 at 00:56
  • 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! – DA. Mar 03 '14 at 00:58
  • I'm hoping someone can offer a solution too! – Chanpory Mar 03 '14 at 01:06
  • Does this happen by every browser? – inf3rno Mar 03 '14 at 02:08
  • 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. – Chanpory Mar 03 '14 at 02:37
  • One thing to check, if you `console.log(file.size)`, is it smaller on Chrome than it is in the other browsers? – loganfsmyth Mar 06 '14 at 15:45

0 Answers0