Jcrop_jQuery图片裁剪插件
来源:互联网 发布:莱特湾海战 知乎 编辑:程序博客网 时间:2024/05/09 05:12
这是本人在51CTO学院看到的视频教程,以前工作中也用到,但糊里糊涂的,看了这个视频,觉得挺清晰的,记下来,以备不时之需。
http://edu.51cto.com/index.php?do=lession&id=67800
1、我们浏览网页所看到的图片是存放在远程的服务器上的,而我们的js(或者jQuery)是运行在客户端的浏览器上面的!
2、就算是客户端的图片,也不能够通过js去直接裁剪!
图片剪切插件所做的工作是提供一个良好的用户体验帮助我们用户选择所需要的裁剪区域,具体的裁剪工作是放在服务器端完成的!
一、Jcrop插件概述
1、介绍
Jcrop是一个简单强大的jQuery的图像裁剪插件!
网址:http://deepliquid.com/content/Jcrop.html
2、快速入门
<script src="js/jquery.min.js"></script><script src="js/jquery.Jcrop.min.js"></script><link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /><img src="flowers.jpg" id="target" /><script language="Javascript"> $(function(){ $('#target').Jcrop(); });</script>
二、具体使用
1、常用设置选项
1)aspectRatio decimal 长宽比w/h
2)minSize array [ w, h ] 最小宽度/高度,使用0无限制
3)maxSize array [ w, h ] 最大宽度/高度,使用0无限制
4)setSelect array [ x, y, x2, y2 ] 设置一个初始选择区
5)bgColor color value 设置背景颜色的容器 默认:’black’
6)bgOpacity decimal 0 - 1 默认:0.6
7)boxWidth 整数 图片缩小到的宽度(默认值:0,没有限制)
8)boxHeight 整数 图片缩小到的高度(默认值:0,没有限制)PS:在测试时IE调试工具内的IE7可能会有浏览器假死的问题,解决:keySupport:false
2、事件处理程序
onSelect(p) 回调 当选择完成
onChange(p) 回调 选择时调用
onRelease 回调 当选择释放
资料下载地址:http://pan.baidu.com/s/1jGAQtWM
网址:http://www.sifangku.com/course/9.html
或者:http://edu.51cto.com/course/course_id-3630.html
- Jcrop_jQuery图片裁剪插件
- jQuery图片裁剪插件
- 图片裁剪插件cropbox
- jquery插件图片裁剪jcrop
- 图片裁剪插件jcrop用法
- PHP裁剪图片插件记录
- 图片裁剪 插件 crop4使用
- Angular 图片裁剪上传插件
- 几个jQuery的图片裁剪插件
- jquery插件合集之图片裁剪
- Jcrop图片裁剪插件 参数说明
- php+jquery插件imgAreaSelect图片裁剪保存
- jquery插件合集之图片裁剪
- jQuery插件imgAreaSelect图片裁剪使用详解
- 图片裁剪插件Jcrop.js的使用
- 关于jcrop图片裁剪插件更换不了图片的问题
- Jcrop插件+Canvas实现图片上传预览+图片裁剪上传
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- vs中如何设置DLL以及LIB输出路径
- Android Fragment 真正的完全解析
- Ant、Maven、Gradle
- Servlet事件监听器
- Notes on Understanding The Linux Kernel
- Jcrop_jQuery图片裁剪插件
- Android Fragment 真正的完全解析(上)
- POJ - 2752 Seek the Name, Seek the Fame(KMP next数组的理解)
- 实战Scala & Spark (3)
- 完成端口
- 2015年10月15号到24号.net工程师面试题
- 关于更新Xcode7后VVDocumenter-Xcode安装后无法注释问题解决方案
- mac上查看wifi密码明文
- IOS--判断当前网络是否可用