网站制作会用到的图像裁剪脚本和插件免费JAVASCRIPT

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

这必须支持用户上传图像，然后必须将该图像带入前端并让用户完善他们的裁剪。之后，它将图像裁剪数据传递到后端，以便可以裁剪和保存图像。

这是很多工作！

省去麻烦，并使用其中一个免费插件来卸载繁重的工作……

1.剪草机

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

这完全依赖于jQuery，但也有一个非jQuery版本。

除了语法之外，这两个版本都是相同的，并且它们具有一些用于图像裁剪的最佳功能，其中包含选项和方法的清单。

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

更不用说您可以使用Cropper API添加自定义工具。这些工具允许访问者自动旋转，缩放和强制裁剪某些宽高比到他们的上传中。

Cropper只是一个很棒的插件。

2. Croppie

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

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

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

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

3. jQuery断头台

像Guillotine这样的名字你可能不知道会发生什么。

请放心，它只是一个简单的图像裁剪器。虽然它确实有一些不那么简单的功能。例如，您可以在UI中添加缩放功能，以便用户在裁剪之前仔细查看其照片。

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

所有代码都是免费提供的，代码本身非常小（总共不到3KB）。

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

4. Croppic

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

它可以处理所有基本的图像裁剪，拖动，缩放等类似的东西。但它因其许多附加功能而脱颖而出，其中一项功能可以直接从浏览器自动处理图像上传。

该功能确实需要Web服务器和后端语言（首选PHP）。但是，如果您查看主页并单击“docs”，您将找到uploadData方法。使用类处理Ajax图像上传的绝佳方式。

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

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

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

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是我见过的第一个“智能”插件，它是一个脚本的地狱。