Javascript 改变图像分辨率以匹配特定像素密度（DPI）

我正在HTML5画布上工作，在那里我使用javascript操纵某些图形和文本。我想包括一个打印预览功能来显示画布在打印时的外观。我正在使用以下代码将画布转换为图像，稍后将使用该图像进行打印预览

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

由于打印机能够以260dpi的像素密度打印，我希望

img

与打印机的像素密度匹配。

您需要打印大小来设置DPI 画布是无量纲的。如果没有已知的固定尺寸，每英寸点数就没有意义

您可以以240dpi打印240 x 240画布，方法是将其打印为1 x 1英寸大小。同样的画布也将是24dpi，如果你把它打印成10×10英寸

如果希望画布的像素密度与某些DPI匹配，则需要将画布分辨率设置为与已知打印尺寸匹配，并且在打印画布时必须指定该尺寸，否则DPI将不匹配

例子。将画布分辨率设置为与已知打印大小和dpi匹配 以240dpi打印画布以适应A4页面

const A4_PAGE_SIZE = {width: 8.27, height: 11.69); // in inches
const DPI = 240;  
canvas.width = A4_PAGE_SIZE.width * DPI;   // ~1984px
canvas.height = A4_PAGE_SIZE.height * DPI; // ~2805px

现在渲染画布内容以适应新的画布分辨率，并转换为PNG。然后，您可以通过将打印大小设置为8.27 x 11.69英寸，以240 dpi的速度打印图像

注意如果不渲染画布内容（例如，内容是加载的图像），则应将画布大小与图像大小匹配，使画布分辨率高于（或低于）原始图像将降低打印质量，因为画布2D API使用的缩放不是为打印而设计的

注意PNG图像格式允许您通过设置每米像素而不是标题中的总像素来指定PNG图像的物理大小。但是，您不能通过本机canvas API执行此操作。您需要使用第三方PNG编码器来设置此标题信息