html5+css3+canvas长文转长图工具支持换行
朋友圈神器长文转图片工具支持自动换行
效果见图，体验见左下角原文链接，原名微博长文转长图工具。
朋友圈(微博)分享文章工具，图文人必备。
另：不依赖服务器，可以自行保存网页局域网浏览器打开使用。
增强版文章转图片生成器 chalide.cn body { font-family: \'Arial\', sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; margin-bottom: 30px; } .form-group { margin-bottom: 15px; } .form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; } .form-col { flex: 1; min-width: 150px; } label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 14px; } textarea { width: 100%; height: 200px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; resize: vertical; font-family: inherit; line-height: 1.5; } input, select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: inherit; } .color-input { display: flex; gap: 10px; } .color-input input[type=\"color\"] { width: 40px; height: 40px; padding: 0; border: 1px solid #ddd; } .color-input input[type=\"text\"] { flex: 1; min-width: 100px; } .btn-group { display: flex; justify-content: center; gap: 15px; margin: 25px 0; } button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; flex: 1; max-width: 200px; } button:hover { background-color: #45a049; } .download-btn { background-color: #2196F3; } .download-btn:hover { background-color: #0b7dda; } .image-container { text-align: center; margin-top: 30px; background-color: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px dashed #ddd; } .image-preview { max-width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .error-message { color: red; text-align: center; margin: 10px 0; min-height: 20px; font-size: 14px; } .loading { text-align: center; margin: 20px 0; display: none; color: #666; } @media (max-width: 600px) { .form-col { min-width: 100%; } .btn-group { flex-direction: column; align-items: center; } button { max-width: 100%; width: 100%; } } 文章转图片生成器
Arial 微软雅黑 宋体 黑体 楷体 生成中，请稍候... 生成的图片将显示在这里
document.addEventListener(\'DOMContentLoaded\', function() { // 获取DOM元素 const textContent = document.getElementById(\'text-content\'); const fontSelect = document.getElementById(\'font-select\'); const fontSizeInput = document.getElementById(\'font-size\'); const textColorPicker = document.getElementById(\'text-color-picker\'); const textColorInput = document.getElementById(\'text-color\'); const bgColorPicker = document.getElementById(\'bg-color-picker\'); const bgColorInput = document.getElementById(\'bg-color\'); const lineHeightInput = document.getElementById(\'line-height\'); const paddingInput = document.getElementById(\'padding\'); const errorMessage = document.getElementById(\'error-message\'); const form = document.getElementById(\'text-to-image-form\'); const loading = document.getElementById(\'loading\'); const imageContainer = document.getElementById(\'image-container\'); const downloadBtn = document.getElementById(\'download-btn\'); // 颜色选择器和输入框同步 textColorPicker.addEventListener(\'input\', function() { textColorInput.value = this.value; }); textColorInput.addEventListener(\'input\', function() { if (/^#[0-9A-F]{6}$/i.test(this.value)) { textColorPicker.value = this.value; } }); bgColorPicker.addEventListener(\'input\', function() { bgColorInput.value = this.value; }); bgColorInput.addEventListener(\'input\', function() { if (/^#[0-9A-F]{6}$/i.test(this.value)) { bgColorPicker.value = this.value; } }); // 表单提交 form.addEventListener(\'submit\', function(e) { e.preventDefault(); generateImage(); }); // 初始生成一个示例图片 textContent.value = \"这是一段示例文本，用于展示文章转图片的功能。\\n\\n支持自动换行、自定义字体大小和颜色。当一行文本超过指定宽度时，系统会自动将其分割为多行，确保所有内容都能完整显示。\\n\\n图片宽度固定为728像素，高度会根据内容长度自动调整。您可以输入任意长度的文本，系统会智能处理换行和段落分隔。\\n\\n此外，除了文本输入区域外，其他所有控制项都采用一行三列的布局，并能够自适应不同屏幕尺寸，提供更好的用户体验。\"; generateImage(); // 生成图片函数 function generateImage() { const text = textContent.value.trim(); if (!text) { errorMessage.textContent = \'请输入文章内容\'; return; } errorMessage.textContent = \'\'; loading.style.display = \'block\'; imageContainer.innerHTML = \'\'; downloadBtn.style.display = \'none\'; // 使用setTimeout让UI有机会更新加载状态 setTimeout(() => { try { // 创建临时canvas测量高度 const measureCanvas = document.createElement(\'canvas\'); const measureCtx = measureCanvas.getContext(\'2d\'); // 设置canvas宽度 const imageWidth = 728; const padding = parseInt(paddingInput.value); const contentWidth = imageWidth - padding * 2; // 设置测量上下文 const fontSize = parseInt(fontSizeInput.value); const font = fontSelect.value; measureCtx.font = `${fontSize}px ${font}`; // 计算行高 const lineHeight = fontSize * parseFloat(lineHeightInput.value); // 分割文本行为多行（支持段落内自动换行） const paragraphs = text.split(\'\\n\'); const lines = []; paragraphs.forEach(paragraph => { if (!paragraph.trim()) { lines.push(\'\'); // 空行 return; } // 将段落分割为适合宽度的行 const words = paragraph.split(\'\'); let currentLine = words[0] || \'\'; for (let i = 1; i < words.length; i++) { const word = words[i]; const testLine = currentLine + \' \' + word; const metrics = measureCtx.measureText(testLine); if (metrics.width { if (line === \'\') { // 空行处理 y += lineHeight; } else { ctx.fillText(line, padding, y); y += lineHeight; } }); // 显示图片 const img = new Image(); img.src = canvas.toDataURL(\'image/png\'); img.className = \'image-preview\'; img.alt = \'生成的图片\'; imageContainer.innerHTML = \'\'; imageContainer.appendChild(img); // 设置下载链接 downloadBtn.onclick = function() { const link = document.createElement(\'a\'); link.href = canvas.toDataURL(\'image/png\'); link.download = `article-image-${Date.now()}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; downloadBtn.style.display = \'block\'; loading.style.display = \'none\'; } catch (error) { console.error(\'生成图片出错:\', error); errorMessage.textContent = \'生成图片时出错: \' + error.message; loading.style.display = \'none\'; } }, 100); } });
