如何缩放Canvas/矩阵及所有变换以获取高质量画布图像

要解决直接缩放导致的画质损失问题，核心是让整个绘制流程同步按缩放因子放大，所有尺寸、坐标、变换逻辑都对应乘以缩放倍数，确保最终Canvas是原容器尺寸的N倍，且图片位置完全匹配。以下是具体修改步骤和完整代码：

关键修改点 #

• 定义全局缩放因子，所有涉及尺寸、坐标的操作都基于该因子放大
• 放大Canvas的实际像素尺寸，同时保留原容器的CSS显示尺寸
• 同步调整CSS变换矩阵的缩放适配，确保绘制位置完全对应
• 修正裁剪区域、背景填充的尺寸与坐标

修改后的完整代码 #

// 定义缩放因子，这里设为3，可根据需求调整
const SCALE_FACTOR = 3;

// 获取目标容器和图片元素
const container = document.getElementById('your-container-id');
const img = container.querySelector('img');

// 获取容器的原始显示尺寸
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;

// 创建高分辨率Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置Canvas实际像素尺寸为原容器的SCALE_FACTOR倍
canvas.width = containerWidth * SCALE_FACTOR;
canvas.height = containerHeight * SCALE_FACTOR;
// 设置Canvas的CSS显示尺寸为原容器大小，避免页面显示过大
canvas.style.width = `${containerWidth}px`;
canvas.style.height = `${containerHeight}px`;

// 获取容器的CSS变换矩阵
const containerStyle = getComputedStyle(container);
const transformMatrix = new DOMMatrix(containerStyle.transform);

// 构建适配高分辨率的变换矩阵：先缩放，再应用原变换
// 原变换基于原容器尺寸，需同步放大适配高分辨率Canvas
const scaledMatrix = transformMatrix.scale(SCALE_FACTOR, SCALE_FACTOR);

// 计算逆矩阵，用于抵消图片的CSS变换，还原到正常位置
const inverseMatrix = scaledMatrix.invert();

// 填充白色背景（高分辨率尺寸）
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 设置裁剪区域，适配高分辨率
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.clip();

// 应用逆矩阵，绘制图片
ctx.setTransform(inverseMatrix.a, inverseMatrix.b, inverseMatrix.c, inverseMatrix.d, inverseMatrix.e, inverseMatrix.f);
ctx.drawImage(img, 0, 0);

ctx.restore();

// 此时canvas就是高分辨率的裁剪后图片，可用于导出或显示
// 示例：导出为图片
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'high-res-image.png';
  a.click();
  URL.revokeObjectURL(url);
}, 'image/png');

代码说明 #

1. 缩放因子全局控制：通过SCALE_FACTOR统一控制分辨率倍数，修改这个值就能调整最终Canvas的清晰度
2. Canvas尺寸分离：实际像素尺寸放大，CSS显示尺寸保持原容器大小，既保证画质又不影响页面布局
3. 变换矩阵适配：对原CSS变换矩阵进行缩放，确保逆变换后的图片位置和原容器中的显示完全对应，不会偏移或变形
4. 裁剪与填充同步放大：背景填充和裁剪区域都使用高分辨率尺寸，确保Canvas内容完整无遗漏

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