javascript - canvas.toDataURL() 不会改变图像质量。怎么会？

Question

根据docs :

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

当不涉及打印时，如何引用打印分辨率？

我写了a jsfiddle在 Canvas 上绘制图像，然后调用 toDataURL()。毕竟，结果图像的质量似乎没有受到影响。

我不明白文档中的 96 dpi 是什么意思。有什么想法吗？

var image = new Image();
image.crossOrigin = "Anonymous";
image.src = "...";
// ...
var dataURL = canvas.toDataURL('image/jpeg', 1.0);
window.open(dataURL);

Answer 1

How is it possible to refer to a print resolution when there is no printing involved?

MDN 的引用是错误的，因为它将 DPI 称为图像的分辨率。

(旁注:PPI 与 DPI 在物理特性上有所不同 - 但在这种情况下并不重要。你会看到我将 DPI 用于 PPI，因为自从我在 90 年代初开始使用它以来它已经根深蒂固)。

对您的问题的(有点)简短的回答是:

图像仅以像素为单位，没有真实世界大小的概念。 DPI 纯粹是任意的当保存为图像中的元数据时/与图像一起保存时，当传输到屏幕或纸张等物理介质(以及整个管道)时用作提示显示图像考虑其 DPI)。

至于原因:96 DPI 指的是“标准”(但不准确且有点过时)屏幕像素密度，因此如果您按原样将图像打印到纸上并保持将纸贴在屏幕上 纸上的内容应该与您在屏幕上看到的大小相匹配(大多数人不会 calibrate theirs screens 实际 DPI，如果不使用通用驱动程序，制造商有时会对他们的驱动程序草率，所以会有很小的误差)。

浏览器实际上不会将此信息存储在它生成的图像文件中(不需要，见下文)。

为了记录，让我们首先看一下 JPEG 文件的二进制文件:

^{从 Firefox 保存的 JPEG 十六进制转储，但 Chrome 的情况相同。}

不，在位置 0x0D 处没有定义单位 (0)。这必须是 1(英寸)或 2(厘米)(当然没有 EXIF (0xffe1/APP1)，因为没有相机/扫描仪生成图像)。

那么 PNG 呢？

^{从 Firefox 保存的 PNG 的十六进制转储，但 Chrome 的情况相同。}

不，这里也没有。没有 pHYs block ，IHDR 仅包含实际像素分辨率。

这没关系，因为图像假设在当今大多数系统上为 96 DPI，因此它没有任何后果(DPI 实际上用于影响图像，而没有其他 DPI/PPI 已定义)。

但在大多数情况下，对于你我来说，1920x1080 图像在 15"和 50"屏幕上都是 1920x1080。忽略...

总而言之:当您通过 Canvas 传递图像时，图像可能会嵌入一个提示，例如指示 300 DPI。这当然在保存 Canvas 时被剥离，但它不会改变图像分辨率(前提是 Canvas 与原始图像具有相同的像素分辨率)所以打印质量不会下降(通过 JPEG 压缩当然会影响一般质量，但对于实际分辨率没有变化)。