网站建设常使用的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是我见过的第一个“聪明”的插件,它是一个脚本的地狱。 由杰克罗谢洛 杰克是网络上的作家和用户体验设计师。他发表文章讨论HTML5 / CSS3和jQuery编码技术。了解更多关于他的网站,或者你可以按照他在Twitter上更新@jakerocheleau 更多文章由Jake Rocheleau

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设常使用的8免费JAVASCRIPT图像裁剪脚本和插件
分享到:
赞(0)
广告位820*80