jcorp 头像裁剪—api—个人总结（坑）

//头像裁剪var jcrop_api, boundx, boundy;var x;      var y;      var width;      var height;      // dom结构     //<!--上传成功区域 裁剪区域-->// <div class='custom_head_content' id="preview" style="max-width:412px; max-height:412px; border:1px solid #DDDDDD; text-align: center;" >// // </div>//js//创建  // $('<img   id="cropbox" class="cropbox" src="'+path_url+'"/>').appendTo($('#preview'))// fn_crop($('.cropbox'));//注意 最好用class 命名； （坑）；// $('.custom_head_content').css('background-color','black');    function fn_crop($dom){// $dom  每选中一张图片 动态创建出一个image标签  省去初始化步骤 （这是个神坑 否则等比缩放的时候 会出现只有第一次上传的会等比

//  其余后面的 都会按照 第一次的的比例显示）    // alert(1)    // var numb = $('.jcrop-holder').find('img').eq(1).width();    // $('#cropbox').attr('src','');$dom.Jcrop({minSize: [100, 100],//选框最小尺寸//maxSize: [100, 100],//选框最大尺寸setSelect: [0, 0, 100, 100],//创建选框，参数格式为：[x,y,x2,y2]// boxWidth: numb,//画布宽度// boxHeight:numb ,//画布高度borderOpacity: 0.3,//0.4选框边框透明度keySupport: false,//true支持键盘控制。按键列表：上下左右（移动）、Esc（取消）、Tab（跳出裁剪框，到下一个）dragEdges: true,//true允许拖动边框allowSelect: false,//允许新选框allowResize: true,//true允许选框缩放bgOpacity: 0.5,//0.6背景透明度boundary: 2,//2边界。说明：可以从边界开始拖动鼠标选择裁剪区域allowMove:true,// true 允许选框移动addClass: 'jcrop-handle',trackDocument:true,//baseClass“jcrop”基础样式名前缀。说明：class=”jcrop-holder”，更改的只是其中的 jcrop。//addClassnull添加样式会。例：假设值为 “test”，那么会添加样式到 class=”test jcrop-holder”// bgColor:'black',//背景颜色。颜色关键字、HEX、RGB 均可。//bgFadefalse使用背景过渡效果//handleOpacity0.5缩放按钮透明度//handleSize9缩放按钮大小//handleOffset5缩放按钮与边框的距离aspectRatio:1,//选框宽高比。说明：width/heightcornerHandles:true,//允许边角缩放sideHandles:true,//允许四边缩放//drawBorderstrue绘制边框//fixedSupporttrue//touchSupportnull//fadeTime400过度效果的时间//animationDelay20动画延迟//swingSpeed3过渡速度//minSelect[0,0]选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择onChange:updateCoords//选框改变时的事件//onSelectfunction(){}选框选定时的事件//onReleasefunction(){}取消选框时的事件//下表是api方法//名称说明//setImage(string)设定（或改变）图像。例：jcrop_api.setImage(“newpic.jpg”)//setOptions(object)设定（或改变）参数，格式与初始化设置参数一样//setSelect(array)创建选框，参数格式为：[x,y,x2,y2]//animateTo(array)用动画效果创建选框，参数格式为：[x,y,x2,y2]//release()取消选框//disable()禁用 Jcrop。说明：已有选框不会被清除。//enable()启用 Jcrop//destroy()移除 Jcrop//tellSelect()获取选框的值（实际尺寸）。例子：console.log(jcrop_api.tellSelect())//tellScaled()获取选框的值（界面尺寸）。例子：console.log(jcrop_api.tellScaled())//getBounds()获取图片实际尺寸，格式为：[w,h]//getWidgetSize()获取图片显示尺寸，格式为：[w,h]// getScaleFactor()获取图片缩放的比例，格式为：[w,h]},function () {// Use the API to get the real image sizejcrop_api = this;bounds = this.getBounds();//图片实际尺寸boundx = bounds[0];boundy = bounds[1];var getWidgetSizearr = this.getWidgetSize();//画布大小// console.log(getWidgetSizearr)；var cdcfX = getWidgetSizearr[0];var cdcfY = getWidgetSizearr[1];$('.canvasX').val(cdcfX);$('.canvasY').val(cdcfY);// 图片实际宽高var screenImage = $('#cropbox')var theImage = new Image();theImage.src = screenImage.attr("src");var imageWidth = theImage.width;var imageHeight = theImage.height;//宽高比例var scX = (boundx/imageWidth).toFixed(2);var scY = (boundy/imageHeight).toFixed(2);$('.scaleX').val(scX);$('.scaleY').val(scY);console.log($('.scaleX').val())console.log($('.scaleY').val())})    };function updateCoords(c) {var $pcnt =$('.preview');//预览图片 外面的divxsize = $pcnt.width(),        ysize = $pcnt.height();if(parseInt(c.w) > 0){        var rx = xsize / c.w;        var ry = ysize / c.h;        $('.sWidth').val(c.w);$('.sHeight').val(c.h);$('.sX').val(c.x);$('.sY').val(c.y);//实时预览       $('#coprt').css({          width: Math.round(rx * boundx) + 'px',          height: Math.round(ry * boundy) + 'px',          marginLeft: '-' + Math.round(rx * c.x) + 'px',          marginTop: '-' + Math.round(ry * c.y) + 'px'        });  }//console.log(c.x);//console.log(c.y);//console.log(c.h);//$('#x').val(c.x);//$('#y').val(c.y);//$('#w').val(c.w);//$('#h').val(c.h);};function checkCoords() {if(parseInt($('#w').val())) return true;alert('请选择裁剪区域');return false;}    //jcropt 结束