Electron从canvas的dataURL生成nativeImage画质低如何解决

问题原因 #

这个模糊问题的核心是设备像素比（DPR/devicePixelRatio）适配错误，以及多余的强制resize操作导致的：

1. 高DPI屏幕下，清晰的canvas实际物理像素尺寸是逻辑尺寸（104x24）乘以设备像素比（通常是2/3），你直接resize到104x24物理像素，相当于把高分辨率的原图强行压缩导致失真
2. nativeImage默认按物理像素处理尺寸，没有设置正确的位图缩放比例的话，显示的时候会被拉伸放大，进一步加重模糊

解决方案 #

1. 先移除多余的resize操作 #

如果你的canvas导出的dataURL本身尺寸已经符合需求，不需要调用resize方法，多余的缩放是模糊的常见诱因：

// 直接创建即可，不需要resize
let image = nativeImage.createFromDataURL(canvasImg);

2. 优化canvas导出配置 #

导出canvas时用无损PNG格式，保证原始资源清晰度：

// 导出时指定png格式，质量设为最高
const canvasImg = canvas.toDataURL('image/png', 1)

3. 适配设备像素比 #

如果需要在高DPI屏幕下清晰显示，需要给nativeImage设置正确的位图缩放比例：

const dpr = window.devicePixelRatio || 1
let image = nativeImage.createFromDataURL(canvasImg);
// 设置位图缩放比例，让nativeImage按逻辑尺寸104x24渲染
image.setBitmapScale(dpr)

4. 确实需要resize的场景，按物理像素计算尺寸 #

如果必须调整图片尺寸，resize的目标尺寸要按物理像素计算，避免拉伸：

const dpr = window.devicePixelRatio || 1
let image = nativeImage.createFromDataURL(canvasImg);
image = image.resize({
  width: 104 * dpr, // 物理宽度 = 逻辑宽度 * 像素比
  height: 24 * dpr, // 物理高度 = 逻辑高度 * 像素比
  quality: 'best',
});
image.setBitmapScale(dpr)

额外排查点 #

• 绘制canvas前就需要做高DPI适配：canvas的width/height属性设为逻辑尺寸*dpr，绘图前调用ctx.scale(dpr, dpr)，保证canvas本身的内容是清晰的
• 显示nativeImage的组件CSS尺寸要设置为104px*24px，和逻辑尺寸匹配

内容的提问来源于stack exchange，提问作者Archi