加载中…
个人资料
_羽少_
_羽少_
  • 博客等级:
  • 博客积分:0
  • 博客访问:190,063
  • 关注人气:15
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

jQuery的图像裁剪插件Jcrop的简单使用

(2010-02-06 11:05:21)
标签:

jquery

图像裁剪插件

it

分类: JavaScript方面

 

    目前做的这个项目中要用到用户头像功能,做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。用了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代码部分: 

<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中文翻译详解(点此)

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有