jQuery的图像裁剪插件Jcrop
1.最基本使用方法
html代码部分:
<img src="demo_files/flowers.gif" id="demoImage"/>
js部分:
$(
function()
{
$("#demoImage").Jcrop();
}
);
这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分如下:
<img src="demo_files/flowers.jpg" id="demoImage" />
<label>x1</label><input type="text" id="txtX1" />
<label>y1</label><input type="text" id="txtY1" />
<label>x2</label><input type="text" id="txtX2" />
<label>y2</label><input type="text" id="txtY2" />
<label>width</label><input type="text" id="txtWidth" />
<label>height</label><input type="text" id="txtHeight" />
js代码部分如下:
$(
function() {
//事件处理
$("#demoImage").Jcrop(
{
onChange:showCoords, //当选择区域变化的时候,执行对应的回调函数
onSelect:showCoords //当选中区域的时候,执行对应的回调函数
}
);
}
);
function showCoords(c) {
$("#txtX1").val(c.x); //得到选中区域左上角横坐标
$("#txtY1").val(c.y); //得到选中区域左上角纵坐标
$("#txtX2").val(c.x2); //得到选中区域右下角横坐标
$("#txtY2").val(c.y2); //得到选中区域右下角纵坐标
$("#txtWidth").val(c.w); //得到选中区域的宽度
$("#txtHeight").val(c.h); //得到选中区域的高度
}
3.常用选项设置
aspectRatio:选中区域按宽/高比,为1表示正方形。
minSize:最小的宽,高值。
maxSize:最大的宽,高值。
setSelect:设置初始选中区域。
bgColor:背景颜色
bgOpacity:背景透明度。
allowResize:是否允许改变选中区域大小。
allowMove:是否允许移动选中区域。
举例如下:
$(
function() {
$("#demoImage").Jcrop({
aspectRatio: 1, //选中区域宽高比为1,即选中区域为正方形
bgColor:"#ccc", //裁剪时背景颜色设为灰色
bgOpacity:0.1, //透明度设为0.1
allowResize:false, //不允许改变选中区域的大小
setSelect:[0,0,100,100] //初始化选中区域
}
);
}
);
4.api用法
var api = $.Jcrop("#demoImage");
api.disable(); //设置为禁用裁剪效果
api.enable(); //设置为启用裁剪效果
api.setOptions({allowResize:false});//设置相应配置
api.setSelect([0,0,100,100]); //设置选中区域
jQuery的图像裁剪插件Jcrop的更多相关文章
- jQuery 图像裁剪插件Jcrop
, // 设置框的最大宽度 setSelect: [ 175, 100, 400, 300 ] }); $('#text-input ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- 裁剪插件jCrop
为大家介绍个插件:jCrop.这个插件被我用在了多个项目中,如通过画热力图来查看某块地方用户的浏览数,放大缩小拖动选框来实时预览所选区域的图片病裁剪,设置头像是选框必须要是正方形,它有着丰富的配置参数 ...
- jQuery 上传头像插件Jcrop的实例
兼容:ie6+,FF,chrome等 示例图: CSS: 说明:图像比例为110:135 下载包里有 jquery.Jcrop.css .jc-demo-box{po ...
- spring-mvc整合jquery cropper图片裁剪插件
参考网址:http://blog.csdn.net/u012759397/article/details/53126522
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 5 款最新的 jQuery 图片裁剪插件
这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...
- 【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件
原文:https://segmentfault.com/a/1190000012344970 插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头 ...
- 15 个响应式的 jQuery 图像滑块插件
设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的.本文继续介绍 15 个 jQuery 图像滑块插件以供您选择. ELASTISLID ...
随机推荐
- convert转化成特定日期格式
CONVERT() 函数可以用不同的格式显示日期/时间数据. CONVERT(data_type(length),data_to_be_converted,style) 例子: CONVERT(VAR ...
- shell脚本 gawk语言 综采话单 对账 字段核对
今天被分配到对账组下的字段程序的了解和修改,在 SecureCRT 下的 run.sh 是字段对账的主程序,其中run.sh文件中含有gawk的代码. 程序的主要功能为 有两个文件夹 source存的 ...
- cocos2d-html5如何更改预加载时的默认的logo图片和删除loading小圈圈
找到框架目录(2.1.4)里的cocos2d目录里有个CCLoader.js文件,找到LoaderScene的构造方法ctor,可以看到有一行: this._logoTexture.src= &quo ...
- RelativeLayout相对布局
RelativeLayout相对布局常用属性: 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_center ...
- wxPython
wxPython是python GUI的工具箱. 一, 安装 http://wiki.wxpython.org/How%20to%20install%20wxPython 稳定的wxpython 需要 ...
- Sqlserver 笔记 持续更新
1.sp_spaceused : sp_spaceused table_name ----------------------------------------------------------- ...
- Android模仿QQ空间图片上传——原理
MainActivity.class package com.example.imagedemotext; import java.io.ByteArrayOutputStream; import j ...
- C++ Primer : 第十章 : 泛型算法 之 只读、写和排序算法
大多数算法都定义在<algorithm>头文件里,而标准库还在头文件<numeric>里定义了一组数值泛型算法,比如accumulate. ● find算法,算法接受一对迭代 ...
- 《C标准库》—之<assert.h>实现
首先,贴出标准库中<assert.h>的实现源码: #undef assert #ifdef NDEBUG #define assert(test)((void)0) #else void ...
- bsgrid
网址:http://bsgrid.oschina.mopaasapp.com/ var total = gridObj.options.totalRows; jquery必须放在bsgrid的前面 根 ...