HTML5在iPad上无法直接导入电子签名，实际是通过canvas捕获触摸事件绘制签名；需禁用默认触摸行为、适配Retina屏缩放，并以图片方式复用历史签名。
HTML5 在 iPad 上无法直接“导入”电子签名
HTML5 本身不提供“导入签名”的 API，所谓“HTML5 导入电子签名”，实际是前端用 捕获用户手写轨迹，生成图像或坐标数据，再由 JS 处理上传。iPad 上没有文件系统级的签名“导入”入口，所有签名都需现场绘制或从已有图片/数据还原。
用
iPad（尤其 iOS 13+）默认禁用部分触摸行为以优化滚动，touchstart/touchmove 事件若未显式阻止默认行为，会导致画布响应迟滞甚至中断笔迹。
- 必须在
touchstart和touchmove回调中调用event.preventDefault()（仅对目标 canvas 元素生效） - 推荐使用
createTouchCanvas()封装初始化逻辑，避免遗漏{ passive: false }选项 - iPad Safari 对
touch-action: none支持稳定，建议在 canvas CSS 中强制声明
const canvas = document.getElementById('signature-canvas');
const ctx = canvas.getContext('2d');
canvas.style.touchAction = 'none';
canvas.addEventListener('touchstart', handleStart, { passive: false });
canvas.addEventListener('touchmove', handleMove, { passive: false });
function handleStart(e) {
e.preventDefault();
const touch = e.touches[0];
ctx.beginPath();
ctx.moveTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
}
function handleMove(e) {
e.preventDefault();
const touch = e.touches[0];
ctx.lineTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
ctx.stroke();
}
保存签名时别直接用 toDataURL() 传 PNG
iPad 屏幕高 DPI（Retina），canvas.toDataURL('image/png') 默认按 CSS 像素导出，导致签名模糊、线条发虚。必须手动缩放 canvas 内部绘图缓冲区。
- 读取
window.devicePixelRatio，将 canvas 的width/height属性设为clientWidth * ratio等 - 随后用
ctx.scale(ratio, ratio)对齐坐标系 - 服务端接收时注意：Base64 图片体积可能达 200KB+，建议压缩为 JPEG 并限定宽高（如 800×300）
真要“复用已有签名”，只能走图片加载 + 贴图方式
所谓“导入”，实际是把已存签名图片（如用户历史签名 PNG）draw 到 canvas 上——不是解析签名数据，也不支持反向提取坐标点。
立即学习“前端免费学习笔记（深入）”；
- 用
new Image()加载图片，监听onload后调用ctx.drawImage(img, 0, 0, width, height) - 注意跨域限制：如果图片来自其他域名，需服务端配
Access-Control-Allow-Origin，否则drawImage会触发 canvas 污染（tainted canvas）错误 - 用户后续追加绘制会覆盖原图，如需保留底图+新签分离，得用双 canvas 或记录多层路径数据
真正难的不是画出来，而是让签名在 iPad 不同 Safari 版本、不同缩放设置下线条连续、无断点、不失真。很多线上方案卡在 touch 事件兼容和 DPR 缩放没对齐这两步。
