黑马程序员技术交流社区

标题: 【广州前端】 cropper--实用的jquery裁剪插件 [打印本页]

作者: AreYouGlad 时间: 2017-12-5 15:20
标题: 【广州前端】 cropper--实用的jquery裁剪插件
本帖最后由 AreYouGlad 于 2017-12-20 16:25 编辑

查看更多精彩前端资源

我们在日常开发中常常会遇到类似于上传头像，需要对头像图片进行裁剪的操作。cropper这款JQuery插件就为我们解决了这个问题。
效果预览

插件下载
首先，我们可以使用bower或者npm下载cropper

[Bash shell] 纯文本查看 复制代码

 bower  i  cropper 
 npm i cropper

引入插件
下载完成之后，找到cropper.css和cropper.js文件进行引入，需要注意的地方是cropper是依赖于JQuery的，所以需要提前引入JQuery，并且JQuery的版本必须大于等于1.9.1。

HTML操作
引入文件成功后，我们可以对图片进行裁剪操作了。首先在HTML结构中需要用一个块级元素将我们需要裁剪的素材图片包裹。

JS操作

这样，一个素材可以通过滚轮放大缩小、裁剪框可以拖动、缩放的图片裁剪操作已经完成了。需要注意的是，裁剪区域的宽高是继承自我们的父级元素的，也就是我们的box，所以 box必须可见，我们也可以通过控制box的宽高来修改裁剪区域的宽高。还有一点，如果你要使用跨源图片来作为剪裁图片，请确保你的浏览器支持HTML5 CORS settings attributes，并且你的图片服务器支持Access-Control-Allow-Origin属性。
效果预览

旋转操作
cropper还可以对素材图片进行旋转

裁剪区域展示
对素材图片裁剪完毕之后，我们可以通过getCroppedCanvas得到裁剪获得的canvas，然后通过toDataURL方法将其转换为base64格式的图片，最后将base64赋值给img的src属性，完成裁剪区域的展示。

当然，cropper还有很多强大的功能，具体的操作方法大家可以去cropper的官方网站查看API。地址：http://fengyuanchen.github.io/cropper/。

我也做了个小demo于附件供大家参考。

demo.rar (96.14 KB, 下载次数: 553)

作者: 老哥哥 时间: 2017-12-5 15:27
长见识了~

作者: AngularBaby 时间: 2017-12-5 15:29
666 老哥稳

作者: 系统已更新请 时间: 2017-12-5 17:35
唐唐塘塘

作者: CarlXu 时间: 2017-12-5 17:38
了解了解

作者: 里森林 时间: 2017-12-5 17:51
666666厉害了

作者: yezhimo 时间: 2017-12-5 18:26
哇，好棒，顶一个。

作者: yezhimo 时间: 2017-12-5 18:26
哇塞，好棒啊，顶一个꧁꧂

作者: q947544128 时间: 2017-12-5 19:24

哇塞，好棒啊，顶一个꧁꧂

作者: qq494041805 时间: 2017-12-5 20:41
皮老师好

作者: xiaojiyao 时间: 2017-12-5 22:21
唐老师牛逼！

作者: AreYouGlad 时间: 2017-12-13 17:45

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2