当前位置:  编程技术>jquery

JQuery中Jcrop图片裁剪插件的用法

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

    本文导语:  实例学习JQuery中Jcrop图片裁剪插件的用法。 请“运行代码”先试下运行,运行后请刷新一次。 演示代码:   代码示例:                             body{             margin:100px auto;           ...

实例学习JQuery中Jcrop图片裁剪插件的用法。

请“运行代码”先试下运行,运行后请刷新一次。

演示代码:
 

代码示例:

   
       
       

        body{
            margin:100px auto;
            text-align:center;
        }
        .jcrop-holder {
            text-align: left;
        }
        .jcrop-vline, .jcrop-hline{
            font-size: 0;
            position: absolute;
            background: white url('/jslib/images/Jcrop.gif') top left repeat;
        }
        .jcrop-vline {
            height: 100%;
            width: 1px !important;
        }
        .jcrop-hline {
            width: 100%;
            height: 1px !important;
        }
        .jcrop-handle {
            font-size: 1px;
            width: 7px !important;
            height: 7px !important;
            border: 1px #eee solid;
            background-color: #333;
            *width: 9px;
            *height: 9px;
        }
        
        .jcrop-tracker {
            width: 100%;
            height: 100%;
        }
        
        .custom .jcrop-vline,.custom .jcrop-hline{
            background: yellow;
        }
        .custom .jcrop-handle{
            border-color: black;
            background-color: #C7BB00;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
       
       
        jQuery(function(){
            jQuery('#cropbox').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图像裁剪插件jcrop用法示例
  • 基于JQuery实现的图片自动进行缩放和裁剪处理
  • 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-*的用法实例分享
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery插件jquery倒计时插件分享
  • jQuery图片轮换插件 jQuery Dynamic Slideshow
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jQuery 内容滑动插件 Basic jQuery Slider
  • jQuery圆角插件 jQuery Corners
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery日历插件 jQuery Week Calendar
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery消息提醒插件 jQuery Notty
  • jQuery无限幻灯片插件 jQuery Carousel
  • jQuery多值输入插件 jQuery Manifest
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery相册插件 jQuery.popeye
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery对话框插件 jquery.modalbox
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink
  • 在线客服jQuery 插件 jQuery.onServ
  • jQuery日历插件 jQuery Verbose Calendar
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery日历插件 jQuery Week Calendar iis7站长之家
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery分页插件 Pagination jQuery Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery的CSV插件 jQuery CSV
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples


  • 站内导航:


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

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

    浙ICP备11055608号-3