在JavaScript / NodeJS和电子的图像DPI?

我正在使用Electron创build一个主要用于Mac OS X的应用程序。用户可以将图像拖放到页面上,页面会创build一个带有丢弃图像源path的<img> ,用户可以看到图像。

问题

如果用户在视网膜显示屏上截图,然后将图像放到页面上,图像将以双倍大小显示。 我需要以某种方式知道显示这个图像的一半的自然尺寸。

可能的scheme

我相信如果检查其DPI,我应该能够可靠地判断图像是否是视网膜。 在Mac上的预览应用程序中,我可以看到图像是144 DPI。 基本上,如果DPI是144或更大,那么它是视网膜,对吗?

有没有一些方法来读取这些数据,给定的图像,使用电子的本地图像或NodeJS?

注意: Mac OS X将屏幕截图作为PNG,因此没有exif数据。

编辑和更新 :我相信我可以通过查看HEX信息来分辨图像的DPI。 即, fs.readFileSync('file.type').toString('hex') ,那么对于PNG来说,如这里提到的那样寻找70 48 59 73 ,或者如这里所提到的,JPG寻找FFD8FFE000104A464946000101 。 我现在遇到的问题是在从剪贴板粘贴图像时试图使用Electron的NativeImage。

如果我从剪贴板中粘贴一个PNG,并执行nativeImage.toPng().toString('hex') ,则输出如下内容:

89504e470d0a1a0a0000000d49484452000001fc000001680806000000b2a54946000005c249444154789cedd5410dc03010c0b0ae448f3f8a0dc554a9b111e4976766de05005c6d9f0e0000fe67f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f8001060f80010f0014a0204ec5f3e63f20000000049454e44ae426082

在这个string中,我可以findDPI信息?

编辑和更新2:我想知道这可能是一个在电子内的错误。 当我从“预览”中复制144 PPI的图像并将其粘贴到我的应用程序中时,将其从我的应用程序中复制出来并粘贴到新的预览窗口中,它将变为72 PPI。 Electron是否可能剥离出这些信息?

预览DPI

大块

由@robertklep请求,这里是大块的截图(对不起,我覆盖在我的应用程序复制,所以我现在不能实际上复制文本)。

初始图像 初始

复制/粘贴后 复制后

您显示的输出看起来是原始的PNG数据(PNG签名是0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A )。

您可以parsing数据中的不同块,并查找pHYs块,这是我认为需要从Mac OS X生成的PNG中提取分辨率信息的块。

一个处理所有PNG块的简单parsing器:

 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)); } } 

正如预期的那样,在我的Mac上输出PPI 144