网站制作会用到的图像裁剪脚本和插件免费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是我见过的第一个“智能”插件,它是一个脚本的地狱。

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