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

Question

根据docs：

  

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

如果没有涉及打印，如何引用打印分辨率？

我写了a 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年代初开始使用它以来它已经根深蒂固了。） / p>

对你的问题的（有些）简短回答是：

图像仅以像素为单位进行测量，并且没有实际尺寸的概念。 DPI纯粹随意在图像中保存为元时，在转移到物理介质（如屏幕或纸张）时用作提示（以及整个管线）显示图像会考虑其DPI）。

关于为什么：96 DPI指的是“标准”（但不准确且有点过时）的屏幕像素密度，这样如果您将图像按原样打印到纸张并按住纸张屏幕上的内容应该与屏幕上显示的内容有些匹配（大多数人不会calibrate theirs screens显示实际的DPI，而制造商有时会对他们的驱动程序草率，如果不是通用的驱动程序使用，所以会有一个小的误差幅度。）

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

只是为了记录，让我们先来看看JPEG文件的二进制文件：

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

没有，位置0x0D没有单位定义（0）。这必须是1（英寸）或2（cm）（当然没有EXIF（0xffe1 / APP1），因为没有相机/扫描仪产生图像。）

那么PNG呢？

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

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

这是正常的，因为现在大多数系统上的图像假设为96 DPI，所以它没有任何后果（DPI实际上用于影响图像，没有其他DPI / PPI已定义）。

在大多数情况下，对于你我来说，1920x1080的图像在15英寸以及50英寸的屏幕上将是1920x1080。只是忽略......

总而言之：当您通过画布传递图像时，图像可能会嵌入一个提示，例如300 DPI。当保存画布时，它会被删除，但它不会改变图像分辨率（前提是画布与原始图像具有相同的像素分辨率），因此打印质量不会下降（通过JPEG压缩当然会影响一般质量，但实际分辨率没有变化）。

Answer 2

这句话中确实存在拼写错误，因为他们应该使用 ppi 而不是 dpi 和IIRC，EXIF标签称为像素密度，但它＆＃39一个常见的。

jpeg格式的ppi只是软件的一个注释，让他们知道你的300px * 300px数字图像的尺寸为1英寸* 1英寸。 因此，如果渲染器是打印机，能够以300dpi打印，那么每个像素将执行一个点。

此信息写在文件的元数据中，无论原始图像中设置的原始值如何，toDataURL只会将JFIF密度单位元数据设置为0（无单位），X和Y密度为1（MDN说的是96dpi，因为它对应于最标准的屏幕显示比例，也用于CSS px魔法单位）。