Next.js中HTML5 Canvas绘制图片画质下降的解决求助

我在Next.js中实现了用户上传图片到固定宽高、支持拖拽缩放的HTML5 Canvas功能，通过以下绘制函数保持图片宽高比：

if(image){
        const scaleX = CANVAS_WIDTH / image?.width;
        const scaleY = CANVAS_HEIGHT / image?.height;
        const scale = Math.min(scaleX, scaleY);
    
        // 计算图片新尺寸
        const newWidth = image?.width * scale;
        const newHeight = image?.height * scale;
    
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    
        // 绘制图片
        setImageRight((CANVAS_WIDTH + newWidth) / 2);
        setImageBottom((CANVAS_HEIGHT + newHeight) / 2);
        ctx.drawImage(image, (CANVAS_WIDTH - newWidth) / 2, (CANVAS_HEIGHT - newHeight) / 2, newWidth, newHeight);
}

其中image是通过useState维护的状态，加载逻辑如下：

useEffect(() => {
  // 加载图片到画布
  const image = new Image();
  image.src = URL.createObjectURL(props.imageFile);
  image.onload = () => {
    setImage(image);
    setImageWidth(image.width);
    setImageHeight(image.height);
  };
}, [props.imageFile]);

useEffect(() => {
  if(image)
    drawImage(true,false);  
}, [image])

目前图片初始渲染的宽高比正常，但画质严重受损。我是Canvas新手，想请教如何保留或降低画质损耗程度。

补充对比：

• 我的绘制效果：模糊的Canvas绘制图片
• Photoroom的绘制效果：清晰的Canvas绘制图片
  二者图片及Canvas尺寸相近，但画质差异明显。

优化方案 #

1. 匹配Canvas实际分辨率与显示分辨率 #

Canvas有两个关键尺寸：元素的CSS宽高（用户看到的显示尺寸）和自身的width/height属性（实际绘制的像素分辨率）。如果二者不匹配，系统会自动拉伸图像导致模糊。

解决方法：结合设备像素比(DPR)设置Canvas实际分辨率，同时保持CSS尺寸不变：

const dpr = window.devicePixelRatio || 1;
const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');

// 设置Canvas实际像素分辨率
canvas.width = CANVAS_WIDTH * dpr;
canvas.height = CANVAS_HEIGHT * dpr;
// 保持显示尺寸与原设定一致
canvas.style.width = `${CANVAS_WIDTH}px`;
canvas.style.height = `${CANVAS_HEIGHT}px`;
// 缩放上下文，确保绘制坐标对应CSS尺寸
ctx.scale(dpr, dpr);

2. 启用高质量图像插值 #

Canvas默认的图像插值算法较为粗糙，手动开启高质量模式可提升缩放后的画质：

ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high'; // 可选值：low/medium/high

3. 基于原始图片重新绘制，避免多次缩放损耗 #

如果后续有拖拽、缩放操作，不要直接对Canvas上已绘制的图像进行二次缩放，始终基于原始image对象重新计算缩放比例并绘制，避免多次缩放累积的画质损失。

4. 确保图片加载完整性 #

加载本地文件时，可额外设置crossOrigin属性（跨域场景适用），避免潜在的图像数据异常：

const image = new Image();
image.crossOrigin = 'anonymous'; // 本地文件可省略，跨域图片需添加
image.src = URL.createObjectURL(props.imageFile);

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