当前位置： 首页 > news >正文

Claude Code 基于 VUE + KonvaJS 实现海报生成器（附源码）

news 2025/7/26 8:12:40

接上文，光说不练假把式，直接动手，让 Claude Code 根据我提供的海报图片，基于 VUE + KonvaJS，实现海报生成器！

  • 先把机会交给Trae（免费版，不中用，要排队！！），果断弃用！

在这里插入图片描述

  • 再用➡️ anyrouter 试试，最近发现又能用了！坚持签到，每天送 $25~ 真香！

在这里插入图片描述

可能是需求过于简单，很快就完工了，先看效果！

  1. 卖家秀：

在这里插入图片描述

  1. 买家秀： 在这里插入图片描述
  1. 海报生成器界面（花费$5）：

在这里插入图片描述
大模型是真爱用紫色做背景。。。

  1. 代码分享
<script>
import QRCode from 'qrcode'
import Konva from 'konva'export default {name: 'PosterGenerator',data() {return {posterData: {username: '不老刘',continueDays: '1',studyHours: '5h',todayStudy: '14m',motivationEn: 'Pains make stronger,\ntears make braver,and\nheartbreaks make wiser.',motivationCn: '伤痛铸坚强，眼泪淬勇敢，心碎炼智慧。',qrUrl: 'https://julebu.co'},canDownload: false,displaySize: { width: 375, height: 667 },exportSize: { width: 1600, height: 2600 },backgroundImage: null,qrCodeImage: null,avatarImage: null,avatarPreviewUrl: null,currentGradient: null,Konva}},methods: {scale(value) {return value * (this.displaySize.width / 375)},scaleForExport(value) {return value * (this.exportSize.width / 375)},getCurrentDate() {const now = new Date()const months = ['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October', 'November', 'December']return `${months[now.getMonth()]} ${now.getDate()}, ${now.getFullYear()}`},async handleImageUpload(event) {const file = event.target.files[0]if (file) {const img = new Image()img.onload = () => {this.backgroundImage = imgthis.currentGradient = nullthis.generatePoster()}img.src = URL.createObjectURL(file)}},async handleAvatarUpload(event) {const file = event.target.files[0]if (file) {const img = new Image()img.onload = () => {this.avatarImage = imgthis.generatePoster()}const url = URL.createObjectURL(file)this.avatarPreviewUrl = urlimg.src = url}},async selectPresetImage(imageName) {const img = new Image()img.onload = () => {this.backgroundImage = imgthis.generatePoster()}img.src = `/${imageName}`},setGradientBackground(type) {this.currentGradient = typethis.backgroundImage = nullthis.generatePoster()},getGradientConfig() {const gradients = {sunset: [0, '#ff9a9e', 0.5, '#fecfef', 1, '#fecfef'],ocean: [0, '#667eea', 0.5, '#764ba2', 1, '#667eea'],forest: [0, '#11998e', 0.5, '#38ef7d', 1, '#11998e'],purple: [0, '#a8edea', 0.5, '#fed6e3', 1, '#a8edea'],warm: [0, '#ffecd2', 0.5, '#fcb69f', 1, '#ffecd2']}return {x: 0,y: 0,width: this.displaySize.width,height: this.displaySize.height,fillLinearGradientStartPoint: { x: 0, y: 0 },fillLinearGradientEndPoint: { x: this.displaySize.width, y: this.displaySize.height },fillLinearGradientColorStops: gradients[this.currentGradient] || gradients.sunset}},async generateQRCode() {try {const canvas = document.createElement('canvas')await QRCode.toCanvas(canvas, this.posterData.qrUrl, {width: 200,margin: 2,color: {dark: '#000000',light: '#FFFFFF'}})const img = new Image()img.onload = () => {this.qrCodeImage = imgthis.$nextTick(() => {this.$refs.layer.getNode().batchDraw()})}img.src = canvas.toDataURL()} catch (error) {console.error('生成二维码失败:', error)}},async generatePoster() {await this.generateQRCode()this.canDownload = truethis.$nextTick(() => {this.$refs.layer.getNode().batchDraw()})},async downloadPoster() {if (!this.canDownload) return// 创建高分辨率的舞台用于导出const exportStage = new Konva.Stage({container: document.createElement('div'),width: this.exportSize.width,height: this.exportSize.height})const exportLayer = new Konva.Layer()exportStage.add(exportLayer)// 重新创建所有元素但使用导出尺寸const scaleRatio = this.exportSize.width / 375// 背景图片或渐变if (this.backgroundImage) {exportLayer.add(new Konva.Image({x: 0,y: 0,width: this.exportSize.width,height: this.exportSize.height,image: this.backgroundImage,filters: [Konva.Filters.Blur],blurRadius: 30}))} else if (this.currentGradient) {const gradients = {sunset: [0, '#ff9a9e', 0.5, '#fecfef', 1, '#fecfef'],ocean: [0, '#667eea', 0.5, '#764ba2', 1, '#667eea'],forest: [0, '#11998e', 0.5, '#38ef7d', 1, '#11998e'],purple: [0, '#a8edea', 0.5, '#fed6e3', 1, '#a8edea'],warm: [0, '#ffecd2', 0.5, '#fcb69f', 1, '#ffecd2']}exportLayer.add(new Konva.Rect({x: 0,y: 0,width: this.exportSize.width,height: this.exportSize.height,fillLinearGradientStartPoint: { x: 0, y: 0 },fillLinearGradientEndPoint: { x: this.exportSize.width, y: this.exportSize.height },fillLinearGradientColorStops: gradients[this.currentGradient] || gradients.sunset}))} else {exportLayer.add(new Konva.Rect({x: 0,y: 0,width: this.exportSize.width,height: this.exportSize.height,fillLinearGradientStartPoint: { x: 0, y: 0 },fillLinearGradientEndPoint: { x: this.exportSize.width, y: this.exportSize.height },fillLinearGradientColorStops: [0, '#667eea', 1, '#764ba2']}))}// 背景覆盖层exportLayer.add(new Konva.Rect({x: 0,y: 0,width: this.exportSize.width,height: this.exportSize.height,fillLinearGradientStartPoint: { x: 0, y: 0 },fillLinearGradientEndPoint: { x: 0, y: this.exportSize.height },fillLinearGradientColorStops: [0, 'rgba(0,0,0,0.3)', 1, 'rgba(0,0,0,0.6)']}))// 用户头像if (this.avatarImage) {// 头像图片（裁剪为圆形）exportLayer.add(new Konva.Image({x: 35 * scaleRatio,y: 55 * scaleRatio,width: 50 * scaleRatio,height: 50 * scaleRatio,image: this.avatarImage,clipFunc: (ctx) => {ctx.arc(60 * scaleRatio, 80 * scaleRatio, 25 * scaleRatio, 0, Math.PI * 2, false)}}))} else {// 默认头像（风景渐变圆形）exportLayer.add(new Konva.Circle({x: 60 * scaleRatio,y: 80 * scaleRatio,radius: 25 * scaleRatio,fillLinearGradientStartPoint: { x: 35 * scaleRatio, y: 55 * scaleRatio },fillLinearGradientEndPoint: { x: 85 * scaleRatio, y: 105 * scaleRatio },fillLinearGradientColorStops: [0, '#87CEEB', 0.3, '#98FB98', 0.6, '#F0E68C', 1, '#DDA0DD']}))}// 头像边框exportLayer.add(new Konva.Circle({x: 60 * scaleRatio,y: 80 * scaleRatio,radius: 25 * scaleRatio,fill: 'transparent',stroke: '#fff',strokeWidth: 2 * scaleRatio}))// 用户名exportLayer.add(new Konva.Text({x: 100 * scaleRatio,y: 60 * scaleRatio,text: this.posterData.username,fontSize: 24 * scaleRatio,fontFamily: 'Arial',fill: '#fff',fontStyle: 'bold'}))// 日期exportLayer.add(new Konva.Text({x: 100 * scaleRatio,y: 85 * scaleRatio,text: this.getCurrentDate(),fontSize: 16 * scaleRatio,fontFamily: 'Arial',fill: '#fff',opacity: 0.8}))// 右上角标签exportLayer.add(new Konva.Text({x: 250 * scaleRatio,y: 60 * scaleRatio,text: '句乐部 | 英语学习',fontSize: 14 * scaleRatio,fontFamily: 'Arial',fill: '#fff',opacity: 0.9}))// 数据卡片const cardPositions = [{x: 30, y: 140}, {x: 142, y: 140}, {x: 254, y: 140}]const cardData = [{value: this.posterData.continueDays, label: '连续打卡天数'},{value: this.posterData.studyHours, label: '总学习时长'},{value: this.posterData.todayStudy, label: '今日学习'}]cardPositions.forEach((pos, index) => {// 卡片背景exportLayer.add(new Konva.Rect({x: pos.x * scaleRatio,y: pos.y * scaleRatio,width: 90 * scaleRatio,height: 80 * scaleRatio,fill: 'rgba(255,255,255,0.25)',cornerRadius: 15 * scaleRatio}))// 数值exportLayer.add(new Konva.Text({x: (pos.x + 45) * scaleRatio,y: (pos.y + 15) * scaleRatio,text: cardData[index].value,fontSize: 32 * scaleRatio,fontFamily: 'Arial',fill: '#fff',fontStyle: 'bold',align: 'center',width: 90 * scaleRatio,offsetX: 45 * scaleRatio}))// 标签exportLayer.add(new Konva.Text({x: (pos.x + 45) * scaleRatio,y: (pos.y + 50) * scaleRatio,text: cardData[index].label,fontSize: 11 * scaleRatio,fontFamily: 'Arial',fill: '#fff',align: 'center',width: 90 * scaleRatio,offsetX: 45 * scaleRatio,opacity: 0.9}))})// 励志语句背景exportLayer.add(new Konva.Rect({x: 30 * scaleRatio,y: 250 * scaleRatio,width: 315 * scaleRatio,height: 160 * scaleRatio,fill: 'rgba(255,255,255,0.2)',cornerRadius: 20 * scaleRatio}))// 英文励志语句exportLayer.add(new Konva.Text({x: 50 * scaleRatio,y: 270 * scaleRatio,text: this.posterData.motivationEn,fontSize: 18 * scaleRatio,fontFamily: 'Georgia, serif',fill: '#fff',width: 275 * scaleRatio,lineHeight: 1.5,fontStyle: 'italic'}))// 中文励志语句exportLayer.add(new Konva.Text({x: 50 * scaleRatio,y: 350 * scaleRatio,text: this.posterData.motivationCn,fontSize: 16 * scaleRatio,fontFamily: 'Microsoft YaHei, Arial',fill: '#fff',width: 275 * scaleRatio,lineHeight: 1.6,opacity: 0.95}))// 底部品牌区域背景exportLayer.add(new Konva.Rect({x: 30 * scaleRatio,y: 450 * scaleRatio,width: 315 * scaleRatio,height: 120 * scaleRatio,fill: 'rgba(0,0,0,0.5)',cornerRadius: 15 * scaleRatio}))// 品牌名称exportLayer.add(new Konva.Text({x: 50 * scaleRatio,y: 480 * scaleRatio,text: '句乐部',fontSize: 28 * scaleRatio,fontFamily: 'Microsoft YaHei, Arial',fill: '#fff',fontStyle: 'bold'}))// 网站地址exportLayer.add(new Konva.Text({x: 50 * scaleRatio,y: 515 * scaleRatio,text: 'julebu.co',fontSize: 14 * scaleRatio,fontFamily: 'Arial',fill: '#fff',opacity: 0.9}))// 描述文字exportLayer.add(new Konva.Text({x: 50 * scaleRatio,y: 535 * scaleRatio,text: '用游戏化的形式通过句子学英语',fontSize: 12 * scaleRatio,fontFamily: 'Microsoft YaHei, Arial',fill: '#fff',opacity: 0.8}))// 二维码if (this.qrCodeImage) {exportLayer.add(new Konva.Image({x: 280 * scaleRatio,y: 475 * scaleRatio,width: 55 * scaleRatio,height: 55 * scaleRatio,image: this.qrCodeImage}))}const dataURL = exportStage.toDataURL({mimeType: 'image/png',quality: 1.0,pixelRatio: 1})const link = document.createElement('a')link.download = `英语学习海报_${this.posterData.username}_${new Date().getTime()}.png`link.href = dataURLdocument.body.appendChild(link)link.click()document.body.removeChild(link)exportStage.destroy()},handleStageMouseDown() {// 处理舞台点击事件}},mounted() {// 默认使用暖色渐变this.setGradientBackground('warm')}
}
</script>

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a Vue 3 + KonvaJS poster generator application that creates English learning progress posters. The app allows users to generate personalized study posters with customizable backgrounds, avatars, study statistics, and motivational quotes, then export them as high-resolution images.

Development Commands

# Install dependencies
npm install# Start development server (runs on port 3000)
npm run dev# Build for production
npm run build# Preview production build
npm run preview

Architecture

Core Technology Stack

  • Vue 3: Main framework with Composition API
  • KonvaJS + vue-konva: Canvas-based graphics rendering for poster generation
  • Vite: Build tool and dev server
  • QRCode library: QR code generation

Application Structure

The app is a single-page application with one main component:

  • src/App.vue: Root component with global styles and layout
  • src/components/PosterGenerator.vue: Main poster generation component
  • src/main.js: App entry point with VueKonva plugin registration

Key Architecture Patterns

Dual Canvas System

The app uses a dual-canvas approach for optimal performance:

  • Display Canvas: 375x667 resolution for real-time preview
  • Export Canvas: 1600x2600 resolution for high-quality downloads
  • Scaling system converts coordinates between display and export resolutions
Poster Generation Pipeline
  1. Data Collection: Form inputs for user data, background selection, avatar upload
  2. Canvas Rendering: KonvaJS renders all elements (background, avatar, text, QR code)
  3. Export Process: Creates separate high-resolution canvas for download
Background System
  • Gradient Backgrounds: 5 preset gradients (sunset, ocean, forest, purple, warm)
  • Image Backgrounds: User-uploaded images with automatic blur filter
  • Background Priority: Uploaded images override gradients
Avatar Handling
  • Default Avatar: Circular gradient when no avatar uploaded
  • Uploaded Avatar: Circular clipping mask applied to user images
  • Consistent Styling: White border and circular shape for all avatars

Component Data Structure

posterData: {username: String,continueDays: String,studyHours: String, todayStudy: String,motivationEn: String,  // English quotemotivationCn: String,  // Chinese quoteqrUrl: String
}

Text Positioning System

All text elements use a scaling system based on 375px base width:

  • scale(value): Converts base coordinates to display size
  • scaleForExport(value): Converts base coordinates to export size
  • Text centering uses width + offsetX properties for proper alignment

Critical Implementation Details

QR Code Integration
  • QR codes are generated as canvas elements using the qrcode library
  • Converted to Image objects for KonvaJS rendering
  • Positioned in bottom-right of poster with consistent sizing
Export Functionality
  • Creates new KonvaJS stage at export resolution
  • Recreates all visual elements with scaled coordinates
  • Exports as PNG with maximum quality settings
  • Automatically downloads with timestamped filename
Image Processing
  • Background images receive blur filter (blurRadius: 8 for display, 30 for export)
  • Avatar images use circular clipping functions
  • All images loaded asynchronously with proper error handling

File Organization

Sample poster images (1.png - 5.png) serve as design references and demonstrate the target visual style. These should not be used as backgrounds but can guide styling decisions.

http://www.dtcms.com/a/297986.html

相关文章：

  • 基于springboot的候鸟监测管理系统
  • 杂谈:前端开发中的常见问题
  • App拉起：唤醒即达，告别繁琐操作
  • C++实战：数据标准化高效实现
  • 自动化测试学习？
  • 零基础学Triton(1) Triton还需要学习吗？
  • Tailwind CSS 自定义工具类与主题配置指南
  • U盘提示格式化怎么取出里面的文件
  • 如何解决pip安装报错ModuleNotFoundError: No module named ‘streamlit’问题
  • OpenTelemetry学习笔记(十二)：在APM系统中，属性的命名空间处理遵循规则
  • React框架的Ant Design漫游组件的使用
  • AKS部署.Net Shopping
  • 关于网络模型
  • ElastAlert通过飞书机器人发送报警通知
  • 三、操作系统——第2章：CPU
  • 数学专业转型大数据发展指南
  • Linux网络框架分析
  • 用毫秒级视频回传打造稳定操控闭环之远程平衡控制系统技术实践
  • Qt 多媒体开发：音频与视频处理
  • DNS 协议
  • 服务器安装虚拟机全步骤
  • MRDIMM对服务器总体拥有成本（TCO）影响的系统性分析
  • Oracle不完全恢复实战指南：从原理到操作详解
  • OpenCV 图像变换全解析：从镜像翻转到仿射变换的实践指南
  • Undertow 可观测性最佳实践
  • 医疗器械：DFEMA和PFEMA
  • 【嵌入式汇编基础】-ARM架构基础（二）
  • 锁相环技术简介（面向储能变流器应用）
  • 从Taro的Dialog.open出发，学习远程控制组件之【事件驱动】
  • Langchain学习——PromptTemplate