如何在Javascript中设置JPEG/PNG图像的分辨率/密度？

Question

如何在Javascript中设置JPEG/PNG图像的分辨率/密度？

javascriptnode.jsimagejpegresolution

5

我需要在javascript中更改JPG/PNG类型的图像的分辨率/密度。我需要这样做的原因是，我可以将图像发送到第三方API，该API将根据分辨率/密度元数据知道每英寸多少像素(DPI/PPI)进行打印。

是否有任何javascript解决方案？

- andre

不可以。这需要使用图像编辑器对图像本身进行处理，而无法通过编程以此方式更改图像。 - Scott Marcus

1

@ScottMarcus为什么不可能呢？我看到有些软件可以从特定文件的图像转换中添加分辨率/密度元数据的示例。一个例子是将PDF转换为JPEG，链接在这里：https://www.filestack.com/docs/document-transformations ... 另一个例子是在SVG图像中设置密度，然后可以将其转换为JPEG：http://sharp.dimens.io/en/stable/api-constructor/ ... 在我的情况下，我已经上传了一个JPEG图像，我需要更改其密度。我无法将其转换为SVG或PDF，然后再转换回JPG。 - andre

1

这不仅仅是元数据吗？ - andre

请看《canvas.toDataURL()不会改变图像质量，为什么？》（原文链接：https://dev59.com/9qXja4cB1Zd3GeqPR37u）。 - guest271314

1

将DPI作为元数据添加并不会实际修改图像。说你的图像有128 DPI并不能使它变得如此密集，图像必须实际上是那么密集的。只有图形软件才能修改实际图像密度。正如@guest271314发布的链接中所提到的：“当保存为图像的元数据时，DPI纯粹是任意的，并且在传输到物理介质（如屏幕或纸张）时作为提示（整个显示图像的管道都考虑其DPI）。" - Scott Marcus

显示剩余6条评论

4个回答

5

你可以使用最近发布的库，该库专门用于对JPEG（JFIF）和PNG进行dpi处理。 https://github.com/shutterstock/changeDPI

- AndreaBogazzi

我想赞同这个观点，但该库使用FileReader，这似乎是一种仅适用于浏览器的实现。我一直在试图将其转换为读取简单缓冲区（并且让该库干扰该缓冲区的字节），这让我头痛不已。如果有人已经找到了如何发送缓冲区给它，请告诉我。 - Chris

有一个开放的PR可以解决这个问题。该库在Node下工作，因为测试是针对Node编写的，我可以理解缓冲区更好。该库是为浏览器而生的，因为在Node中，该问题已经有其他产品解决了。请在GitHub存储库上打开一个问题，我们会解决它。 - AndreaBogazzi

2

在尝试将changeDPI和其他内容转换为适用于节点（而不仅仅是浏览器）的过程中，我发现https://www.npmjs.com/package/png-dpi-reader-writer很有效。 - Chris

1

太不可思议了，我已经寻找类似的东西多年了。看看处理元数据这么简单的事情竟然有多么复杂！谢谢！ - OG Sean

这个工具完全满足了我的需求，而且不需要访问后端。非常感谢！！ - Chris Sandvik

0

您可以通过添加/更改PNG文件的pHYs块来实现此操作：

您可以查看我的代码https://github.com/murkle/rewrite-png-pHYs-chunk以了解更多信息。

- murkle

1

请始终披露您链接到的内容，并且为了提供一个好的答案，最好在答案中展示如何实现。 - Petter Friberg

抱歉，仅支持PNG格式。 - murkle

-1

分辨率/密度可以使用JavaScript标准图像处理库sharp的withMetadata函数轻松设置。

简单示例：

// Set output metadata to 96 DPI
const data = await sharp(input)
  .withMetadata({ density: 96 })
  .toBuffer();

Npm模块：sharp

- Gagan

刚刚测试了这个设置：它只改变元数据中的数值，但不会重新采样图像。我在一个分辨率为300 dpi的图像上进行了测试，将其改为72 dpi。在文件资源管理器中检查属性，显示为72 dpi，但是Photoshop仍然显示300 dpi的分辨率。我想知道这个功能的用途是什么。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andre · Accepted Answer

如果你对解决方案有疑问，我最终使用了graphicMagic（node的Image Magick版本）。因为我正在使用AWS Lambda（其实例预安装了ImageMagic），所以这使得它更容易，我只需要安装'gm' npm包。

这不是最高效的解决方案，因为我必须在重新采样后进行调整大小，但它能够工作！

const gm = require('gm').subClass({imageMagick: true});

function addResolution(inputBuffer, resizeWidth, resizeHeight) {
  return new Promise((resolve, reject) =>{

    gm(inputBuffer)
    .resample(150, 150) // resampled to 150 resolution
    // you have to set the width and height again because resample rearranges those params
    .resize(resizeWidth, resizeHeight, '!')
    .toBuffer('JPEG',function (err, buffer) {
      if (err) reject(err)
      resolve(buffer)
    })
  })
}