1. 新行网首页
  2. 投稿

js裁剪图片上传（js实现固定裁剪框）

• 投稿 • 阅读 24

很多时候，我们都需要对图片进行裁剪、缩放、旋转等操作，比如：上传用户的LOGO，基本都需要裁剪功能的。那么一个好用的裁剪插件，势必会提高用户的体验度。

我们先来看一个裁剪图片，可能的效果和必须的功能，如下图：

js裁剪图片上传（js实现固定裁剪框）

从此图上，我们看出，四角可以拖拽缩放来裁剪，同时生产多张不同尺寸的小图，下边的功能按钮，还可以旋转图片、缩放、预览等。

上图如何实现呢？今天，推荐给您一款jQuery插件：Cropper.js。

那么什么是Cropper.js呢？

它是一个简单的jQuery图片裁剪插件。同样的，我们推荐用不依赖jQuery的Cropper.js库。

那么它有哪些特点呢？

支持jQuery1.9.1+的依赖、支持无jQuery的裁剪库；

支持38个配置选项、支持27个方法、支持6个事件；

支持移动端、支持缩放 旋转 等比缩放、支持多个裁剪；

支持在Canvas上裁剪、支持读取图片Exif信息、支持跨浏览器裁剪等。

那么如何获取它呢？

你可以到github上搜索：Cropper，它有2个版本，一个是依赖jQuery的，一个是不依赖jQuery的（Cropper.js）。推荐用不依赖的js库。

那么如何使用它呢？

js裁剪图片上传（js实现固定裁剪框）

通过上图，我们可以很快的用起来，至于配置信息，你可以到github上查阅。这里不一一列举了。

对于用户使用时，都有哪些常见问题？

比如：通过shift键来等比例裁剪图片；通过双击鼠标进入裁剪模式、移动模式等。

js裁剪图片上传（js实现固定裁剪框）

看着是不是很心动，有空就用一下吧，说不定哪天领导就让弄个这样的功能。不至于让我们手足无措。

原创文章，作者：admin，如若转载，请注明出处：https://www.qq65hfghe5.com/tg/37325.html

赞 (0)
上一篇 2024年11月12日 05:49:40
下一篇 2024年11月12日 05:50:46

相关推荐