[JS入门到进阶] 手写裁剪图片的工具，并部署。一键裁剪掘金文章封面

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

裁剪图片，一个超级常用的功能！

我个人非常喜欢Windows的「画图」工具。这款工具我小学二年级时非常喜欢玩。长大后，也对它爱不释手。因为「画图」占用内存非常小，可以放大8倍，方便像素级别调整细节，裁剪、移动都非常方便！

但是工作后一直在用Mac，裁剪图片没那么方便了。Mac自带的预览工具似乎有裁剪能力，但是自己总是用不惯，还是喜欢Windows「画图」的交互。

最近，每次更新掘金文章、新建掘金专栏，总是需要配个图。掘金配图是需要比例的，尺寸不成比例时，掘金会帮你裁剪中间的部分。但如果我们能提前按照比例要求准备好素材，提前查看效果，那是令强迫症最舒服的！

解决方案

我不喜欢用各种APP，还需要下载，还需要学交互，而且很多时候我希望自动化实现一些功能，APP的实现成本是很高的！

网上也有很多在线裁剪的。但是也存在问题：

1. 很多网站要求图片先上传，修改完再下载，如果图片包含隐私，就会有隐私泄漏风险。
2. 那些网站往往有很多广告，速度还比较慢，体验很差！
3. 无法自动化，依然需要手动操作。

作为前端开发者，我打算自己写一个「图片裁剪」工具！

具体需求

1. 允许用户手动选择本地图片文件，并展示出来。
2. 不能有后端，不允许上传至服务器，减少带宽、提高速度。
3. 裁剪是纯前端的过程，裁剪完毕后，用户有办法保存图片。
4. 目前提供2种一键裁剪尺寸：掘金文章封面、掘金专栏封面。点击后，图片裁剪为对应比例，居中展示。
5. 裁剪后，可以右键保存。

MVP版本暂不支持手动拖拽裁剪。有其它尺寸需求，可以先改代码实现，也很方便。

体验地址 & 源码

体验地址: https://tool.hullqin.cn/img-editor.html

源码: https://github.com/HullQin/tool-hullqin-cn

实现思路

这是实际的案例，用了我《《 合 成 大 西 瓜 》 重 制 版 ！（ 联 机 版 在 做 了 ）》这篇文章封面做例子。可以看到：

• 用input实现了选择文件。
• 用2个button，方便一键裁剪2种尺寸。
• 用canvas展示了上传的图片和裁剪后的图片，并且右键可以「保存」或「复制」。

写代码

html的结构

很简单，我们定义好：

<label for="src">请选择图片: </label>
<input id="src" type="file" />
<div>
  <button id="slice-article">切割为掘金文章封面</button>
  <button id="slice-column">切割为掘金专栏封面