Image DPI in JavaScript/NodeJS and Electron?

Question

I'm building an application using Electron primarily for Mac OS X. The user can drop an image onto the page, the page creates an <img> with the source path of the dropped image, and the user sees the image.

Problem

If the user takes a screenshot on a retina display and then drops the image onto the page, the image displays at double the size. I need to somehow know to display this image at half its natural dimensions.

Possible Solution

I believe I should be able to reliably tell if the image is retina if I check its DPI. In the Preview app on the Mac I can see that the image is 144 DPI. Essentially, if the DPI is 144 or greater, then it's retina, right?

Is there some way to read this data, given the image, using either Electron's Native Image or NodeJS?

Note: Mac OS X takes screenshots as PNGs, so there is no exif data.

Edit and Update : I believe I can tell what the image's DPI is from looking at the HEX information. Ie, fs.readFileSync('file.type').toString('hex') , then for PNGs look for 70 48 59 73 , as mentioned here , or for JPGs look for FFD8FFE000104A464946000101 as mentioned here . The problem I'm having now is when trying to work with Electron's NativeImage when an image is pasted from the clipboard.

If I paste a PNG from the clipboard, and do nativeImage.toPng().toString('hex') , the following is output:

89504e470d0a1a0a0000000d49484452000001fc000001680806000000b2a54946000005c249444154789cedd5410dc03010c0b0ae448f3f8a0dc554a9b111e4976766de05005c6d9f0e0000fe67f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f80010f0014a0204ec5f3e63f20000000049454e44ae426082

Where in this string would I find the DPI information?

Edit and Update 2: I'm wondering if this could be a bug within Electron. When I copy an image that is 144 PPI from Preview and paste it into my app, then copy it out of my app and paste it into a new Preview window, it changes to 72 PPI. Is it possible that Electron is stripped out this information?

Chunks

Requested by @robertklep, here are screenshots of the chunks (sorry, I override the Copy in my app so I can't actually copy text right now).

Initial Image

After copied/pasted

Answer 1

The output you're showing looks to be the raw PNG data (the PNG signature is 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A ).

You can parse the different chunks in the data and look for the pHYs chunk, which is (I think) the chunk you need to extract resolution information from for Mac OS X-generated PNG's.

A simple parser which processes all PNG chunks:

var image = nativeImage.toPng(); // or the result of fs.readFile*()

function* parseChunks(data) {
  var offset = 8; // skip PNG header

  while (offset < data.length) {
    var dataLength  = data.readUInt32BE(offset);
    var chunkLength = dataLength + 12;
    var typeStart   = offset + 4;
    var dataStart   = offset + 8;
    var dataEnd     = offset + 8 + dataLength;
    var crcEnd      = dataEnd + 4;

    yield {
      type : data.toString('ascii', typeStart, dataStart),
      data : data.slice(dataStart, dataEnd),
      crc  : data.slice(dataEnd, crcEnd),
    };

    offset = crcEnd;
  }
}

for (let chunk of parseChunks(image)) {
  // Extract pixel information
  if (chunk.type === 'pHYs') {
    var ppuX = chunk.data.readUInt32BE(0);
    var ppuY = chunk.data.readUInt32BE(4);
    var unit = chunk.data.readUInt8(8); // should always be `1`
    console.log('PPI', Math.round(ppuX * 0.0254));
  }
}

This outputs PPI 144 on my Mac, as expected.

Answer 2

I found that you can access raw PNG clipboard data for screenshot via clipboard.readBuffer("public.png") now. See https://ocadaruma.hatenablog.com/entry/2023/01/29/091354 for the details how it works.