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。
			//addClass	null	添加样式会。例：假设值为 “test”，那么会添加样式到 class=”test jcrop-holder”
			// bgColor	:'black',	//背景颜色。颜色关键字、HEX、RGB 均可。
			//bgFade	false	使用背景过渡效果
			//handleOpacity	0.5	缩放按钮透明度
			//handleSize	9	缩放按钮大小
			//handleOffset	5	缩放按钮与边框的距离
			aspectRatio:1,	//选框宽高比。说明：width/height
			cornerHandles:true,	//允许边角缩放
			sideHandles:true,	//允许四边缩放
			//drawBorders	true	绘制边框
			//fixedSupport	true	
			//touchSupport	null	
			//fadeTime	400	过度效果的时间
			//animationDelay	20	动画延迟
			//swingSpeed	3	过渡速度
			//minSelect	[0,0]	选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择
			onChange:updateCoords//选框改变时的事件
			//onSelect	function(){}	选框选定时的事件
			//onRelease	function(){}	取消选框时的事件
			//下表是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 size
			jcrop_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');//预览图片 外面的div
		xsize = $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 结束