node.js - Image DPI in JavaScript/NodeJS and Electron? -

i'm building application using electron mac os x. user can drop image onto page, page creates <img> source path of dropped image, , user sees image.

problem

if user takes screenshot on retina display , drops image onto page, image displays @ double size. need somehow know display image @ half natural dimensions.

possible solution

i believe should able reliably tell if image retina if check dpi. in preview app on mac can see image 144 dpi. essentially, if dpi 144 or greater, it's retina, right?

is there way read data, given image, using either electron's native image or nodejs?

note: mac os x takes screenshots pngs, there no exif data.

edit , update: believe can tell image's dpi looking @ hex information. i.e., fs.readfilesync('file.type').tostring('hex'), pngs 70 48 59 73, mentioned here, or jpgs ffd8ffe000104a464946000101 mentioned here. problem i'm having when trying work electron's nativeimage when image pasted clipboard.

if paste png clipboard, , nativeimage.topng().tostring('hex'), following output:

89504e470d0a1a0a0000000d49484452000001fc000001680806000000b2a54946000005c249444154789cedd5410dc03010c0b0ae448f3f8a0dc554a9b111e4976766de05005c6d9f0e0000fe67f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f80010f0014a0204ec5f3e63f20000000049454e44ae426082 

where in string find dpi information?

edit , update 2: i'm wondering if bug within electron. when copy image 144 ppi preview , paste app, copy out of app , paste new preview window, changes 72 ppi. possible electron stripped out information?

chunks

requested @robertklep, here screenshots of chunks (sorry, override copy in app can't copy text right now).

initial image

after copied/pasted

the output you're showing looks raw png data (the png signature 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a).

you can parse different chunks in data , phys chunk, (i think) chunk need extract resolution information mac os x-generated png's.

a simple parser processes png chunks:

var image = nativeimage.topng(); // or 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;   } }  (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 `1`     console.log('ppi', math.round(ppux * 0.0254));   } } 

this outputs ppi 144 on mac, expected.