肉丸胡辣汤 發表於 2025-6-30 14:56:00

基于SharpIco开发图片转ICO工具网站

<h1 id="基于sharpico开发图片转ico工具网站">基于SharpIco开发图片转ICO工具网站</h1>
<h1 id="sharpicoweb">SharpIcoWeb</h1>
<p><img src="https://camo.githubusercontent.com/bb4e5c0036a6a8cdbc59b38d44f09ad8f6dc722751dad34d3df5bf0ac61913c1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c7565" alt="License" loading="lazy"></p>
<p><img src="https://camo.githubusercontent.com/7732c145abc7fb05a8373d4d161318970723f355ddd1d080a3fbef3c6941cd0f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2e4e45542d392e302d707572706c65" alt=".NET" loading="lazy"></p>
<p><img src="https://img.shields.io/github/stars/ZyPLJ/SharpIcoWeb?color=gold&amp;style=for-the-badge" alt="Stars" loading="lazy"></p>
<h2 id="项目介绍">📝项目介绍</h2>
<p>SharpIcoWeb是基于SharpIco开发的图片转ICO工具网站，支持上传png、jpg等图片转换为多尺寸的Ico图片文件。采用前后端分离技术。</p>
<p>后端接口使用 <code>.NET Minimal API</code>开发，够轻量。</p>
<h2 id="预览地址">📍预览地址</h2>
<p>https://ico.pljzy.top/</p>
<h2 id="-应用场景">🎯 应用场景</h2>
<ul>
<li>网站Favicon 🌐</li>
<li>软件图标 🖥️</li>
<li>个性化文件夹标识 📂</li>
</ul>
<pre><code class="language-html">&lt;link rel="icon" type="image/x-icon" href="/logo.ico" /&gt;
</code></pre>
<h2 id="核心技术">✨核心技术</h2>
<table>
<thead>
<tr>
<th style="text-align: center"><strong>⚡</strong> <strong>Vite+Vue+Element-Plus</strong> <strong>极速的开发服务器和高效的生产构建</strong></th>
<th style="text-align: center"><strong>🗂️ → ❌</strong> <strong>纯文件操作（无需SQLite/MySQL）</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><strong>🏗️.NET 9 MiniAPI 轻量级API开发，处理图像转换业务逻辑</strong></td>
<td style="text-align: center"><strong>🖼️</strong> <strong>后端使用的强大图像处理库，实现PNG/JPG转ICO</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong>🐳</strong> <strong>可容器化（Docker 支持）</strong></td>
<td style="text-align: center"><strong>📱 + 💻</strong> <strong>响应式设计（适配移动端）</strong></td>
</tr>
</tbody>
</table>
<h2 id="后续更新">✅后续更新</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 不同尺寸ICO,可分别生成ICO文件。</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 前端显示ICO文件图标数量数据、大小、偏移等数据。</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"><label> 批量转换功能。</label></li>
</ul>
<h2 id="快速开始">🚀快速开始</h2>
<h3 id="docker部署">Docker部署</h3>
<p><font color="red">注意注释部分配置可能需要根据实际情况修改</font></p>
<h4 id="docker-cli">Docker CLI</h4>
<pre><code class="language-dockerfile">docker-compose up --build -d
</code></pre>
<h4 id="defaultconf">default.conf</h4>
<pre><code class="language-dsconfig">server {
    listen       5173; # 配置端口
    server_name0.0.0.0; # 修改为docker服务宿主机的ip

    # 设置允许的最大请求体大小（例如 100MB）
    client_max_body_size 100M;

    location / {
      root   /usr/share/nginx/html;
      indexindex.html index.htm;
      try_files $uri $uri/ /index.html =404;
    }

    location /api {
      proxy_pass http://backend:5235;# Docker 内部网络
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }

    error_page   500 502 503 504/50x.html;
    location = /50x.html {
      root   html;
    }
}
</code></pre>
<h4 id="docker-compose">Docker Compose</h4>
<pre><code class="language-yaml">version: '3.8'

services:
frontend:
    build:
      context: ./sharp-ico-vue   # 指向前端目录
      dockerfile: Dockerfile
    ports:
      - "5173:5173"               # 前端映射到宿主机的5173端口
    depends_on:
      - backend

backend:
    build:
      context: .    # 指向后端目录
      dockerfile: Dockerfile
    ports:
      - "5235:5235"            # 后端端口
</code></pre>
<h3 id="手动部署">手动部署</h3>
<h4 id="clone">clone</h4>
<p><code>git clone https://github.com/ZyPLJ/SharpIcoWeb.git</code></p>
<h4 id="后端运行">后端运行</h4>
<pre><code>cd SharpIcoWeb

dotnet build -c Release

dotnet run
</code></pre>
<h4 id="前端运行">前端运行</h4>
<pre><code class="language-bash">cd ..

cd sharp-ico-vue

npm install

npm run dev
</code></pre>
<h2 id="如何使用">👀如何使用</h2>
<p>前后端项目运行或部署后，打开运行后网址。</p>
<p>选择需要生成的ICO图表尺寸，可多选</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202506/3091176-20250630144434633-1774716702.png" alt="image" loading="lazy"></p>
<p>上传图片文件，点击转换。</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202506/3091176-20250630144443391-811153464.png" alt="image" loading="lazy"></p>
<h3 id="110-版本">1.1.0 版本</h3>
<p>该版本更新了分别生成功能，将图片转为不同尺寸的单ico文件。</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202507/3091176-20250703163502455-1183638130.png" alt="image" loading="lazy"></p>
<h3 id="120-版本">1.2.0 版本</h3>
<p>该版本更新了前端显示ICO文件图标数量数据、大小、偏移等数据功能。</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202507/3091176-20250703163510864-553892312.png" alt="image" loading="lazy"></p>
<h2 id="-开发指南">🛠 开发指南</h2>
<h3 id="项目结构">项目结构</h3>
<pre><code>sharp-ico/
├── SharpIco/               # 图标转换类库
│   ├── SharpIco.csproj
├── SharpIcoWeb/            # 后端Api项目
│   ├── SharpIcoWeb.csproj
├── sharp-ico-vue         # 前端项目
</code></pre>
<h3 id="开发环境">开发环境</h3>
<ul>
<li>.Net 9</li>
<li>Node.js 20.19+</li>
<li>Vue3</li>
</ul>
<h3 id="运行项目">运行项目</h3>
<h4 id="后端">后端</h4>
<pre><code class="language-bash">dotnet build -c Release

dotnet run
</code></pre>
<h4 id="前端">前端</h4>
<pre><code class="language-bash">npm install

npm run dev
</code></pre>
<h2 id="常见问题">常见问题</h2>
<h3 id="部署后前端容器不启动">部署后前端容器不启动</h3>
<p><code>unknown directive "server" in /etc/nginx/conf.d/default.conf:1</code></p>
<p>查看前端目录下 <code>default.conf</code>文件开头是否存在特殊符号或者空格：</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202507/3091176-20250703163419910-359019371.png" alt="image" loading="lazy"></p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>SharpIco 🌟 Star if useful!</li>
</ul>
<ul>
<li>SharpIcoWeb🌟 Star if useful!</li>
</ul><br><br>
来源：https://www.cnblogs.com/ZYPLJ/p/18957808
頁: [1]
查看完整版本: 基于SharpIco开发图片转ICO工具网站