使用@napi-rs/canvas加载本地图片出现像素化问题求助

排查与修复步骤 #

1. 确认源图质量 #

• 检查verified.png的原始分辨率：如果原图尺寸远小于30x30，或者本身是低分辨率压缩图，缩放后必然会像素化。换用高分辨率的无损PNG源图再测试。

2. 调整本地图片加载方式 #

当前通过Buffer加载图片，尝试直接传入文件路径，@napi-rs/canvas对路径加载的处理可能更稳定：

const verified = await Canvas.loadImage(join(__dirname, "./assets/images/verified.png"));

3. 开启图像平滑渲染 #

绘图前强制开启上下文的图像平滑，并设置高质量插值，这是改善缩放模糊最直接的手段：

// 开启平滑并设置高质量
context.imageSmoothingEnabled = true;
context.imageSmoothingQuality = 'high';

context.drawImage(verified, 260, 175, 30, 30);

4. 用离屏Canvas中转缩放 #

如果直接缩放效果不佳，试试先将原图缩放到离屏Canvas，再绘制到主画布：

// 创建匹配目标尺寸的离屏画布
const offscreen = new Canvas.Canvas(30, 30);
const offscreenCtx = offscreen.getContext('2d');

// 离屏画布开启高质量平滑
offscreenCtx.imageSmoothingEnabled = true;
offscreenCtx.imageSmoothingQuality = 'high';
offscreenCtx.drawImage(verified, 0, 0, 30, 30);

// 将处理后的图绘制到主画布
context.drawImage(offscreen, 260, 175);

5. 更新依赖版本 #

旧版@napi-rs/canvas可能存在本地图片渲染的bug，更新到最新版：

npm update @napi-rs/canvas

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