网站建设常使用的8免费JAVASCRIPT图像裁剪脚本和插件

您可以使用JavaScript构建一些非常酷的东西。而且你可以用插件构建大部分的东西，以免你从头开始编码的麻烦。图像裁剪UI是构建最棘手的功能之一。

这必须支持从用户上传图片，然后必须将该图片放到前端，并让用户完善他们的作物。之后，它将图像作物数据传递到后端，以便可以剪切并保存图像。

这是很多工作！

节省您的麻烦，并使用其中一个免费插件卸载繁重的工作。

1. Cropper

Cropper目前处于v4.0 beta版，它是网络上最好的JS裁剪脚本之一。

这完全在jQuery上运行，但也有一个非jQuery版本。

这两个版本除语法外都是相同的，并且它们具有用于图像裁剪的一些最佳功能，并具有一系列选项和方法。

当悬停在上传的图片上时，您可以使用鼠标滚轮进行滚动缩放。这也支持捏和基于触摸的输入设备。

更不用说您可以使用Cropper API添加自定义工具。这些工具可让访客自动旋转，缩放并强制裁剪特定的宽高比。

Cropper只是一个伟大的插件而已。

2. Croppie

另一个可行的选择是Croppie。这是作为一个香草JS插件，所以它不需要jQuery或任何其他库。简约开发者的好消息。

如果你想通过包管理器来运行它，它确实支持npm和Bower。或者你可以从GitHub下载源代码，如果你喜欢它的话。

通过Croppie，您只需定位裁剪窗口元素并定义图像（可以动态更新）。这在香草JS上运行，所以我希望你的经典JavaScript知识仍然是新鲜的。

在Croppie（）函数中可以调用大量的选项来处理自定义，回调方法等等。

3. jQuery断头台

像断头台这样的名字，你可能不知道会发生什么。

放心，这只是一个简单的图像裁剪。虽然它有一些不那么简单的功能。例如，您可以在界面中添加缩放功能，让用户在裁剪前仔细查看照片。

还有一个非常干净的拖放界面，因此您可以将图像准确定位到需要的位置。

所有的代码都是免费的，代码本身非常小（小于3KB）。

只要记住这是一个jQuery插件，所以如果你正在寻找普通的JavaScript，这是错误的选择。

4. Croppic

这个巧妙命名的Croppic插件是另外一个免费的jQuery替代品。

它可以处理所有基本的图像裁剪，拖动，缩放等等。但由于其许多附加功能而突出，其中一项功能可以自动处理来自浏览器的图片上传。

该功能确实需要Web服务器和后端语言（首选PHP）。但是，如果您查看主页并点击“文档”，您会发现uploadData方法。一种极好的方式来处理Ajax图像上传与类。

这并不是说其他​​jQuery图像裁剪插件不提供这种支持。

但是我发现Croppic更容易使用更多的UI自定义，比如模态窗口。

另外，您可以在页面上找到免费的PHP脚本，您可以使用Croppic插件进行配对。多么酷啊？

5. React Drop n Crop

React.js有很多值得关注的地方。它正在迅速成为用JS构建动态web应用程序的主要工具。

该阵营拖放插件是两个不同的脚本的组合。这使用dropzone库来处理图像上传以及React Cropper作为图像裁剪React组件。

如果您好奇它是如何在浏览器中运行的，您可以在这里看到一个实时演示。

整个演示过程都是动态的，因此您可以随着每个动作的实时发生一起跟随。

如果您是React开发人员，那么您需要了解一个脚本。

6. Tinycrop

Tinycrop正是这个名字听起来像。

它运行在普通的JavaScript上，它支持您可以通过更大的库找到的许多功能的精简版本。但这并不意味着Tinycrop无法处理您的图像裁剪。

相反，Tinycrop是开发人员关注臃肿网页和缓慢HTTP请求的最佳选择。

您可以在GitHub页面上找到设置指导，以及完整的代码片段，展示所有可用选项。

如果您正在构建动态网站以加快速度和效率，Tinycrop将成为您最好的朋友。

7. Jcrop

该Jcrop的插件已经有很长一段时间是在网络上的第一个jQuery的图片裁剪工具之一。

然而，它的更新和支持也相当缓慢。该回购尚未在几年有重大更新，同样可以说的演示页。

尽管如此，这个脚本仍然适用于通过PHP处理图片上传。大多数Web开发人员都坚持使用PHP，因为它易于学习，并且可以在大多数主要Web服务器上运行，更不用说它可以与像WordPress这样的最大的CMS引擎相媲美。

Jcrop是一个有趣的开源图像裁剪脚本，如果你想要一些支持大型浏览器的东西，那么值得一看。

请记住，未来几年不太可能获得新的更新或主要支持。

8. Smartcrop.js

Smartcrop.js是少数使用内容感知技术帮助用户裁剪图像的插件之一。

它建立在vanilla JavaScript之上，并拥有自己的专有算法来识别人脸，组合，并最终在您单击上传按钮后立即定义“良好作物”。

考虑到我们只是在这里讨论前端脚本，这是相当成功的。

看看演示页面，看看它是如何工作的。您可以看到每张原始照片，基于Smartcrop算法的建议裁剪以及之后的完成裁剪。

这看起来可能非常复杂，但你不必写任何东西。所有你需要做的就是获取插件设置，添加初始功能在页面上运行，然后上传一些图像。

Smartcrop.js是我见过的第一个“聪明”的插件，它是一个脚本的地狱。