嘿，我来给你唠唠怎么在下载JPEG的时候设置DPI哈。其实html2canvas本身没法直接给生成的图片设置DPI属性，但咱们可以通过调整缩放比例来间接实现——毕竟DPI和像素尺寸是挂钩的：相同物理尺寸下，DPI越高，需要的像素数就越多。

先看看你现有的代码，里面已经定义了目标DPI是300，但计算像素尺寸的时候还是用了默认的72（屏幕常用DPI），这就没发挥300DPI的作用。咱可以这么改：

步骤1：修正像素尺寸计算逻辑 #

把原来用72计算像素的代码，改成用目标DPI来算，同时算出对应的缩放比例：

// 目标DPI
var dpi = 300;
// 用目标DPI计算画布需要的像素尺寸（物理尺寸×DPI）
var widthInPixels = pdfWidthInInches * dpi;
var heightInPixels = pdfHeightInInches * dpi;
// 计算缩放比例：目标DPI ÷ 默认屏幕DPI（72）
var scale = dpi / 72;

步骤2：给html2canvas加上缩放配置 #

在html2canvas的参数里加上scale，让它按照咱们需要的比例渲染画布，同时指定画布的宽高：

html2canvas(elementHTML, {
    useCORS: true,
    scale: scale, // 关键：用这个缩放比例来匹配目标DPI
    width: widthInPixels,
    height: heightInPixels
}).then(canvas => {
    // 把生成的画布转成JPEG并触发下载
    const downloadLink = document.createElement('a');
    // toDataURL第二个参数是图片质量，0-1之间，0.9兼顾质量和大小
    downloadLink.href = canvas.toDataURL('image/jpeg', 0.9);
    downloadLink.download = fileName;
    downloadLink.click();
});

为啥这么做？ #

html2canvas是基于浏览器屏幕渲染的，默认用72DPI来生成画布。咱通过scale参数把画布放大到300DPI对应的像素数，这样下载下来的JPEG，实际像素尺寸就符合300DPI的要求了——比如你要的是12.8英寸宽的图片，300DPI下就是12.8×300=3840像素宽，打印出来的物理尺寸和清晰度都能达标。

要注意的是：如果是想修改JPEG文件里的DPI元数据（就是查看图片属性时显示的DPI数值），toDataURL本身不会自动添加这部分信息。如果非要改元数据，可能得用额外的库来处理，但大多数场景下，用缩放的方式保证像素尺寸对应目标DPI就足够啦。

备注：内容来源于stack exchange，提问作者WonderShare