超易用前端使用Canvas海报图片生成器
超易用前端使用Canvas海报图片生成器一个基于HTML5 Canvas的简单海报生成器实现，允许用户自定义文本、背景和样式，并导出为图片。
一个根据指定JSON配置文件来生成海报的方案，而不是手动设计界面。以下是完整的解决方案：
方案概述
JSON配置文件：定义海报的背景图、文字标签、二维码位置等所有参数。
Canvas渲染引擎：读取JSON并自动绘制海报。
支持动态数据：JSON中可包含占位符（如{{title}}），渲染时替换为实际值。
JSON配置文件示例
{"poster": {"width": 800,"height": 1200,"background": "https://www.gaodingyun.com/static/img04.png","elements": [{"type": "text","id": "title","content": "{{title}}","x": 100,"y": 150,"fontSize": 48,"color": "#FFFFFF","fontFamily": "Arial","textAlign": "center"},{"type": "text","id": "subtitle","content": "{{subtitle}}","x": 100,"y": 220,"fontSize": 24,"color": "#FFD700","fontFamily": "Arial"},{"type": "qrcode","id": "qr","content": "搞定计件","x": 600,"y": 1000,"size": 120,"color": "#000000"}]}
}完整HTML+JS实现
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>JSON驱动海报生成器</title><script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script><style>body { font-family: Arial; text-align: center; }canvas { border: 1px solid #ddd; margin: 20px auto; }button { padding: 10px 20px; background: #4CAF50; color: white; border: none; cursor: pointer; }</style>
</head>
<body><h1>JSON驱动海报生成器</h1><button onclick="generatePoster()">生成海报</button><canvas id="posterCanvas"></canvas><script>// 模拟从API或文件加载的JSON数据const posterConfig = {"poster": {"width": 800,"height": 1200,"background": "https://via.placeholder.com/800x1200/3498db/ffffff?text=背景图","elements": [{"type": "text","id": "title","content": "{{title}}","x": 400,"y": 150,"fontSize": 48,"color": "#FFFFFF","fontFamily": "Arial","textAlign": "center"},{"type": "text","id": "subtitle","content": "{{subtitle}}","x": 400,"y": 220,"fontSize": 24,"color": "#FFD700","fontFamily": "Arial"},{"type": "qrcode","id": "qr","content": "https://www.gaodingyun.com","x": 650,"y": 1050,"size": 120,"color": "#000000"}]}};// 动态数据（可替换JSON中的{{placeholder}}）const dynamicData = {title: "搞定计件",subtitle: "上线了",qrContent: "https://www.gaodingyun.com"};// 生成海报函数async function generatePoster() {const canvas = document.getElementById('posterCanvas');const ctx = canvas.getContext('2d');const config = posterConfig.poster;// 设置画布尺寸canvas.width = config.width;canvas.height = config.height;// 1. 绘制背景const bgImg = new Image();bgImg.crossOrigin = 'Anonymous';bgImg.src = config.background;await new Promise((resolve) => {bgImg.onload = resolve;});ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);// 2. 绘制文本元素config.elements.forEach(element => {if (element.type === 'text') {ctx.font = `${element.fontSize}px ${element.fontFamily}`;ctx.fillStyle = element.color;ctx.textAlign = element.textAlign || 'left';// 替换占位符let content = element.content;Object.keys(dynamicData).forEach(key => {content = content.replace(`{{${key}}}`, dynamicData[key]);});ctx.fillText(content, element.x, element.y);}});// 3. 绘制二维码（使用qrcode.js库）config.elements.forEach(async (element) => {if (element.type === 'qrcode') {const qrCanvas = document.createElement('canvas');QRCode.toCanvas(qrCanvas, dynamicData.qrContent || element.content, {width: element.size,margin: 1,color: {dark: element.color || '#000000',light: '#FFFFFF'}});ctx.drawImage(qrCanvas, element.x, element.y, element.size, element.size);}});}</script>
</body>
</html>3. 关键功能说明
JSON驱动：所有海报元素通过JSON配置，无需硬编码。
动态数据替换：支持{{placeholder}}语法，渲染时替换为实际值。
二维码生成：集成qrcode.js库，直接在Canvas上绘制。
跨域图片处理：设置crossOrigin: 'Anonymous'解决图片加载问题。