# utools-text2image

**Repository Path**: tfgzs666/utools-text2image

## Basic Information

- **Project Name**: utools-text2image
- **Description**: utools插件-文本转图片
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-10
- **Last Updated**: 2025-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uTools 文本转图片插件

一个功能强大的文本转图片工具，支持中英文、数字、特殊符号、emoji表情等输入，支持换行和所见即所得预览。

## 功能特性

### 📝 文本输入
- 支持中英文、数字、特殊符号、emoji表情等输入
- 支持换行功能
- 所见即所得的实时预览

### 🎨 字体设置
- **字体颜色**: 支持自定义文本颜色，提供颜色选择器和手动输入
- **字体大小**: 可调节字体大小（8-200像素）
- **字体粗细**: 支持正常和加粗两种模式
- **文本对齐**: 支持左对齐、居中、右对齐

### 📐 图片设置
- **图片尺寸**: 可自定义图片宽度和高度（50-2000像素）
- **预设尺寸**: 提供常用尺寸快速选择（16×16到128×128）
- **输出格式**: 支持PNG、JPEG、WebP格式
- **背景设置**: 
  - PNG格式支持透明背景
  - 可自定义背景颜色
  - JPEG格式自动禁用透明背景

### 💾 输出功能
- **保存图片**: 一键保存生成的图片到本地
- **复制图片**: 一键复制图片到剪贴板
- **通知提示**: 操作成功/失败时显示友好的通知提示

### 🖥️ 兼容性
- 兼容Windows、macOS、Linux系统
- 符合uTools插件开发规范
- 响应式设计，适配不同屏幕尺寸

## 使用方法

1. **输入文本**: 在文本框中输入需要转换的文本内容
2. **设置样式**: 调整字体颜色、大小、粗细和对齐方式
3. **设置图片**: 选择图片尺寸、输出格式和背景样式
4. **预览效果**: 实时查看生成的图片效果
5. **保存或复制**: 点击保存按钮下载图片，或点击复制按钮复制到剪贴板

## 快捷键

- 在uTools中输入"文本转图片"、"文生图"、"文本生成图片"等关键词即可启动插件

## 开发指南

### 项目结构
```
utools-text2image/
├── index.html          # 主界面
├── renderer.js         # 前端渲染逻辑
├── preload.js          # uTools预加载脚本
├── plugin.json         # 插件配置
├── package.json        # 项目配置
├── logo.png           # 插件图标
└── README.md          # 说明文档
```

### 技术栈
- **前端**: HTML5, CSS3, JavaScript (ES6+)
- **图形处理**: Canvas API
- **uTools SDK**: uTools插件API
- **兼容性**: 跨平台支持 (Windows, macOS, Linux)

### 核心功能实现

#### 1. 文本渲染
使用HTML5 Canvas API进行文本渲染，支持：
- 多行文本换行处理
- 字体样式设置（大小、粗细、颜色）
- 文本对齐方式（左、中、右）

#### 2. 图片生成
- 支持多种图片格式（PNG, JPEG, WebP）
- 背景透明度控制
- 自定义图片尺寸

#### 3. 用户交互
- 实时预览功能
- 直观的UI界面
- 快速操作按钮

### API说明

#### 前端API (renderer.js)
```javascript
// 文本转图片渲染器类
class TextToImageRenderer {
    // 更新预览
    updatePreview()
    
    // 保存图片
    saveImage()
    
    // 复制图片到剪贴板
    copyImage()
    
    // 显示通知
    showNotification(message, type)
}
```

#### 后端API (preload.js)
```javascript
// uTools插件API
module.exports = {
    // 复制图片到剪贴板
    copyImageToClipboard(imageDataUrl)
    
    // 保存图片到文件
    saveImageToFile(imageDataUrl, fileName)
    
    // 获取系统信息
    getSystemInfo()
}
```

### 开发环境搭建

1. **克隆项目**
```bash
git clone <repository-url>
cd utools-text2image
```

2. **安装依赖**
```bash
# 该项目无npm依赖，纯前端实现
```

3. **运行开发**
```bash
npm start
# 或直接在浏览器中打开 index.html
```

4. **打包发布**
- 按照uTools插件规范打包
- 确保所有文件包含在内
- 测试跨平台兼容性

### 注意事项

1. **浏览器兼容性**: 确保支持Canvas API和现代JavaScript特性
2. **性能优化**: 大文本或大尺寸图片可能影响性能
3. **安全考虑**: 使用安全的文件操作和剪贴板API
4. **跨平台测试**: 在不同操作系统上测试功能

### 常见问题

**Q: 图片保存失败怎么办？**
A: 检查文件权限和磁盘空间，确保有写入权限

**Q: 复制到剪贴板不工作？**
A: 确保浏览器支持Clipboard API，部分浏览器可能需要HTTPS

**Q: 预览不更新？**
A: 检查JavaScript控制台错误，刷新页面重试

### 更新日志

#### v1.0.0
- 初始版本发布
- 完成基本文本转图片功能
- 支持多种图片格式和样式设置
- 实现保存和复制功能

### 贡献指南

欢迎提交Issue和Pull Request来改进这个插件！

1. Fork项目
2. 创建功能分支
3. 提交更改
4. 发起Pull Request

### 许可证

MIT License

### 联系方式

如有问题，请提交Issue或联系开发者。