canvas 元素直接修改 width/height 属性会重置绘图上下文并丢失像素数据，导致缩放后图像模糊；正确做法是仅通过 css 控制显示尺寸，保持原始 canvas 像素分辨率不变，并在重绘时按比例缩放图像。
canvas 元素直接修改 width/height 属性会重置绘图上下文并丢失像素数据，导致缩放后图像模糊；正确做法是仅通过 css 控制显示尺寸，保持原始 canvas 像素分辨率不变，并在重绘时按比例缩放图像。
在实现签名板功能时，常需支持“大屏书写 + 小图导出”的场景：用户在高分辨率画布上流畅签名，最终却要以紧凑尺寸嵌入 PDF 或预览区域。若直接修改 <canvas> 的 width/height 属性（如 canvas.width = 800; canvas.height = 400;），浏览器会清空当前位图缓冲区、重置 2D 上下文——这不仅丢失所有绘制内容，更关键的是：后续 drawImage() 拉伸或压缩渲染时，会触发双线性插值，造成不可逆的模糊。
✅ 正确解决方案的核心原则是：
- 保留原始 canvas 的物理像素尺寸（即 canvas.width / canvas.height）不变；
- 仅用 CSS（如 style.width / style.height）控制其在页面中的显示大小；
- 重绘时，根据目标显示尺寸与原始像素尺寸的缩放比，精确控制 drawImage() 的绘制区域。
以下是优化后的关键代码逻辑：
// ✅ 捕获签名：始终基于原始高分辨率 canvas 生成 Data URL
function captureSignature(canvas) {
// 注意：此处不再调用 context.scale() —— 避免污染原始像素数据
signatureDataUrl = canvas.toDataURL('image/png', 1.0);
}
// ✅ 重绘签名：按 CSS 显示尺寸智能适配，保持清晰度
function redrawSignature(canvas) {
if (!signatureDataUrl) return;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
// 清空画布（仅清空可见区域）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 关键：计算缩放比，确保图像按原始像素等比渲染
const displayWidth = parseFloat(getComputedStyle(canvas).width) || canvas.width;
const displayHeight = parseFloat(getComputedStyle(canvas).height) || canvas.height;
const scaleX = displayWidth / img.width;
const scaleY = displayHeight / img.height;
// 使用 drawImage 绘制到 canvas 的整个显示区域（自动缩放，但不损失锐度）
ctx.drawImage(img, 0, 0, img.width, img.height,
0, 0, canvas.width, canvas.height);
};
img.src = signatureDataUrl;
}
// ✅ 切换尺寸：仅切换 CSS 类，不修改 canvas.width/height
function toggleCanvasSize(canvas, toggleButton) {
captureSignature(canvas); // 保存当前签名（高分辨率）
if (!canvas.classList.contains('fullscreen')) {
canvas.classList.add('fullscreen'); // 触发 CSS: width: 100vw; height: auto;
toggleButton.textContent = 'הקטן';
toggleButton.classList.replace('uk-button-success', 'uk-button-danger');
} else {
canvas.classList.remove('fullscreen'); // 回退至默认 CSS 尺寸（如 width: 302px; height: 122px;）
toggleButton.textContent = 'הגדל';
toggleButton.classList.replace('uk-button-danger', 'uk-button-success');
}
redrawSignature(canvas); // 依据当前 CSS 尺寸重新绘制
}? 对应 CSS 示例（确保 canvas 始终维持原始像素尺寸）：
canvas[name="orderBody"] {
width: 302px;
height: 122px;
image-rendering: -webkit-optimize-contrast; /* Chrome/Safari 锐化 */
image-rendering: crisp-edges; /* Firefox/Edge 强制像素级渲染 */
image-rendering: pixelated; /* 新标准，防模糊 */
}
canvas.fullscreen {
width: 95vw !important;
height: 60vh !important;
max-width: none;
max-height: none;
}⚠️ 注意事项：
- 永远不要在 redrawSignature() 中调用 context.scale() —— 它会永久改变坐标系，干扰后续绘制精度；
- 若需导出 PDF，建议使用 canvas.toBlob() 生成高 DPI 图像（如 scaleFactor = 2 时先临时放大 canvas 再截图），而非依赖 CSS 缩放后的模糊快照；
- image-rendering: pixelated 是现代浏览器防模糊的关键声明，兼容性良好（Chrome 53+, Firefox 49+, Edge 79+）；
- 所有 clearCanvas() 操作也应基于原始 canvas.width/height，避免意外重置分辨率。
通过分离「像素缓冲区」与「显示尺寸」，你既能保障用户书写体验的流畅性与精度，又能确保最终输出图像清晰锐利——这才是专业签名组件的底层设计准则。
