uni-app实现电子签名画布及canvas导出图片

在uni-app中实现电子签名画布，是一个看似简单却暗藏玄机的功能。开发者常常会遇到几个典型的“坑”：签名区域不响应触摸、导出的图片模糊不清、导出API调用失败，以及背景颜色异常。这些问题背后，往往不是代码逻辑错误，而是对跨平台Canvas特性的理解不够深入。

Canvas画布签名不响应触摸事件

真机调试时，签名区域完全没反应，或者只在部分区域生效，这确实令人沮丧。问题的根源，大概率出在canvas组件没有正确绑定触摸事件，或者其宽高属性设置不当。要知道，uni-app中的canvas组件，特别是使用2D上下文时，在不同平台（H5与各小程序）上的行为差异不小，它们对touchstart、touchmove等事件的处理逻辑也各有各的“脾气”。

要解决这个问题，有几个实操要点需要把握：

• 首先，必须使用canvas-id并指定type="2d"来声明canvas。获取上下文时，务必在onReady生命周期后，通过uni.createCanvasContext这个官方API来操作，切忌使用querySelector或直接操作DOM节点，这在多端环境下极不可靠。
• 其次，事件绑定要分平台处理。在H5端，需要手动监听touchstart、touchmove等事件，并在事件回调中调用ctx.moveTo、ctx.lineTo进行绘制。而在小程序端，则可以直接使用bindtouchstart、bindtouchmove这类属性绑定事件，但要确保从事件对象中能正确获取到touches[0].x和touches[0].y坐标。
• 最后，canvas的宽高必须用rpx或px单位显式设置，不能依赖父级容器来撑开。同时，建议在canvas的style样式中加入touch-action: none;，这个属性可以有效防止iOS Safari浏览器的默认滚动行为干扰触摸事件的捕获。

导出的签名图片模糊、边缘锯齿严重

好不容易画好了签名，导出图片却发现线条发虚、边缘布满锯齿，这通常不是因为图片分辨率低，而是忽略了关键的设备像素比（Device Pixel Ratio, dpr）。uni-app中的canvas默认以1:1的物理像素进行渲染，而如今iPhone和许多高端安卓设备的dpr往往是2甚至3。这意味着，你在逻辑尺寸上绘制的一个点，在屏幕上会被拉伸到2倍或3倍的物理像素区域来显示，自然就模糊了。

要让签名图片清晰锐利，适配dpr是核心：

• 在创建canvas上下文之前，先用uni.getSystemInfoSync().pixelRatio获取当前设备的dpr值。
• 接着，将canvas元素的width和height属性（注意是属性，不是CSS样式）设置为「设计稿宽高 × dpr」。同时，用CSS样式将canvas的显示宽高固定为原始的设计尺寸（例如375px × 200px）。这样一来，canvas就拥有了高分辨率的绘制缓冲区。
• 在开始绘图之前，调用ctx.scale(dpr, dpr)对绘图上下文进行缩放。此后，你所有的坐标、路径绘制都会自动按比例放大，从而在高分辨率画布上精准绘制。
• 还有一个细节：避免使用ctx.lineWidth = 1这样的固定值。在高dpr设备上，这会导致线条过粗。正确的做法是设置为1 / dpr，这样无论在何种设备上，视觉上的线条粗细都能保持一致。

uni.canvasToTempFilePath 导出失败或返回空路径

调用uni.canvasToTempFilePath后，回调函数不触发、控制台报错canvas is not found，或者拿到的临时文件路径为空字符串——这恐怕是踩坑最多的环节。其核心原因通常有两个：canvas实例与调用导出API的上下文不匹配，或者canvas的绘制操作尚未完成就急急忙忙调用了导出。

要确保导出成功，可以遵循以下步骤：

• 必须等待canvas的内容绘制完全结束。例如，确保最后一次ctx.stroke()调用已经执行完毕。一个实用的技巧是，在调用导出API前，用setTimeout延迟大约16毫秒（相当于一帧的时间），这可以避免渲染指令队列还未刷新（flush）到GPU的问题。
• 注意平台差异。在小程序端，调用uni.canvasToTempFilePath时务必传入正确的canvasId和当前页面的this实例，这样在success回调里获取的res.tempFilePath才是有效的。而在H5端，通常直接使用Canvas原生的canvas.toDataURL('image/png')方法更为稳妥。
• 作为保险措施，在导出前可以检查canvas是否已成功挂载。使用uni.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })来查询，确保canvas节点存在，且其width和height大于0。

签名图片导出后背景为黑色或透明异常

期望导出白底黑字的签名，结果得到的却是黑底图片，或者该显示的线条神秘消失。这主要是因为canvas的默认背景是透明的。在某些平台（尤其是Android版的微信环境）进行图片合成导出时，透明的Alpha通道可能会被处理成黑色背景。

解决背景异常问题，可以尝试这些方法：

• 最直接的办法是在绘制签名之前，先清空画布并填充白色背景。代码类似：ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, width, height);。这里的width和height指的是canvas元素的逻辑宽高（即CSS设置的尺寸），而非其高分辨率的像素宽高。
• 如果你的应用场景确实需要透明背景，那么就不要进行上述的fillRect填充操作。但必须确认目标平台支持PNG图片的Alpha透明通道。例如，在微信小程序中，调用canvasToTempFilePath时必须将fileType参数显式设置为'png'，因为'jpg'格式不支持透明背景。
• 如果导出后问题依旧，可以借助uni.getImageInfoAPI来检查生成的临时图片文件是否加载成功。在通过uni.uploadFile上传服务器之前，做一次这样的本地校验，能提前发现不少问题。

说到底，在uni-app中处理Canvas签名，真正的挑战在于多端设备像素比（dpr）的精细适配，以及对Canvas生命周期（创建、绘制、导出、销毁）的精准管理。很多诡异的问题，根源并非代码写错，而是Canvas组件在特定时机被意外重建，或者导出操作恰好卡在了绘图指令尚未提交给GPU的瞬间。因此，在动手调试之前，不妨先用console.log输出一下当前的dpr、canvas节点对象和绘图上下文（ctx）的状态，这往往比盲目猜测和修改代码要高效得多。