同事推荐了Jcrop这个插件，到它的官方站点http://deepliquid.com/content/Jcrop.html下载了最新版的压缩包，压缩包中包括了Jcrop的几个demo文件，关键的Jcrop.js文件和jQuery.Jcrop.css文件。基本上来说参照它的几个demo文件就可以学会使用这个插件了。晚上正好学习研究了下，现简单总结如下，也方便下英文不好的朋友们。 使用插件必须条件：引入jQuery.js文件，引入jQuery.Jcrop.js文件，引入JQuery.Jcrop.css文件。 1.最基本使用...
用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的. 在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃. 在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用. 官方网址:http://deepliquid.com/content/Jcrop.html 上面有很多demo,有...
jcrop原始下载页面：猛击此处 基本使用方法如下： 一、在head部分(和之间)插入相关css和js文件。二、在head部分插入回调函数等相关处理参数。代码如下: jQuery(function($){ // Create variables (in this scope) to hold the API and image size var jcrop_api, boundx, boundy; $('#cropbox').Jcrop({ minSize: [0,0], maxSize:[0,0], setSelect: [0,0,0,0], boxWidth:800, borderOpacity:0.3, keySupport:false, dr...
网页端 裁剪图片，不需要经过服务器。 这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop. 高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。 核心代码：var el = $('input').get(0);seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){FileAPI.event.on(el, 'change', function (evt){var files = FileAPI.getFiles(evt); // Retrieve file listFileAPI.filterFil...
本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下： 头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。 有一个例子，请参考：jcrop例子demo ，是根jcrop的例子改的，添加以下二个特点： 1，居中显示，并且可拖拉，改变截取的大小 2，预览的图片，根拖拉的大小成比例。 以下是js代码，作了简单的封装jcrop 图...
需求说明 简单来说就是要实现用户上传头像，并且要保存用户裁切后的部分作为用户头像。 第一步，选择图片： 第二步，在弹窗页面中展现并进行裁切： 第三步，点击“保存”，上传服务器。 实现过程 说来有点坎坷，相当于做了2遍，走了弯路。 第1遍是用户一选择图片，就进行了上传，然后返回一个地址，所以在弹层上展现的图片已经是服务器上的图片了，然后进行裁切，再保存。 第2遍找到的一个方法，是在第1遍做到裁切处理时候想到...
当初说这个需求的时候，在网上找了一点资料，但是基本上感觉不符合项目中的需求。参照一些项目，和同事的改造，终于是像点样子了。 截图大致截为3个像素，每个像素使用的地方也不同，考虑图片不会是很多,分别压缩保存下来。 根据截取的像素位置，对应的压缩成相应的图片： 首先需要下载Jcrop.js与uploadify.js 上传图片的插件和截图的插件Comm_UploadJcrop.js //剪裁头像对象和宽高比例 var jcrop_api, boundx, boundy; //上传图...
本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下： 头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。 有一个例子，请参考：jcrop例子demo ，是根jcrop的例子改的，添加以下二个特点： 1，居中显示，并且可拖拉，改变截取的大小 2，预览的图片，根拖拉的大小成比例。 以下是js代码，作了简单的封装 <!DOCTY...
网页端 裁剪图片，不需要经过服务器。 这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop. 高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。 核心代码：var el = $(input).get(0);seajs.use([gallery/jcrop/0.9.12/jcrop.css,gallery/jcrop/0.9.12/jcrop.js] ,function(){FileAPI.event.on(el, change, function (evt){var files = FileAPI.getFiles(evt); // Retrieve file listFileAPI.filterFiles(files...
在后台来进行图片切割。头像截取的原理：在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面宽度，然后将这四个值传给后台。在后台要进行放大处理：将切面放大N倍，N=原图/前台展示的头像。即X = X*原图宽/前图宽，Y = Y*原图高/前图高，W = W*原图宽/前图宽,H = H*原图高/前图高。实例：JSP:代码如下:<div id="cutImage" style="display: none;"> <div class="bigImg" style="float: left;"> <img id="srcImg" src="...
jcrop原始下载页面：猛击此处 基本使用方法如下： 一、在head部分(<head>和</head>之间)插入相关css和js文件。 <link rel="stylesheet" href="css/jquery.Jcrop.css"><script src="js/jquery.js"></script> <script src="js/jquery.Jcrop.js"></script> 二、在head部分插入回调函数等相关处理参数。代码如下:<script language="Javascript"> <!-- jQuery(function($){ // Create variables (in this scope) to hold the API and ...
总的来说，原理很简单，大致流程是：在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片。下面我们就分别对这几个步骤详细展开讨论分析，并在最后附上小demo供大家参考。 1、在页面上加载原图 这个就不用多说了，就是在页面上显示一张图片，一个img标签搞定，不过为了下一步演示，还是贴一下代码 <img src="girl.jpg" alt="" id="Te...
用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的. 在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃. 在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用. 官方网址:http://deepliquid.com/content/Jcrop.html 上面有很多demo,有...
同事推荐了Jcrop这个插件，到它的官方站点http://deepliquid.com/content/Jcrop.html下载了最新版的压缩包，压缩包中包括了Jcrop的几个demo文件，关键的Jcrop.js文件和jQuery.Jcrop.css文件。基本上来说参照它的几个demo文件就可以学会使用这个插件了。晚上正好学习研究了下，现简单总结如下，也方便下英文不好的朋友们。 使用插件必须条件：引入jQuery.js文件，引入jQuery.Jcrop.js文件，引入JQuery.Jcrop.css文件。 1.最基本使用...
效果如下图请“运行代码”先试下运行，运行后请刷新一次，感受下：body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') top left repeat; } .jcrop-vline { height: 100%; width: 1px !important; } .jcrop-hline { width: 100%; height: 1px !important; }...