canvas.toDataURL（）不会改变图像质量。怎么会？

Question

根据文档：

所述HTMLCanvasElement.toDataURL（）方法返回包含在由所述类型参数（默认为PNG）指定的格式的所述图像的表示的数据URI。返回的图像的分辨率为96 dpi。

不涉及打印时如何参考打印分辨率？

我写了一个jsfiddle，它在画布上绘制图像，然后调用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

不涉及打印时如何参考打印分辨率？

MDN的引用在某种意义上是错误的，因为它将DPI称为图像的分辨率。

（旁注：PPI与DPI在物理特性上有所不同-但在这种情况下并不是很重要。您会看到我将DPI用于PPI，因为自从90年代初开始使用以来，它一直根深蒂固。）

您的问题的（某种程度上）简短答案是：

图像仅以像素为单位，没有实际大小的概念。当将DPI保存为图像中的元数据或与图像一起元数据时，DPI完全是任意的，并且当转移到诸如屏幕或纸张等物理介质（并且显示图像的整个管道均考虑其DPI）时，DPI 可以用作提示。

至于原因：96 DPI是指“标准”（但不准确且有点过时）的屏幕像素密度，因此，如果您将图像按原样打印到纸张上，并使纸张紧贴屏幕，则纸张上的内容应大小与您在屏幕上看到的大小有些匹配（大多数人不为实际的DPI 校准屏幕，制造商有时对其驱动程序草率，如果未使用通用驱动程序，则误差很小） 。

浏览器实际上也不将此信息存储在它生成的图像文件中（不是必需的，请参见下文）。

为了说明问题，我们首先来看一下JPEG文件的二进制文件：

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

不，在位置0x0D处未定义任何单位（0）。该值必须为1（英寸）或2（厘米）（当然也没有EXIF（0xffe1 / APP1），因为没有相机/扫描仪会产生图像）。

那PNG呢？

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

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

这是可以的，因为当今在大多数系统上图像被假定为96 DPI，因此它没有任何后果（实际上是使用DPI来影响图像，而未定义其他DPI / PPI）。

对于您和我来说，在大多数情况下，在15英寸以及50英寸的屏幕上，1920x1080的图像将是1920x1080。直接无视（好了...

因此，可以得出结论：当您将图像传递到画布上时，图像可能会嵌入提示，例如300 DPI。当节省画布时，这当然会被去除，但是它不会改变图像分辨率（前提是画布的像素分辨率与原始图像相同），因此打印质量不会下降（当然可以通过JPEG进行压缩）影响总体质量，但实际分辨率没有变化）。