免费获取策划方案多一份参考,总有益处

它山之石

Tashan stone of

案例578

它山之石

8免费JavaScript图像裁剪脚本和插件

来源:派臣科技|时间:2019-07-08|浏览:

你可以用JavaScript构建一些很酷的东西。你可以用插件来构建大部分的东西,这样你就不用从头开始编写代码了。最难构建的特性之一是图像裁剪UI。

这必须支持从用户上传图片,然后它必须把图片放到前端,让用户完善他们的裁剪。然后,它将图像裁剪数据传递到后端,以便可以裁剪和保存图像。

那要做很多工作!

省得您自己的麻烦,并使用这些免费插件之一,以卸载沉重的起重…

1. 收割机

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

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

除了语法之外,这两个版本都是相同的,而且它们都具有一些最佳的特性,可以用一系列选项和方法进行图像裁剪。

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

更不用说,您还可以使用Cropper API添加自定义工具。这些工具允许访问者自动旋转、缩放,并强制将某些长宽比剪切到上传内容上。

Cropper是一个很棒的插件。

01-cropper-js-jquery-library

2. Croppie

另一个可行的选择是Croppie。这是一个普通的JS插件,所以它不需要jQuery或任何其他库。对于极简主义开发人员来说,这是个好消息。

如果您想通过包管理器运行它,它确实支持npm和Bower。如果你喜欢的话,也可以直接从GitHub下载源代码。

使用Croppie,您只需针对裁剪窗口元素并定义图像(可以动态更新)。这运行在香草JS,所以我希望您的经典JavaScript知识仍然新鲜。

您可以在Croppie()函数中调用大量选项来处理定制、回调方法等等。

02-croppie-plugin-jquery

3.jQuery断头台

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

请放心,这只是一个简单的图像剪辑。尽管它有一些不那么简单的功能。例如,您可以在UI中添加缩放功能,让用户在裁剪前更近距离地查看他们的照片。

还有一个非常干净的拖放界面,这样你就可以把图片精确地放到它需要的位置。

所有代码都是免费的,而且代码本身非常小(总共不到3KB)。

请记住,这是一个jQuery插件,所以如果您正在寻找普通的JavaScript,这是错误的选择。

03-jquery-guillotine-plugin

4. Croppic

Croppic插件是另一个免费的jQuery替代品。

它可以处理所有基本的图像裁剪,拖动,缩放,诸如此类。但它的突出之处在于它的许多附加功能,其中一个功能可以直接从浏览器自动处理图像上传。

该特性确实需要web服务器和后端语言(首选PHP)。但如果你查看主页并点击“docs”,你会发现uploadData方法。用类处理Ajax图像上传的绝妙方法。

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

但我发现Croppic更容易与更多的用户界面定制使用,如模态窗口。

另外,您还可以在页面上找到可以与Croppic插件配对的免费PHP脚本。这有多酷?

04-croppic-plugin-jquery

5. 反应降氮罪

React.js有很多值得我们去热爱的地方。它正迅速成为构建动态web应用程序的主要工具,其中包含大量js。

React拖放插件是两个不同脚本的组合。它使用dropzone库处理图像上传,并将React Cropper作为图像裁剪React组件。

如果您对它在浏览器中的工作原理感兴趣,可以在这里看到一个实时演示。

整个演示也是动态的,所以您可以随着每个动作实时进行跟踪。

如果您是React的开发人员,这是您想了解的一个脚本。

05-react-drop-n-crop-plugin

6. Tinycrop

Tinycrop和它的名字听起来一模一样。

它运行在纯JavaScript上,并且支持精简版的许多功能,您可以在更大的库中找到这些功能。但这并不意味着Tinycrop不能处理图像裁剪。

相反,对于那些担心页面膨胀和HTTP请求变慢的开发人员来说,Tinycrop是最佳选择。

您可以在GitHub页面上找到安装说明,以及演示所有可用选项的完整代码片段。

如果你正在构建一个动态站点,希望能够快速高效地加载,Tinycrop将会是你最好的朋友。

06-tinycrop-light-plugin

7. Jcrop

Jcrop插件作为web上最早的jQuery图像裁剪工具之一已经存在很长时间了。

然而,它在更新和支持方面也有相当大的放缓。回购已经有好几年没有重大更新了,演示页面也是如此。

尽管如此,这个脚本在处理通过PHP上传的图像时仍然工作得很好。大多数web开发人员都坚持使用PHP,因为它易于学习,并且可以在大多数主要web服务器上运行,更不用说它与WordPress等最大的CMS引擎配合得很好。

Jcrop是一个有趣的开源图像裁剪脚本,如果您想要为大型浏览器提供支持,那么值得一看。

请记住,它不太可能在未来几年得到新的更新或主要支持。

07-jcrop-plugin-demo-page

8. Smartcrop.js

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

它建立在普通的JavaScript之上,拥有自己的专有算法来识别人脸、构图,并在单击upload按钮后最终定义一个“好收成”。

考虑到我们只是在这里讨论前端脚本,这是一个相当大的成就。

请看演示页面,了解这是如何工作的。您可以看到每一张原始照片,基于Smartcrop algo的建议作物,以及之后的成品作物。

这看起来可能很复杂,但是你不需要写很多东西。你所要做的就是设置插件,添加初始函数在页面上运行,然后上传一些图片。

js是我见过的第一个“智能”插件,它是一个地狱般的脚本。

留言

返回顶部

君
重庆网站建设它山之石8免费JavaScript图像裁剪脚本和插件