微信小程序 Canvas 2D 踩坑指南：如何优雅地导出高清长图？（附 AI 辅助实录）

距离上次分享我的独立开发项目------专门针对外包接单防扯皮的预期管理工具，已经过去几天了。

为了保护大家的数据隐私，该工具的核心业务逻辑（即生成带有约束条款的电子凭证）全部采用纯前端 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 做类似图片导出功能时，还踩过哪些奇葩的坑？欢迎在评论区交流，如果有更好的防扯皮条款建议，我也将持续迭代到默认模板中！

微信小程序 Canvas 2D 踩坑指南：如何优雅地导出高清长图？（附 AI 辅助实录）

一、 为什么真机导出的图片会模糊？

二、 核心修复代码（Canvas 2D API）

三、 独立开发加餐：用 AI 辅助重构多行文本逻辑

四、 成果验收与结语

一、为什么真机导出的图片会模糊？

二、核心修复代码（Canvas 2D API）

三、独立开发加餐：用 AI 辅助重构多行文本逻辑

四、成果验收与结语