如何用JavaScript编写一个支持长尾词搜索的图片裁剪工具？

本文共计3400个文字，预计阅读时间需要14分钟。

目录

一、图片文件的上传和读取

二、图片展示和蒙层处理

CSS clip-path

三、裁剪框展示

四、裁剪框的缩放点和光标样式

五、裁剪框移动事件

六、裁剪框缩放操作

七、完成裁剪功能

目录

• 一、图片文件的上传和读取
• 二、图片展示和蒙层处理
• CSS clip-path
• 三、裁剪框展示
• 裁剪框的缩放点
• cursor 鼠标样式
• 四、裁剪框移动事件
• 五、裁剪框缩放操作
• 六、完成裁剪功能
• drawImage
• 后记

在前端开发中，当遇到图片或头像上传等功能时，有尺寸分辨率限制的话，就需要用到图片的裁剪功能。想了解图片基础知识的，可见前文图片基础知识介绍。

而canvas的使用，对于我们直接在web端实现图片裁剪功能成为可能。本文将使用前端技术实现一个图片的裁剪功能。