距离上次分享我的独立开发项目------专门针对外包接单防扯皮的预期管理工具，已经过去几天了。
为了保护大家的数据隐私，该工具的核心业务逻辑（即生成带有约束条款的电子凭证）全部采用纯前端 Canvas 绘制，无任何后端存储。但在提测和实际上线后，我遇到了一个极其搞心态的 Bug：在微信开发者工具里看着非常清晰的长图，一到真机（尤其是 iPhone 等高分屏设备）上导出后，文字边缘就变得模糊发虚。
今天就来复盘一下，我是如何彻底解决 Canvas 2D 导出图片清晰度问题的。
一、 为什么真机导出的图片会模糊？
排查发现，根本原因在于**设备像素比（Device Pixel Ratio, 简称 dpr）**的差异。
在高分辨率屏幕上（如 Retina 屏），物理像素是逻辑像素的 2 倍或 3 倍。如果我们依然按照逻辑像素（CSS 宽高）来设定 Canvas 的宽高并直接绘制，系统在渲染时就会强行拉伸这些像素点，从而导致锯齿和模糊。
解决逻辑：
-
获取当前设备的
dpr。 -
将 Canvas 节点的物理宽高（
width和height）放大dpr倍。 -
使用
ctx.scale(dpr, dpr)将绘图上下文也同比例放大。 -
保持 CSS 设置的逻辑宽高不变。
二、 核心修复代码（Canvas 2D API）
微信小程序目前已经全面废弃了旧版的 Canvas 接口，推荐使用遵循 Web 标准的 Canvas 2D API。以下是修复模糊问题的核心初始化代码逻辑：
JavaScript
// 在页面 onLoad 或组件 ready 中调用
initCanvas() {
const query = wx.createSelectorQuery();
// 选择 canvas 节点
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
if (!res[0]) return;
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
// 核心关键：获取设备像素比
// 注意：wx.getSystemInfoSync() 已不推荐使用，改用 wx.getWindowInfo()
const dpr = wx.getWindowInfo().pixelRatio;
// 根据 dpr 放大画布物理像素
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
// 放大绘图上下文
ctx.scale(dpr, dpr);
// 将 canvas 实例挂载到 this 上，方便后续绘制调用
this.canvas = canvas;
this.ctx = ctx;
// 开始执行具体的绘制业务逻辑
this.drawMemo(ctx);
});
}按照上述逻辑放大画布后，再调用 wx.canvasToTempFilePath 导出图片时，长图的清晰度就有了质的飞跃，红印章和约束条款的文字边缘如丝般顺滑。
三、 独立开发加餐：用 AI 辅助重构多行文本逻辑
作为 90 后开发，我的日常工作流已经重度依赖 AI 辅助编程。在解决完清晰度问题后，我又面临了原生 Canvas fillText 不支持多行文本自动换行的痛点。
我没有选择自己去从零手敲循环逻辑，而是直接将诉求丢给了 AI。在此分享一个极高成功率的**提示词（Prompt）**公式，大家在开发类似海报生成器时可以直接套用：
我的输入提示词： "你是一个资深的前端开发专家。我现在正在微信小程序的 Canvas 2D 环境下开发。请帮我编写一个 JavaScript 函数，实现长文本的自动换行绘制。 输入参数要求： 绘图上下文 ctx, 字符串 text, 起始坐标 x 和 y, 最大允许宽度 maxWidth, 固定的行高 lineHeight。 逻辑要求： 使用 ctx.measureText() 逐个字符测算宽度，如果累计宽度大于 maxWidth 且不是第一个字符，则进行换行并累加 y 坐标。最后绘制出所有文本。直接输出代码，带上关键注释。"
AI 秒出的代码极其健壮，不仅考虑了边界条件，还帮我省去了大量的查阅 API 调试时间。这让我深刻体会到：工具的演进，是为了让我们把时间花在业务逻辑设计上，而不是死磕重复的造轮子。
四、 成果验收与结语
经过这一波代码重构，工具的生成体验终于达到了我的预期标准。
无论是接私活的程序员、画师还是自媒体博主，只需要花 1 分钟填个基础表单，纯前端引擎就能瞬间渲染出一张极具"契约威严感"的高清防坑长图。由于数据纯本地运行，没有任何隐私泄露的风险。
想要体验最终高清长图渲染效果，或者正在接外包需要防跑单工具的兄弟，可以在绿色聊天软件 直接搜索我的同名工具：【不扯皮备忘录】。
大家在用 Canvas 做类似图片导出功能时，还踩过哪些奇葩的坑？欢迎在评论区交流，如果有更好的防扯皮条款建议，我也将持续迭代到默认模板中！