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

矫情吗；* 2022-06-11 04:57 228阅读 0赞

//头像裁剪
    	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 结束