简介这份资源是面向移动端用户的T恤在线DIY定制系统源码包适合具备HTML、CSS与JavaScript基础、希望练习canvas绘图与交互设计的前端学习者也适用于想搭建个性化定制平台的开发者参考。压缩包约14.19MB内含index.html主入口页面、images模板与设计素材、js交互逻辑脚本、fonts字体文件及css样式表分别承担页面结构、素材支撑、绘图与操作逻辑、文字样式和视觉布局等职责目录划分清晰便于按模块阅读。已有797人学习下载说明其在同类练手项目中具备一定参考价值。读者可从中了解canvas绘制图案与文字合成的实现思路尤其是文字尚未写入canvas这一待完善点为后续处理文字与图形合并、保证设计效果一致性提供了明确的改进方向也可借鉴其素材组织与交互流程设计。1. 拿到一个 T 恤 DIY 定制系统压缩包先别急着解压上周有个做电商的朋友甩过来一个t恤diy定制系统.zip说客户要一个能在网页上换颜色、换图案、加文字的 T 恤定制页预算不高问我这套源码能不能直接改改上线。我打开看了一眼典型的「前端画布交互 图案素材管理 订单参数落库」三段式结构不是那种只能看不能跑的演示壳子。这类 t恤diy设计 资源的价值不在代码多漂亮而在于它把「用户拖拽图案到衣服上、实时预览、最后把定制参数提交给后端」这条链路完整走通了。适合谁适合接中小电商定制需求的外包、想快速搭一个 t恤diy源码 原型验证交互的产品以及需要理解 t恤设计交互 里坐标换算和图层管理的新手。下面按我实际拆包的顺序讲从目录结构到跑起来再到改图案和避坑。2. 拆包看结构这套 t恤diy系统 到底由哪几块拼起来解压之后别急着找 index.html 双击打开先花五分钟把目录摸清楚后面改代码能省一半时间。这类定制系统的目录通常不会太深但文件职责分得很开认错了入口文件是新手最常见的翻车点。2.1 目录分层与入口文件定位我拿到的这个包根目录下大致是这么几层assets/放 T 恤底图、图案素材和字体css/是样式js/里再分lib/第三方库通常是 Fabric.js 或 Konva 这类画布库和业务脚本index.html是定制页入口有的包还会带一个api/或server/目录放提交订单的示例后端。判断入口很简单找那个引用了画布库、又初始化了 canvas 元素的 HTML 文件一般就是index.html或design.html。先跑一条命令把结构列出来比在文件管理器里点来点去快# 只看两层目录过滤掉 node_modules 这类噪音 find . -maxdepth 2 -type d -not -path */node_modules* | sort # 找所有 HTML 入口确认哪个是定制页 grep -rl canvas --include*.html .第一条命令给你目录骨架第二条命令直接锁定含 canvas 的页面。逻辑说明-maxdepth 2防止目录太深刷屏grep -rl只输出文件名不输出内容避免一屏全是 HTML 标签。参数上如果你的包带了dist/构建产物记得把dist也加进排除否则会看到两份重复结构容易改错文件。2.2 画布库选型为什么这类系统偏爱 Fabric.js打开js/lib/看一眼十有八九是 Fabric.js。这不是玄学是这类 t恤设计交互 场景的刚需决定的用户要拖图案、缩放、旋转、加文字还要能选中某个元素单独调原生 Canvas 这些全得自己写命中检测和变换矩阵工作量翻几倍。Fabric.js 把这些封装成了对象模型一个fabric.Image就是一个可操作图层选中、变换、序列化都是现成的。对比一下常见选择你就明白为什么这套源码这么搭方案适合场景在这套系统里的短板原生 Canvas纯展示、粒子动画图层选中、拖拽变换全要手写Fabric.js图形编辑器、定制设计包体积偏大但功能对得上Konva.js高性能舞台、游戏化交互同样能用生态略偏动画DOM CSS 变换简单贴图、元素少图案多了性能塌导出成图麻烦我一般会先确认js/lib/里到底是哪个库因为后面所有改图案、改导出逻辑的写法都跟它绑定。如果是 Fabric.js业务脚本里一定会有new fabric.Canvas(...)这样的初始化如果是 Konva则是new Konva.Stage(...)。认错了库后面照着改代码全是白费。2.3 素材与配置底图、图案、打印区域的约定定制系统的核心数据其实就三样T 恤底图正面/背面、可打印区域一个矩形范围超出就不该让图案跑出去、图案素材列表。这些通常不会硬编码在 JS 里而是放在一个config.js或data/下的 JSON 里。找到它你才知道换一件衣服、加一批图案要改哪里。常见做法是配置里写死底图路径和打印区坐标图案列表则是一个数组每项带id、src、name。我拆的这个包打印区是用相对底图的百分比坐标存的好处是换分辨率不用重算坏处是缩放时容易算错边界这个坑后面第 4 章会专门讲。先把配置文件找出来读一遍# 找配置类文件JSON 和 js 都扫 find . -iname *config* -o -iname *.json | grep -v node_modules看到配置后重点确认三件事底图尺寸是多少像素、打印区矩形相对底图的偏移、图案素材的目录约定。这三样对上了后面拖拽和导出才不会错位。3. 把系统跑起来本地起服务与首次交互验证结构清楚了就该让它动起来。这类系统有个硬性前提不能直接双击 HTML 打开。因为画布要加载本地图片素材file://协议下浏览器会因跨域策略拒绝读取像素数据导出成图那一步直接报错。血泪经验第一次拆包我图省事双击打开拖图案正常一点「生成预览」就白屏排查半天才发现是协议问题。3.1 起一个静态服务再访问最省事的是用 Python 自带的 HTTP 服务不用装任何东西# 在项目根目录执行8000 端口起静态服务 python3 -m http.server 8000 # 然后浏览器访问 http://localhost:8000/index.html逻辑说明http.server把当前目录当网站根目录所有相对路径引用都能正常解析图片加载走的是 http 协议画布读取像素不会被拦。参数上8000 被占用就换 8080别用 80 除非你有权限。如果你的包带了package.json和构建脚本那更规范的做法是先npm install再npm run dev但很多这类下载包并不带完整构建链静态服务反而最稳。起来之后按这个顺序验证别一上来就乱点页面能正常显示 T 恤底图说明素材路径没断。点图案列表里的某个图案能出现在衣服上说明素材加载和画布初始化正常。拖动图案、缩放、旋转选中框跟着走说明交互层没问题。加一行文字能改颜色和字号说明文字图层可用。点导出或提交能拿到一张合成图或一段参数 JSON说明整条链路通了。哪一步卡住问题范围就缩到那一块比漫无目的地翻代码高效得多。3.2 读懂初始化代码画布尺寸与打印区约束跑通之后打开业务脚本找到画布初始化那段。这是整个 t恤diy系统 的地基尺寸和约束都在这儿定。典型写法长这样// 初始化画布尺寸通常跟底图显示尺寸一致 const canvas new fabric.Canvas(c, { width: 500, height: 600, preserveObjectStacking: true // 选中时图层不跳到最顶方便调层级 }); // 打印区约束图案移动时限制在矩形内 const printArea { left: 150, top: 120, width: 200, height: 260 }; canvas.on(object:moving, (e) { const obj e.target; // 把对象边界钳制在打印区内超出就拉回 obj.set({ left: Math.max(printArea.left, Math.min(obj.left, printArea.left printArea.width - obj.getScaledWidth())), top: Math.max(printArea.top, Math.min(obj.top, printArea.top printArea.height - obj.getScaledHeight())) }); });逻辑说明preserveObjectStacking这个参数很关键不开的话你点中底层图案它会自动跳到最上层调完层级全乱用户会以为系统有 bug。object:moving事件里做边界钳制用的是对象缩放后的实际宽高getScaledWidth()不是原始宽高这点新手极容易写错——用原始宽高的话图案一放大就会跑出打印区。参数上printArea的四个值要跟你的底图实际打印位置对齐换衣服款式必须重算不能照抄。3.3 图案加载与图层顺序的默认行为再往下看图案是怎么加进画布的。一般是点素材列表触发一个函数fabric.Image.fromURL加载图片后canvas.add。这里有个默认行为要留意后加的对象在上层。如果系统没做层级管理用户先加文字再加图案图案会盖住文字看起来像文字丢了。合格的实现会在加对象时给个固定层级策略比如图案永远在文字下面或者提供「上移/下移」按钮。我拆的这套带了简单的层级按钮但默认顺序是「谁后加谁在上」这就埋了个坑用户先排版文字再贴图案图案压住文字导出后文字被挡。改法是在canvas.add之后调obj.sendToBack()或维护一个zIndex映射具体看你的业务约定。这一步不复杂但不改的话上线必被投诉。4. 改图案、换底图、调打印区三个高频改动点跑通只是起点真正交付前客户一定会让你换衣服、换图案、调可印范围。这三件事看着简单每件都有边界条件改错一个就白干。4.1 替换图案素材与缩略图同步换图案素材最直接把新图丢进assets/patterns/然后在配置数组里加一项。但很多人只加了配置忘了缩略图。素材列表页显示的往往是小图如果配置里thumb字段还指向旧路径或干脆没写列表就出现裂图。常见做法是缩略图和原图分开存缩略图控制在 100×100 以内加载快原图保持高清导出时才用。// 图案配置项的标准结构thumb 和 src 分开 const patterns [ { id: p001, name: 几何图形, thumb: assets/patterns/thumb/p001.png, // 列表展示用 src: assets/patterns/full/p001.png // 上画布用 } ];逻辑说明列表渲染只读thumb点击后才用src加载到画布这样首屏不会因为加载一堆高清图而卡顿。参数上src的图片建议控制在 1000px 以内太大拖拽会掉帧透明背景的 PNG 是必须的JPG 贴上去会带白底这是新手最常犯的错。4.2 换底图后打印区坐标的重算换一件不同版型的 T 恤底图尺寸变了打印区坐标必须跟着重算。我见过有人直接沿用旧坐标结果图案印到袖子上。正确做法是拿新底图的实际像素尺寸按比例换算打印区。假设旧底图 500×600、打印区left:150, top:120, width:200, height:260新底图 600×720等比放大 1.2 倍四个值全部乘 1.2。// 按底图缩放比例重算打印区避免手算出错 function scalePrintArea(base, ratio) { return { left: base.left * ratio, top: base.top * ratio, width: base.width * ratio, height: base.height * ratio }; } // 旧底图 500 宽新底图 600 宽比例 1.2 const newArea scalePrintArea({ left: 150, top: 120, width: 200, height: 260 }, 600 / 500);逻辑说明用比例函数而不是手算换多件衣服时不容易漏。参数上比例取新底图宽除以旧底图宽前提是两件衣服版型比例一致如果版型差异大比如修身换宽松光等比缩放不够得按实际打印位置重新标定这一步没有捷径只能对着底图量。4.3 导出合成图的分辨率与格式取舍最后交付给后端或打印厂的通常是一张合成图。导出这块的取舍很实际分辨率低了打印糊高了文件大、生成慢。常见做法是按打印实际物理尺寸反推像素比如 A4 区域 300dpi 约 2480×3508但 T 恤打印区没这么大2000px 宽基本够用。// 导出时用 multiplier 放大而不是改画布尺寸 const dataURL canvas.toDataURL({ format: png, multiplier: 2 // 画布 500 宽导出 1000 宽 });逻辑说明multiplier是在导出瞬间按倍数渲染不影响用户看到的画布尺寸比直接调大画布再缩显示要干净。参数上format选 png 保留透明选 jpeg 要传quality0.9 左右但 jpeg 不支持透明图案边缘会有白边定制场景基本都用 png。导出后记得把 dataURL 转成 Blob 再上传直接传 base64 字符串体积会膨胀约三分之一。5. 避坑与排查这套 t恤diy源码 最容易翻车的五个地方下面这几条都是我实际改这类系统时踩过的按「现象 → 原因 → 解决」写照着对号入座能省不少时间。现象一拖图案时图案跑出衣服范围松手又弹回。原因多半是边界钳制只写了object:moving没处理object:scaling和object:rotating缩放和旋转时对象尺寸变了钳制逻辑没跟上。解决把钳制逻辑抽成一个函数三个事件都绑上且用getScaledWidth()而不是width。现象二导出图里图案位置和画布上看到的对不上。原因是画布显示尺寸和导出 multiplier 之间有人手动改过canvas.setDimensions导致坐标基准变了。解决导出前不要动画布尺寸统一用multiplier放大如果必须改改完要重新校准所有对象的left/top。现象三换底图后图案全部偏移。原因是底图换了但画布width/height没同步或者打印区坐标没按比例重算。解决换底图时把画布尺寸、打印区、背景图三者当成一个整体一起改写个loadTemplate()函数统一处理别东改一处西改一处。现象四图案列表点多了页面越来越卡。原因是每次点击都fabric.Image.fromURL重新加载没有缓存且旧对象没清理。解决加载过的图片存进一个Map缓存重复点击直接复用切换图案时先canvas.remove旧对象再add新的别只 add 不 remove。现象五移动端手指拖拽和页面滚动打架。原因是画布没禁用触摸默认行为手指拖图案时页面跟着滚。解决给 canvas 容器加touch-action: none并在 Fabric 初始化时设allowTouchScrolling: false两者配合才能让拖拽只作用于图案。提示排查这类交互问题优先在浏览器控制台看有没有报错再看事件有没有绑上。很多「没反应」其实是 JS 报错中断了后续绑定不是逻辑写错。6. 进阶把定制参数结构化落库而不是只存一张图只导出图片是不够的。真正要复用的定制系统得把「用户选了什么底图、贴了哪些图案、每个图案的坐标缩放旋转、加了什么文字」存成结构化数据图片只是渲染结果。这样后端才能重新渲染、换分辨率出图、甚至做二次编辑。我一般会在导出时同时生成两份东西一份合成图给预览一份 JSON 参数给后端。// 导出结构化参数只保留可复现的必要字段 function exportDesign(canvas) { const objects canvas.getObjects().map((obj) ({ type: obj.type, // image / text / i-text src: obj.type image ? obj.getSrc() : null, text: obj.type ! image ? obj.text : null, left: obj.left, top: obj.top, scaleX: obj.scaleX, scaleY: obj.scaleY, angle: obj.angle, fill: obj.fill || null })); return { templateId: tshirt-front, objects }; }逻辑说明getObjects()拿到所有图层按类型分别取图片路径或文字内容坐标和变换参数原样保留。参数上templateId用来标记当前是哪件衣服的哪一面后端靠它找对应底图和打印区重渲染。这份 JSON 体积很小存数据库毫无压力比存 base64 图片省得多。验证方法也简单拿导出的 JSON写个脚本重新fabric.Image.fromURL和new fabric.IText逐个还原对比还原图和原导出图像素级对不上就说明有字段漏了。我习惯在每次改完导出逻辑后跑一遍这个还原对比比肉眼检查靠谱。从那以后我每次接这类定制系统都强制先跑一遍「导出 JSON → 还原 → 对比」这条闭环再谈换素材和调样式。很多看起来正常的交互一还原就暴露坐标基准或图层顺序的问题。希望这套拆包思路帮到你拿到压缩包能少走几步弯路。本文还有配套的精品资源点击获取 
长河君 · 2026/10/27 15:52:35 · 阅读 1.2k T恤DIY定制系统源码拆解：从画布交互到订单参数落库
简介这份资源是面向移动端用户的T恤在线DIY定制系统源码包适合具备HTML、CSS与JavaScript基础、希望练习canvas绘图与交互设计的前端学习者也适用于想搭建个性化定制平台的开发者参考。压缩包约14.19MB内含index.html主入口页面、images模板与设计素材、js交互逻辑脚本、fonts字体文件及css样式表分别承担页面结构、素材支撑、绘图与操作逻辑、文字样式和视觉布局等职责目录划分清晰便于按模块阅读。已有797人学习下载说明其在同类练手项目中具备一定参考价值。读者可从中了解canvas绘制图案与文字合成的实现思路尤其是文字尚未写入canvas这一待完善点为后续处理文字与图形合并、保证设计效果一致性提供了明确的改进方向也可借鉴其素材组织与交互流程设计。1. 拿到一个 T 恤 DIY 定制系统压缩包先别急着解压上周有个做电商的朋友甩过来一个t恤diy定制系统.zip说客户要一个能在网页上换颜色、换图案、加文字的 T 恤定制页预算不高问我这套源码能不能直接改改上线。我打开看了一眼典型的「前端画布交互 图案素材管理 订单参数落库」三段式结构不是那种只能看不能跑的演示壳子。这类 t恤diy设计 资源的价值不在代码多漂亮而在于它把「用户拖拽图案到衣服上、实时预览、最后把定制参数提交给后端」这条链路完整走通了。适合谁适合接中小电商定制需求的外包、想快速搭一个 t恤diy源码 原型验证交互的产品以及需要理解 t恤设计交互 里坐标换算和图层管理的新手。下面按我实际拆包的顺序讲从目录结构到跑起来再到改图案和避坑。2. 拆包看结构这套 t恤diy系统 到底由哪几块拼起来解压之后别急着找 index.html 双击打开先花五分钟把目录摸清楚后面改代码能省一半时间。这类定制系统的目录通常不会太深但文件职责分得很开认错了入口文件是新手最常见的翻车点。2.1 目录分层与入口文件定位我拿到的这个包根目录下大致是这么几层assets/放 T 恤底图、图案素材和字体css/是样式js/里再分lib/第三方库通常是 Fabric.js 或 Konva 这类画布库和业务脚本index.html是定制页入口有的包还会带一个api/或server/目录放提交订单的示例后端。判断入口很简单找那个引用了画布库、又初始化了 canvas 元素的 HTML 文件一般就是index.html或design.html。先跑一条命令把结构列出来比在文件管理器里点来点去快# 只看两层目录过滤掉 node_modules 这类噪音 find . -maxdepth 2 -type d -not -path */node_modules* | sort # 找所有 HTML 入口确认哪个是定制页 grep -rl canvas --include*.html .第一条命令给你目录骨架第二条命令直接锁定含 canvas 的页面。逻辑说明-maxdepth 2防止目录太深刷屏grep -rl只输出文件名不输出内容避免一屏全是 HTML 标签。参数上如果你的包带了dist/构建产物记得把dist也加进排除否则会看到两份重复结构容易改错文件。2.2 画布库选型为什么这类系统偏爱 Fabric.js打开js/lib/看一眼十有八九是 Fabric.js。这不是玄学是这类 t恤设计交互 场景的刚需决定的用户要拖图案、缩放、旋转、加文字还要能选中某个元素单独调原生 Canvas 这些全得自己写命中检测和变换矩阵工作量翻几倍。Fabric.js 把这些封装成了对象模型一个fabric.Image就是一个可操作图层选中、变换、序列化都是现成的。对比一下常见选择你就明白为什么这套源码这么搭方案适合场景在这套系统里的短板原生 Canvas纯展示、粒子动画图层选中、拖拽变换全要手写Fabric.js图形编辑器、定制设计包体积偏大但功能对得上Konva.js高性能舞台、游戏化交互同样能用生态略偏动画DOM CSS 变换简单贴图、元素少图案多了性能塌导出成图麻烦我一般会先确认js/lib/里到底是哪个库因为后面所有改图案、改导出逻辑的写法都跟它绑定。如果是 Fabric.js业务脚本里一定会有new fabric.Canvas(...)这样的初始化如果是 Konva则是new Konva.Stage(...)。认错了库后面照着改代码全是白费。2.3 素材与配置底图、图案、打印区域的约定定制系统的核心数据其实就三样T 恤底图正面/背面、可打印区域一个矩形范围超出就不该让图案跑出去、图案素材列表。这些通常不会硬编码在 JS 里而是放在一个config.js或data/下的 JSON 里。找到它你才知道换一件衣服、加一批图案要改哪里。常见做法是配置里写死底图路径和打印区坐标图案列表则是一个数组每项带id、src、name。我拆的这个包打印区是用相对底图的百分比坐标存的好处是换分辨率不用重算坏处是缩放时容易算错边界这个坑后面第 4 章会专门讲。先把配置文件找出来读一遍# 找配置类文件JSON 和 js 都扫 find . -iname *config* -o -iname *.json | grep -v node_modules看到配置后重点确认三件事底图尺寸是多少像素、打印区矩形相对底图的偏移、图案素材的目录约定。这三样对上了后面拖拽和导出才不会错位。3. 把系统跑起来本地起服务与首次交互验证结构清楚了就该让它动起来。这类系统有个硬性前提不能直接双击 HTML 打开。因为画布要加载本地图片素材file://协议下浏览器会因跨域策略拒绝读取像素数据导出成图那一步直接报错。血泪经验第一次拆包我图省事双击打开拖图案正常一点「生成预览」就白屏排查半天才发现是协议问题。3.1 起一个静态服务再访问最省事的是用 Python 自带的 HTTP 服务不用装任何东西# 在项目根目录执行8000 端口起静态服务 python3 -m http.server 8000 # 然后浏览器访问 http://localhost:8000/index.html逻辑说明http.server把当前目录当网站根目录所有相对路径引用都能正常解析图片加载走的是 http 协议画布读取像素不会被拦。参数上8000 被占用就换 8080别用 80 除非你有权限。如果你的包带了package.json和构建脚本那更规范的做法是先npm install再npm run dev但很多这类下载包并不带完整构建链静态服务反而最稳。起来之后按这个顺序验证别一上来就乱点页面能正常显示 T 恤底图说明素材路径没断。点图案列表里的某个图案能出现在衣服上说明素材加载和画布初始化正常。拖动图案、缩放、旋转选中框跟着走说明交互层没问题。加一行文字能改颜色和字号说明文字图层可用。点导出或提交能拿到一张合成图或一段参数 JSON说明整条链路通了。哪一步卡住问题范围就缩到那一块比漫无目的地翻代码高效得多。3.2 读懂初始化代码画布尺寸与打印区约束跑通之后打开业务脚本找到画布初始化那段。这是整个 t恤diy系统 的地基尺寸和约束都在这儿定。典型写法长这样// 初始化画布尺寸通常跟底图显示尺寸一致 const canvas new fabric.Canvas(c, { width: 500, height: 600, preserveObjectStacking: true // 选中时图层不跳到最顶方便调层级 }); // 打印区约束图案移动时限制在矩形内 const printArea { left: 150, top: 120, width: 200, height: 260 }; canvas.on(object:moving, (e) { const obj e.target; // 把对象边界钳制在打印区内超出就拉回 obj.set({ left: Math.max(printArea.left, Math.min(obj.left, printArea.left printArea.width - obj.getScaledWidth())), top: Math.max(printArea.top, Math.min(obj.top, printArea.top printArea.height - obj.getScaledHeight())) }); });逻辑说明preserveObjectStacking这个参数很关键不开的话你点中底层图案它会自动跳到最上层调完层级全乱用户会以为系统有 bug。object:moving事件里做边界钳制用的是对象缩放后的实际宽高getScaledWidth()不是原始宽高这点新手极容易写错——用原始宽高的话图案一放大就会跑出打印区。参数上printArea的四个值要跟你的底图实际打印位置对齐换衣服款式必须重算不能照抄。3.3 图案加载与图层顺序的默认行为再往下看图案是怎么加进画布的。一般是点素材列表触发一个函数fabric.Image.fromURL加载图片后canvas.add。这里有个默认行为要留意后加的对象在上层。如果系统没做层级管理用户先加文字再加图案图案会盖住文字看起来像文字丢了。合格的实现会在加对象时给个固定层级策略比如图案永远在文字下面或者提供「上移/下移」按钮。我拆的这套带了简单的层级按钮但默认顺序是「谁后加谁在上」这就埋了个坑用户先排版文字再贴图案图案压住文字导出后文字被挡。改法是在canvas.add之后调obj.sendToBack()或维护一个zIndex映射具体看你的业务约定。这一步不复杂但不改的话上线必被投诉。4. 改图案、换底图、调打印区三个高频改动点跑通只是起点真正交付前客户一定会让你换衣服、换图案、调可印范围。这三件事看着简单每件都有边界条件改错一个就白干。4.1 替换图案素材与缩略图同步换图案素材最直接把新图丢进assets/patterns/然后在配置数组里加一项。但很多人只加了配置忘了缩略图。素材列表页显示的往往是小图如果配置里thumb字段还指向旧路径或干脆没写列表就出现裂图。常见做法是缩略图和原图分开存缩略图控制在 100×100 以内加载快原图保持高清导出时才用。// 图案配置项的标准结构thumb 和 src 分开 const patterns [ { id: p001, name: 几何图形, thumb: assets/patterns/thumb/p001.png, // 列表展示用 src: assets/patterns/full/p001.png // 上画布用 } ];逻辑说明列表渲染只读thumb点击后才用src加载到画布这样首屏不会因为加载一堆高清图而卡顿。参数上src的图片建议控制在 1000px 以内太大拖拽会掉帧透明背景的 PNG 是必须的JPG 贴上去会带白底这是新手最常犯的错。4.2 换底图后打印区坐标的重算换一件不同版型的 T 恤底图尺寸变了打印区坐标必须跟着重算。我见过有人直接沿用旧坐标结果图案印到袖子上。正确做法是拿新底图的实际像素尺寸按比例换算打印区。假设旧底图 500×600、打印区left:150, top:120, width:200, height:260新底图 600×720等比放大 1.2 倍四个值全部乘 1.2。// 按底图缩放比例重算打印区避免手算出错 function scalePrintArea(base, ratio) { return { left: base.left * ratio, top: base.top * ratio, width: base.width * ratio, height: base.height * ratio }; } // 旧底图 500 宽新底图 600 宽比例 1.2 const newArea scalePrintArea({ left: 150, top: 120, width: 200, height: 260 }, 600 / 500);逻辑说明用比例函数而不是手算换多件衣服时不容易漏。参数上比例取新底图宽除以旧底图宽前提是两件衣服版型比例一致如果版型差异大比如修身换宽松光等比缩放不够得按实际打印位置重新标定这一步没有捷径只能对着底图量。4.3 导出合成图的分辨率与格式取舍最后交付给后端或打印厂的通常是一张合成图。导出这块的取舍很实际分辨率低了打印糊高了文件大、生成慢。常见做法是按打印实际物理尺寸反推像素比如 A4 区域 300dpi 约 2480×3508但 T 恤打印区没这么大2000px 宽基本够用。// 导出时用 multiplier 放大而不是改画布尺寸 const dataURL canvas.toDataURL({ format: png, multiplier: 2 // 画布 500 宽导出 1000 宽 });逻辑说明multiplier是在导出瞬间按倍数渲染不影响用户看到的画布尺寸比直接调大画布再缩显示要干净。参数上format选 png 保留透明选 jpeg 要传quality0.9 左右但 jpeg 不支持透明图案边缘会有白边定制场景基本都用 png。导出后记得把 dataURL 转成 Blob 再上传直接传 base64 字符串体积会膨胀约三分之一。5. 避坑与排查这套 t恤diy源码 最容易翻车的五个地方下面这几条都是我实际改这类系统时踩过的按「现象 → 原因 → 解决」写照着对号入座能省不少时间。现象一拖图案时图案跑出衣服范围松手又弹回。原因多半是边界钳制只写了object:moving没处理object:scaling和object:rotating缩放和旋转时对象尺寸变了钳制逻辑没跟上。解决把钳制逻辑抽成一个函数三个事件都绑上且用getScaledWidth()而不是width。现象二导出图里图案位置和画布上看到的对不上。原因是画布显示尺寸和导出 multiplier 之间有人手动改过canvas.setDimensions导致坐标基准变了。解决导出前不要动画布尺寸统一用multiplier放大如果必须改改完要重新校准所有对象的left/top。现象三换底图后图案全部偏移。原因是底图换了但画布width/height没同步或者打印区坐标没按比例重算。解决换底图时把画布尺寸、打印区、背景图三者当成一个整体一起改写个loadTemplate()函数统一处理别东改一处西改一处。现象四图案列表点多了页面越来越卡。原因是每次点击都fabric.Image.fromURL重新加载没有缓存且旧对象没清理。解决加载过的图片存进一个Map缓存重复点击直接复用切换图案时先canvas.remove旧对象再add新的别只 add 不 remove。现象五移动端手指拖拽和页面滚动打架。原因是画布没禁用触摸默认行为手指拖图案时页面跟着滚。解决给 canvas 容器加touch-action: none并在 Fabric 初始化时设allowTouchScrolling: false两者配合才能让拖拽只作用于图案。提示排查这类交互问题优先在浏览器控制台看有没有报错再看事件有没有绑上。很多「没反应」其实是 JS 报错中断了后续绑定不是逻辑写错。6. 进阶把定制参数结构化落库而不是只存一张图只导出图片是不够的。真正要复用的定制系统得把「用户选了什么底图、贴了哪些图案、每个图案的坐标缩放旋转、加了什么文字」存成结构化数据图片只是渲染结果。这样后端才能重新渲染、换分辨率出图、甚至做二次编辑。我一般会在导出时同时生成两份东西一份合成图给预览一份 JSON 参数给后端。// 导出结构化参数只保留可复现的必要字段 function exportDesign(canvas) { const objects canvas.getObjects().map((obj) ({ type: obj.type, // image / text / i-text src: obj.type image ? obj.getSrc() : null, text: obj.type ! image ? obj.text : null, left: obj.left, top: obj.top, scaleX: obj.scaleX, scaleY: obj.scaleY, angle: obj.angle, fill: obj.fill || null })); return { templateId: tshirt-front, objects }; }逻辑说明getObjects()拿到所有图层按类型分别取图片路径或文字内容坐标和变换参数原样保留。参数上templateId用来标记当前是哪件衣服的哪一面后端靠它找对应底图和打印区重渲染。这份 JSON 体积很小存数据库毫无压力比存 base64 图片省得多。验证方法也简单拿导出的 JSON写个脚本重新fabric.Image.fromURL和new fabric.IText逐个还原对比还原图和原导出图像素级对不上就说明有字段漏了。我习惯在每次改完导出逻辑后跑一遍这个还原对比比肉眼检查靠谱。从那以后我每次接这类定制系统都强制先跑一遍「导出 JSON → 还原 → 对比」这条闭环再谈换素材和调样式。很多看起来正常的交互一还原就暴露坐标基准或图层顺序的问题。希望这套拆包思路帮到你拿到压缩包能少走几步弯路。本文还有配套的精品资源点击获取