我想将canvas元素渲染的图表转换为图像文件，以便用户可以下载它。但官方 HTML 文档说：对于支持编码分辨率元数据的文件格式，创建的图像数据将具有 96dpi 的分辨率。我对数字图像了解不多，所以我想澄清一下。这是我的理解：
图像的每英寸像素 (PPI) 将始终与您尝试显示图像的屏幕尺寸相关。假设我有 10 英寸的屏幕，PPI 为 10，图像像素为 100x100。该图像在此屏幕上的 PPI 也为 10。但同一张图像在 20 英寸屏幕上的 PPI 为 5，假设 PPI 为 20。因此，屏幕的 PPI 就像最大可能的分辨率，图像的 PPI 是特定屏幕上的实际分辨率。现在DPI也是类似的东西。有打印机的 DPI，然后是我们要打印的纸张尺寸，最后是我们要打印的图像。为简单起见，我们假设一个像素映射到打印机上的一个点。现在，屏幕 PPI 和打印机 DPI 通常都很好，因此对于标准屏幕和纸张尺寸，图像尺寸（以像素为单位）将决定其 PPI。
现在canvas元素根据其大小将渲染的画布图像转换为数据URL。因此，如果画布的尺寸为 500 x 500 像素。那么下载的图像也将是这个大小。那么为什么文档说对于支持编码分辨率元数据的文件格式，创建的图像数据将具有 96dpi 的分辨率。分辨率不会取决于画布的高度和宽度。这个 96dpi 相对于什么打印输出尺寸？
在屏幕上有 ppi，打印机使用 dpi。例如，显示屏具有全高清分辨率，意味着它可以显示 1920x1080 不同像素或 2073600 个单个像素。为此，有 3 个 LCD 灯束在其色彩空间中产生一种颜色（RGB 或 srgb 光谱中的所有红色、绿色和蓝色的混合颜色）。白色是 0 红、0 绿、0 蓝。黑色是255红，255绿，255蓝）。
在打印机上，每种颜色都打印在另一种颜色旁边。如果颜色之间的空间非常小，人眼就会在大脑中混合颜色。因此，根据人类属性，打印机需要更高的分辨率来完成这项任务。为此，印刷中的网点（每英寸点数）不是一种颜色的网点，而是 CMYK 印刷中的 4 种颜色的网点。为此，一个点被分成 4 部分。 这就是为什么打印需要更高的分辨率，这意味着每英寸有更多的点数。一般胶印采用300dpi，大幅面印刷采用150dpi，因为你的眼睛距离不太近。
屏幕分辨率通常为 96ppi，因为光波在到达眼睛的过程中混合在一起，并且光线更加漫射。因此人类无法像印刷颜色一样分离颜色
任何图像的数据大小（颜色信息）与 dpi 或 ppi 无关。 数字图像的数据大小是其像素大小。具有 1920x1080px = 2073600 单色定义的全高清图像。它适合高清屏幕，但不适用于相同尺寸的打印纸，或者如果打印相同尺寸，它不是很清晰。这种行为是用密度来定义的。颜色信息的密度由 ppi 或 dpi 指定。密度表示像素或点有多大。 屏幕可以在大画布上显示小图像。您的计算机将填充缺失的像素。它们是经过计算的。
因此，如果您想提供用于打印的图像，您始终必须提供具有更多像素的图像。对于网站来说，这些图像太大并且加载时间很长。最好的方法是使用两张单独的图像，一张用于网页，另一张用于打印。 希望这可以帮助。 在CSS中，您可以使用CSS条件来使用其他图像在背景图像上打印。我相信画布图像还有其他技术。