1. David Wu首页
  2. web前端
  3. CSS

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

您可以使用JavaScript构建一些非常酷的东西。而且你可以用插件构建大部分的东西,以免你从头开始编码的麻烦。图像裁剪UI是构建最棘手的功能之一。 这必须支持从用户上传图片,然后必须将该图片放到前端,并让用户完善他们的作物。之后,它将图像作物数据传递到后端,以便可以剪切并保存图像。 这是很多工作! 节省您的 WP网站建设

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

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

这是很多工作!

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

1. Cropper

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

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

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

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

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

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

01-农作物-JS-的jQuery库

2. Croppie

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

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

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

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

01-农作物-JS-的jQuery库

3. jQuery断头台

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

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

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

所有的代码都是免费的,代码本身非常小(小于3KB)。

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

01-农作物-JS-的jQuery库

4. Croppic

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

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

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

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

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

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

01-农作物-JS-的jQuery库

5. React Drop n Crop

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

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

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

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

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

01-农作物-JS-的jQuery库

6. Tinycrop

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

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

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

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

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

01-农作物-JS-的jQuery库

7. Jcrop

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

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

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

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

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

01-农作物-JS-的jQuery库

8. Smartcrop.js

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

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

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

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

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

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

01-农作物-JS-的jQuery库

01-农作物-JS-的jQuery库

杰克是网络上的作家和用户体验设计师。他发表文章讨论HTML5 / CSS3和jQuery编码技术。了解更多关于他的网站,或者你可以按照他在Twitter上更新@jakerocheleau 更多文章由Jake Rocheleau

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/8790

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注