操作和导出后，加载到节点画布模块中的JPG文件质量下降

编程问答 2022-06-07

问题描述

我正在使用节点画布实现 https://github.com/Automattic/node-canvas

我使用它将新闻稿设计的jpg导出切成薄片，并生成基于图像的HTML模板，该模板对电子邮件友好。 本质上，根据我的电子邮件要求，它只是源代码中约550像素的切片。

问题是当我加载源jpg文件时，在导出的切片中看到了一些损失。 这是一个示例：

Source vs exported example

如您所见，右侧的版本（来源-jpg）比节点画布处理过的版本更清晰，质量更高。

我已经在我的所有toDataUrl调用中使用了完全高质量的export jpg，而不是规范中的0.92。我正在使用节点画布提供的loadImage函数，在那里可能会失去质量吗？

this.writeImage(canvas.toDataURL('image/jpeg',1.0),i);

此外，我已经根据上下文增强了质量设置：

    ctx.patternQuality = 'best';
    ctx.quality = 'best';
    ctx.antialias = 'subpixel';
    ctx.imageSmoothingEnabled = false

我在想，也许我没有正确使用上述设置？或者，也许错过了？

飞速发展的想法之一是将源放大2倍，然后在处理时调整大小，以保持原始jpeg品质。

我的问题是，在加工时如何防止质量损失？在应用所有步骤的过程结束时获得较低质量的图像是没有意义的，但是...

非常感谢你， 德拉戈斯。

以后编辑：

我实际上是在问一个错误的问题，我使用的源实际上是PNG，正是因为我想要jpeg导出中的高质量。 出口显然不如原始的PNG，但是我以JPG格式获得了源，并且相对于可能使用的潜在 JPG而言，它仍然存在损失，但从技术上讲，我是从PNG切入的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvasimage-qualityjavascriptnode-canvas