Fabric.js实现类YourQuote图片编辑器：跨URL传带换行文本失败求解

这个问题我之前做类似文本转图片的项目时也碰到过，核心是URL对换行符的自动处理会导致格式丢失，再加上Fabric.js的文本组件需要正确配置才能识别换行，给你几个可行的解决方案：

方案一：URL编码解码+Fabric.js换行配置 #

URL里不能直接传递换行符（\n或\r\n），浏览器会自动把它们转义或忽略，所以需要先编码再传递：

1. 输入页面（第一个URL）的编码逻辑 #

先统一不同系统的换行符为\n，再用encodeURIComponent编码成URL安全的字符串：

// 获取用户输入的文本（假设是textarea的value）
const userInput = document.getElementById('text-input').value;
// 统一换行符为\n（兼容Windows的\r\n）
const normalizedText = userInput.replace(/\r\n/g, '\n');
// 编码成URL可传递的格式
const encodedText = encodeURIComponent(normalizedText);
// 跳转到装饰页面
window.location.href = `decorate.html?text=${encodedText}`;

2. 装饰页面（第二个URL）的解码与渲染 #

解码后，使用Fabric.js的Textbox组件（推荐）或配置Text组件支持换行：

// 获取URL参数
const params = new URLSearchParams(window.location.search);
const encodedText = params.get('text');
// 解码还原文本
const decodedText = decodeURIComponent(encodedText);

// 初始化Fabric.js画布
const canvas = new fabric.Canvas('your-canvas-id');

// 方法一：用Textbox（自动处理换行，推荐）
const textElement = new fabric.Textbox(decodedText, {
  left: 50,
  top: 50,
  width: 400, // 设定文本宽度，超出自动换行
  fontSize: 24,
  lineHeight: 1.5, // 调整行间距
  textAlign: 'left'
});

// 方法二：用Text组件，需开启lineBreak
// const textElement = new fabric.Text(decodedText, {
//   left: 50,
//   top: 50,
//   fontSize: 24,
//   lineHeight: 1.5,
//   lineBreak: true // 必须开启才能识别\n换行
// });

canvas.add(textElement);
canvas.renderAll();

方案二：用Base64编码（适合含特殊字符的文本） #

如果文本里有更多特殊字符，用Base64编码更稳妥：

输入页面编码 #

const userInput = document.getElementById('text-input').value;
const normalizedText = userInput.replace(/\r\n/g, '\n');
// 转成Base64
const encodedText = btoa(unescape(encodeURIComponent(normalizedText)));
window.location.href = `decorate.html?text=${encodedText}`;

装饰页面解码 #

const params = new URLSearchParams(window.location.search);
const encodedText = params.get('text');
const decodedText = decodeURIComponent(escape(atob(encodedText)));
// 后续Fabric.js渲染逻辑同方案一

方案三：用localStorage传递（适合长文本） #

如果用户输入的文本很长，URL参数可能会超出浏览器的长度限制（一般约2048字符），这时候用localStorage更可靠：

输入页面存储文本 #

const userInput = document.getElementById('text-input').value;
const normalizedText = userInput.replace(/\r\n/g, '\n');
// 存到localStorage
localStorage.setItem('editor-text', normalizedText);
window.location.href = 'decorate.html';

装饰页面读取文本 #

// 从localStorage读取
const decodedText = localStorage.getItem('editor-text') || '';
// 读取后建议移除，避免残留
localStorage.removeItem('editor-text');
// 后续Fabric.js渲染逻辑同方案一

关键注意点 #

• 统一换行符：一定要先把\r\n替换成\n，避免解码后出现多余的回车符；
• Fabric.js组件选择：Textbox比Text更适合处理带换行的文本，它不仅支持手动换行，还能自动根据宽度换行；
• 长文本适配：URL参数有长度限制，长文本优先用localStorage或sessionStorage传递。

内容的提问来源于stack exchange，提问作者Sampad Parida