A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 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, 下载次数: 552)

评分

参与人数 1黑马币 +5 收起 理由
qq494041805 + 5

查看全部评分

11 个回复

倒序浏览
长见识了~
回复 使用道具 举报
666 老哥稳
回复 使用道具 举报
系统已更新请 来自手机 初级黑马 2017-12-5 17:35:10
板凳
唐唐塘塘
回复 使用道具 举报
CarlXu 来自手机 初级黑马 2017-12-5 17:38:52
报纸
了解了解
回复 使用道具 举报
里森林 来自手机 初级黑马 2017-12-5 17:51:54
地板
666666厉害了
回复 使用道具 举报
yezhimo 来自手机 初级黑马 2017-12-5 18:26:00
7#
哇,好棒,顶一个。
回复 使用道具 举报
yezhimo 来自手机 初级黑马 2017-12-5 18:26:40
8#
哇塞,好棒啊,顶一个꧁꧂
回复 使用道具 举报

哇塞,好棒啊,顶一个꧁꧂
回复 使用道具 举报
皮老师好
回复 使用道具 举报
xiaojiyao 来自手机 初级黑马 2017-12-5 22:21:35
11#
唐老师牛逼!
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马