---
title: 方形图片工坊：纯前端离线方图排版与 JPG 压缩工具
description: 无需安装或上传图片，在浏览器中调整方形构图、铺白底并压缩导出 JPG。
image: "https://zengliangyi.com/_astro/image-tool.Brj93LpB.png"
---

## 问题：小小的方图，往往需要好几个步骤

准备一张方形图片，通常不只是裁成正方形：主体需要放在合适的位置，空白处需要补白，导出后还可能超过体积限制。如果这些步骤分散在不同工具里，一次简单处理就会变得繁琐。

方形图片工坊把构图、合成与压缩放在一个 HTML 页面中。下载文件后直接打开，就可以在浏览器里完成处理，无需安装应用或启动后端服务。

## 先把画面放对，再交给工具导出

图中是构图关系示意，不是额外的产品截图。页面首图展示真实编辑界面，使用个人头像作为输入示例。

### 选择图片

支持 PNG、JPG、WebP 和 GIF 输入。导出格式固定为 JPG，因此透明区域会合成到白色背景上，GIF 也不会保留为动画输出。

### 调整位置和大小

在画布中拖动图片可以调整位置；拖动四角控制点或滚动鼠标滚轮可以缩放。图片保持原有比例，避免为了填满方框而被拉伸变形。画布之外的内容不会出现在最终的方形构图中。

### 处理并下载

确认构图后点击“处理并下载”。工具根据当前画布状态生成输出，再压缩 JPG。编辑阶段关注画面，导出阶段负责尺寸和编码，两者职责分开。

## 压缩不是只改一个 quality 参数

源码以 `950000` 字节作为体积预算，并结合编码质量和输出尺寸寻找结果：

- 从目标输出尺寸开始生成 JPG，先检查较高质量是否已经满足预算。

- 如果低质量结果可以满足预算，就在质量区间内搜索，尽量保留更高质量。

- 如果低质量仍然过大，就缩小输出尺寸，重新尝试。

- 到达最小尺寸时使用兜底结果结束处理，而不是无限重试。

这是一种“体积优先、尽量保留画质”的策略。复杂纹理与简单图形的压缩效果不同，因此不能承诺所有输入都有相同清晰度；最小尺寸兜底也不应被理解成绝对的体积保证。

## 为什么保留为离线单页工具

| 选择 | 适用价值 | 代价或边界 |

| --- | --- | --- |

| 单个 HTML 文件 | 下载后直接使用，分发简单 | 更新时需要获取新文件 |

| Canvas 本地处理 | 不需要上传图片或等待服务器 | 受浏览器与设备资源限制 |

| 保持比例缩放 | 避免主体变形 | 构图需要手动调整 |

| 白底 JPG 输出 | 统一背景和交付格式 | 不保留透明度或动画 |

| 自动搜索压缩结果 | 减少手动反复试参数 | 可能降低画质或分辨率 |

## 一个合适的使用方式

先选择图片并确定主体位置，观察边缘是否被裁掉，再导出检查最终文件。如果原图包含细小文字、透明标识或需要保留动画，应先判断白底静态 JPG 是否适合这次交付。

图片处理在本地浏览器内完成，不上传服务器。源码与使用方式见 [image-tool 仓库](https://github.com/ZengLiangYi/image-tool)。

##  更多项目

[2026

### ChatCrystal

把 AI 编程对话整理成可检索、可复用的个人知识库，连接结构化笔记、语义搜索与 MCP 记忆。

#TypeScript

#AI

#MCP](/projects/chatcrystal)[2026

### Network Error Reporter

把 Chrome 中失败的网络请求转成结构化 Markdown 与图片报告，减少接口排查时的重复沟通。

#JavaScript

#Chrome Extension

#Developer Tools](/projects/network-error-reporter)[2026

### PaddleOCR-VL 文档解析评估工具

接入百度智能云文档解析 API，对照原件检查阅读顺序、版面坐标、表格和 Markdown，评估真实文档的解析效果。

#Python

#JavaScript

#Document AI](/projects/paddleocr-vl)

##  有问题或想法？

无论是讨论技术实现，还是交流项目思路，都可以给我留言。

[联系我](/contact) [全部项目](/projects)

```json
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "ZengLiangYi Blog",
  "alternateName": [
    "Zeng Liangyi",
    "ZengLiangYi",
    "zengliangyi.com"
  ],
  "url": "https://zengliangyi.com",
  "description": "曾亮懿的个人网站。记录 AI Native 探索、开发者工具与全栈产品实践。"
}
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "方形图片工坊",
  "description": "无需安装或上传图片，在浏览器中调整方形构图、铺白底并压缩导出 JPG。",
  "url": "https://zengliangyi.com/projects/image-tool/",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "codeRepository": "https://github.com/ZengLiangYi/image-tool",
  "image": "https://zengliangyi.com/_astro/image-tool.Brj93LpB.png",
  "author": {
    "@type": "Person",
    "name": "曾亮懿",
    "url": "https://zengliangyi.com"
  }
}
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://zengliangyi.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "项目",
      "item": "https://zengliangyi.com/projects"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "方形图片工坊",
      "item": "https://zengliangyi.com/projects/image-tool/"
    }
  ]
}
```