当前位置:  编程技术>jquery

jquery图像裁剪插件jcrop用法示例

    来源: 互联网  发布时间:2014-10-09

    本文导语:  jquery图像裁剪插件jcrop的用法 jcrop插件,官方站点http://deepliquid.com/content/jcrop.html下载了最新版的压缩包。 压缩包中包括了jcrop的几个demo文件,关键的jcrop.js文件和jquery.jcrop.css文件。 基本上来说参照它的几个demo文件就可以学...

jquery图像裁剪插件jcrop的用法

jcrop插件,官方站点http://deepliquid.com/content/jcrop.html下载了最新版的压缩包。
压缩包中包括了jcrop的几个demo文件,关键的jcrop.js文件和jquery.jcrop.css文件。
基本上来说参照它的几个demo文件就可以学会使用这个插件了。
使用插件必须条件:
引入jquery.js文件,引入jquery.jcrop.js文件,引入jquery.jcrop.css文件。

1、最基本使用方法
html代码部分:
 

js部分:
 

$(
function()
{
$("#demoImage").Jcrop();
}
);
 

这样就可以在图片上进行裁剪了。

2、得到选中区域的坐标以及回调函数
html代码部分:
 


x1
y1
x2
y2
width
height

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 图像裁剪插件 jQuery Image Cropper
  • jQuery 图像裁剪插件 Croppic
  • 基于JQuery实现的图片自动进行缩放和裁剪处理
  • JQuery中Jcrop图片裁剪插件的用法
  • jQuery定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery的父子兄弟节点查找示例代码
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  • Jquery在指定DIV加载HTML示例代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jQuery获得内容和属性方法及示例
  • jquery根据name属性查找示例
  • jQuery find与children方法示例
  • jQuery回车键绑定点击事件示例
  • jQuery 滚动示例插件 kinetic
  • jQuery设置CSS属性(示例)
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • JS与jquery自定义属性用法
  • jQuery setTimeout()函数的用法介绍
  • jQuery :visible 选择器(冒号)的用法
  • JQuery 判断某个属性是否存在hasAttr用法
  • jquery onpropertychange键盘事件用法举例
  • jQuery setTimeout用法总结(实例)
  • Jquery confirm弹出框的用法
  • jquery的focus函数用法示例
  • Jquery中slideToggle()与toggleClass()用法
  • Jquery 过滤器(first,last,not,even,odd)用法举例
  • jquery 字符串切割函数substring的用法说明
  • jquery判断浏览器类型($.browser用法)
  • jquery css类用法(添加、修改与删除css)
  • jquery中show()、hide()方法的用法
  • 有关jquery一些选择器的用法小结
  • Jquery中ajax方法data参数的用法小结
  • jquery中each的用法分享
  • jquery .attr()与.prop()用法解析
  • jquery插件jTimer jquery定时器的用法举例
  • jquery操作HTML5 的data-*的用法实例分享
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3