首页 > 代码库 > JavaScript图片裁剪
JavaScript图片裁剪
1.jquery 图片裁剪库选择
Jcrop:http://deepliquid.com/content/Jcrop.html
imgareaselect:http://odyniec.net/projects/imgareaselect/
CropZoom:https://github.com/cropzoom/cropzoom
可供选择的jQuery插件许多,这里选择 imgareaselect 进行具体演示
2.综合演示效果
2.1 左側区域是 div + img 标签,用来展示原图,详细需求
(1)左側展示用户上载的原图,原图能够超大,能够超小。
大图就等比例压缩展示,小图不压缩
(2)左側区域最大宽度是 608px。这个參数要求能够定制!
(3)左側裁剪,要求依照【右側预览区域的高宽比】进行裁剪
2.2 右側区域也是 div + img 标签。用来展示【裁剪部分】的预览图
(1)预览区域的高宽是 608*304 ,要求能够定制
(2)左側裁剪部分的图在这里全屏体现出来
这种要求事实上是从用户体验出发的。保证了效果:
(1)原图无论多大多小,都会依照原图比例展示出来
(2)左側区域最大宽度固定,这样左側不会过宽,【导致右側预览没地方】
可是要注意。假设用户上载非常小的图。而且【裁剪的部分】本身就小于【预览的高宽】
那么会等比例拉伸展示,事实上能够做到不拉伸,可是这种话就影响了总体页面布局!
上述參数指标应该说很具体了。提供了 原图、左側展示图、裁剪区、右側预览图的指标
而且依据【左側展示图】+【原图】+【裁剪区坐标】计算出来在原图上裁剪点坐标
这样方便后台对原图进行真实裁剪。
3、二次封装与实现
(1)支持计算各种坐标的回调函数
(2)支持左側、右側 各种指标的定制
(3)支持图片载入完毕才開始出现效果
防止用户上载超大图。图片还没载入完毕就调用imgAreaSelect的方法。导致在某些浏览器里面没有效果
官方提供的简单演示样例,在遇到上载超大图,比方10M图片时,事实上都有问题。
先来看看html代码。很easy
<input type="button" value="http://www.mamicode.com/上载" onclick="testUpload()" /> <br/> X1:<input id="X1" type="text" /> Y1:<input id="Y1" type="text" /><br/> X2:<input id="X2" type="text" /> Y2:<input id="Y2" type="text" /><br/> 裁剪区宽度:<input id="aWidth" type="text" /> 裁剪区高度:<input id="aHeight" type="text" /> <br/> 真实宽度:<input id="rWidth" type="text" /> 真实高度:<input id="rHeight" type="text" /> <br/> 展示宽度:<input id="sWidth" type="text" /> 展示高度:<input id="sHeight" type="text" /> <br/> 预览宽度:<input id="pWidth" type="text" /> 预览高度:<input id="pHeight" type="text" /> <br/> <h3>依据[真实高宽+展示高宽+裁剪区坐标]计算出来在真实图片上应该裁剪的坐标</h3> Real-X1:<input id="rX1" type="text" /> Real-Y1:<input id="rY1" type="text" /><br/> Real-X2:<input id="rX2" type="text" /> Real-Y2:<input id="rY2" type="text" /><br/> </div> <!-- 左側区域:用来依照原图比例展示用户上载的图片 由于要保证左側区域最大宽度不超过 608,所以这里width要设置! 假设你的需求不同,就自定义一个宽度。 高度不须要设置,假设原图超大,宽度就依照 608展示,而高度就是等比例压缩的。不能确定高度! 假设图片本身还不到 608 宽度。那么就会依照原图展示出来 --> <div id="leftDiv" style="float:left;width:608px;height:auto;border:1px solid #CCC;overflow:hidden;"> <img src=""> </div> <!-- 右側区域:用来展示左側裁剪的部分,div的高宽就必须定义好 比方这里要求依照 608*304规格展示。那么就必须设置好。其它样式随便你自定义。 注意div里面能够不放 img 标签 --> <div id="previewDiv" style="width: 608px; height:304px;float:left; margin-left:10px; overflow: hidden; border:1px dotted #ccc"> </div>
再来看看怎样调用
<title>图片裁剪</title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com//staticfile/imgselect/css/imgareaselect-default.css" /> <script type="text/javascript" src="http://www.mamicode.com//staticfile/imgselect/scripts/jquery.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com//staticfile/imgselect/scripts/jquery.imgareaselect.pack.js"></script> <script type="text/javascript" src="http://www.mamicode.com//staticfile/imgSelectedArea.js"></script> </head> <script type="text/javascript"> function testUpload(){ var left = $("#leftDiv"); var right = $("#previewDiv"); var imgSrc="http://pan.suning.com/cloud-web/index/images/intro/intro-01.jpg"; //var imgSrc="http://www.mamicode.com/staticfile/img/DSC02417.JPG"; //var imgSrc="http://www.mamicode.com/staticfile/img/2.jpg"; // var imgSrc="http://www.mamicode.com/staticfile/img/1.jpg"; var preWidth = 608; var preHeight = 304; $("#pWidth").val(preWidth); $("#pHeight").val(preHeight); var initObject = { leftDiv:left, rightDiv:right, imgSrc:imgSrc, preWidth:preWidth, preHeight:preHeight }; // 回调函数(可选) var getImgInfo = function(imgInfo){ $("#rWidth").val(imgInfo.realWidth); $("#rHeight").val(imgInfo.realHeight); $("#sWidth").val(imgInfo.showWidth); $("#sHeight").val(imgInfo.showHeight); } // 回调函数(可选) var getAreaInfo = function(areaInfo){ $("#X1").val(areaInfo.x1); $("#Y1").val(areaInfo.y1); $("#X2").val(areaInfo.x2); $("#Y2").val(areaInfo.y2); $("#aWidth").val(areaInfo.width); $("#aHeight").val(areaInfo.height); $("#rX1").val(areaInfo.rX1); $("#rY1").val(areaInfo.rY1); $("#rX2").val(areaInfo.rX2); $("#rY2").val(areaInfo.rY2); } initObject.getImgInfo = getImgInfo; initObject.getAreaInfo = getAreaInfo; initImgSelectedArea(initObject); } </script>
注意到:调用 initImgSelectedArea 方法就可以。传一个json对象。
要求位json对象提供几个參数和回调函数,当中回调函数是可选的!
这种方法就是在 imgSelectedArea.js 定义的
最后来看看imgSelectedArea.js文件
/** * 图片裁剪 * * @param initObj{ * leftDiv:左側div容器 * rightDiv:右側div容器 * imgSrc:原图的地址 * preWidth:右側预览图要求的宽度 * preHeight:右側预览图要求的高度 * getImgInfo:返回原图、左側终于展示图的高宽的回调函数 * getAreaInfo:返回左側裁剪区域坐标、高宽。以及映射到原图上的坐标 * } * @returns {succeed:(true|false),msg:‘处理结果‘} * * @author yli */ function initImgSelectedArea(initObj) { if (initObj) { var leftDiv = initObj.leftDiv || undefined; var rightDiv = initObj.rightDiv || undefined; var imgSrc = http://www.mamicode.com/initObj.imgSrc || undefined;"img"); // 绑定img.onload事件,确保图片载入完毕才初始化裁剪区域 leftImg.load(function(){ // 图片真实的宽度和高度 var realWidth = $(this).width(); var realHeight = $(this).height(); // 左側区域要求将原图所有展示出来,无论原图多大多小 // 因为左側区域div宽度受preWidth限制,因此对于超宽图片要等比例压缩 if(realWidth>preWidth) { $(this).css({ width:preWidth, height:(preWidth*realHeight)/realWidth }); } // 左側区域属性设置完毕,才显示图片 $(this).css({display:‘block‘}); // 预载入右側区域图片,处于隐藏状态 // 裁剪左側区域图片才显示右側预览图 if(rightDiv.find("img").size()==0){ rightDiv.append(‘<img style="position:relative;display:none" src="http://www.mamicode.com/‘+imgSrc+‘" />‘); }else { rightDiv.find("img").css({display:‘none‘}).attr("src",imgSrc); } // 左边区域原图可能被等比例压缩展示展示(见上一步) // 而裁剪区是基于展示区域的高宽,因此获取展示图的高宽 var showWidth = $(this).width(); var showHeight = $(this).height(); // 左側区域图片裁剪触发调用的函数 var selectedChange = function(img, selection){ // 此处使用预览区域大小计算比例 var scaleX = preWidth / (selection.width || 1); var scaleY = preHeight / (selection.height || 1); $("#sX").val(showWidth + ‘--->‘ + preWidth); $("#sY").val(showHeight + ‘--->‘ + preHeight); // 这里根据左側图片大小计算 rightDiv.find("img").css({ display:‘block‘, width: Math.round(scaleX * showWidth) + ‘px‘, height: Math.round(scaleY * showHeight) + ‘px‘, marginLeft: ‘-‘ + Math.round(scaleX * selection.x1) + ‘px‘, marginTop: ‘-‘ + Math.round(scaleY * selection.y1) + ‘px‘ }); // 调用回调函数,返回裁剪区域信息 if(initObj.getAreaInfo){ initObj.getAreaInfo({ x1:selection.x1, //裁剪区域左上角x1 y1:selection.y1, //裁剪区域左上角y1 x2:selection.x2, //裁剪区域右下角x2 y2:selection.y2, //裁剪区域右下角x2 width:selection.width, //裁剪区域宽度 height:selection.height, //裁剪区域高度 rX1:Math.round(realWidth*selection.x1/showWidth), //裁剪点映射到真实原图上的坐标 rY1:Math.round(realHeight*selection.y1/showHeight), rX2:Math.round(realWidth*selection.x2/showWidth), rY2:Math.round(realHeight*selection.y2/showHeight) }); } }; // 依照预览图的比例初始化裁剪区域,并依照左側可能最大展示区域初始化最大裁剪区域 var previewRatio = preWidth+‘:‘+preHeight; leftImg.imgAreaSelect({ aspectRatio: previewRatio, handles: true, maxWidth:showWidth, maxHeight:showHeight, onSelectChange: selectedChange }); // 调用回调函数,返回图片信息 if(initObj.getImgInfo){ initObj.getImgInfo({ realWidth:realWidth, //图片真实宽度 realHeight:realHeight, //图片真实高度 showWidth:showWidth, //展示宽度 showHeight:showHeight //展示高度 }); } }); // 载入左側区域Img,初始化隐藏 leftImg.css({display:‘none‘}).attr("src", imgSrc); } else { return { succeed : false, msg : ‘方法入參initObj没有定义!‘ }; } }
4、代码下载
http://cloud.suning.com/cloud-web/share/link.htm?
sk=aaacTU
JavaScript图片裁剪