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