本文介绍如何通过正确处理canvas尺寸重置与图像重绘，避免因缩放操作（尤其是缩小）引发的签名图像失真、模糊问题，确保pdf导出时清晰度达标。
本文介绍如何通过正确处理canvas尺寸重置与图像重绘，避免因缩放操作（尤其是缩小）引发的签名图像失真、模糊问题，确保pdf导出时清晰度达标。
在Web签名应用中，用户常需先在大画布上流畅书写（保障手写体验），再将签名缩放为小尺寸嵌入订单PDF——但直接修改
✅ 正确方案：分离“显示尺寸”与“绘制分辨率”
核心原则是：不改变Canvas的逻辑分辨率（即 width/height），仅通过CSS控制视觉尺寸，并用高分辨率Canvas保证细节保真。
1. 固定Canvas物理分辨率（推荐做法）
始终让Canvas的 width 和 height 属性保持高分辨率（如 1200×480），用于高质量绘制和导出：
<canvas name="orderBody" width="1200" height="480"></canvas>
然后用CSS控制其在页面上的显示大小（不影响内部像素）：
canvas[name="orderBody"] {
width: 302px; /* 视觉宽度 */
height: 122px; /* 视觉高度 */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
canvas[name="orderBody"].fullscreen {
width: 100vw;
height: calc(100vh - 100px);
}✅ image-rendering: crisp-edges 可禁用浏览器默认的双线性插值，强制使用最近邻算法，显著减少缩小时的模糊。
2. 优化 captureSignature：移除错误的 context.scale
原代码中 context.scale(scaleFactor, scaleFactor) 会污染绘图上下文状态，且 toDataURL() 已基于Canvas实际像素生成图像，无需额外缩放：
function captureSignature(canvas) {
// ✅ 直接导出当前Canvas的完整像素数据（高分辨率）
signatureDataUrl = canvas.toDataURL('image/png', 1.0);
}3. 安全重绘：按目标尺寸等比缩放图像
redrawSignature 应根据Canvas当前CSS尺寸（而非width/height属性）进行适配绘制，确保清晰显示：
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);
// ✅ 按CSS显示尺寸绘制，保持清晰度
const displayWidth = parseFloat(getComputedStyle(canvas).width);
const displayHeight = parseFloat(getComputedStyle(canvas).height);
ctx.drawImage(img, 0, 0, displayWidth, displayHeight);
};
img.src = signatureDataUrl;
}4. 简化尺寸切换逻辑（关键修复）
如答案所示，完全避免修改 canvas.width/canvas.height，仅切换CSS类：
function toggleCanvasSize(canvas, toggleButton) {
captureSignature(canvas); // 保存当前高分辨率签名
if (canvas.classList.contains('fullscreen')) {
canvas.classList.remove('fullscreen');
toggleButton.textContent = 'הגדל';
toggleButton.classList.replace('uk-button-danger', 'uk-button-success');
} else {
canvas.classList.add('fullscreen');
toggleButton.textContent = 'הקטן';
toggleButton.classList.replace('uk-button-success', 'uk-button-danger');
}
redrawSignature(canvas); // 重绘时自动适配CSS尺寸
}⚠️ 注意事项
- 永远不要在运行时修改 canvas.width 或 canvas.height —— 这会重置缓冲区并触发不可逆的像素降质。
- 若必须支持多设备，建议初始化Canvas为 window.devicePixelRatio 倍的CSS尺寸（例如：CSS宽302px → Canvas width=302 * window.devicePixelRatio），再用 ctx.scale() 补偿，但需严格管理上下文状态。
- 导出PDF前，直接使用 signatureDataUrl 中的高分辨率PNG，而非从缩放后的Canvas重新截图。
通过以上改造，签名既能满足大屏流畅书写体验，又能以原始精度嵌入PDF，彻底规避模糊问题。
