' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
';
wdCropper.topWin.$("body").append('
');
wdCropper.topWin.$("body").append(
'
![]()
' +
panelHtml + '
');
wdCropper.topWin.$("body").append(
'
W:
H:
'
);
var cw = wdCropper.topWin.document.body.clientWidth,
ch = wdCropper.topWin.document.body.clientHeight;
if (!param) { // 默认全屏
param = {
width: cw - 20,
height: ch - 20
}
} else { // 超出屏幕大小的话就默认全屏
if (param.width > cw || param.height > ch) {
param = {
width: cw - 50,
height: ch - 50
}
}
}
wdCropper.layer.resize({
width: param.width + 20,
height: param.height + 40
})
wdCropper.topWin.$("#cropper").fadeIn();
},
resize: function(size) { // 重置大小,最小不能小于200*200
if (size) {
if(size.width < 200) {
size.width = 220;
}
if(size.height < 200) {
size.height = 200;
}
}
var c = wdCropper.topWin.$("#cropper");
$(c).width(size.width + "px");
$(c).height(size.height + "px");
$(c).css({
"top": ((wdCropper.topWin.document.body.clientHeight - size.height) / 2) + "px",
"left": ((wdCropper.topWin.document.body.clientWidth - size.width) / 2) + "px"
});
var b = wdCropper.topWin.$("#space-layer-body");
$(b).height(($(c).height() - 40) + "px");
$(b).width(($(c).width() - 20) + "px");
var p = wdCropper.topWin.$("#space-cropper-panel");
var t = (($(c).height() / 2) - 210);
t = t < 40 ? 50 : t;
$(p).css({
"top": t + "px",
});
wdCropper.topWin.$("#space-cropper-panel").Tdrag();
wdCropper.topWin.$("#cropper").Tdrag();
},
fullIndex: 1,
full: function(type) { // 全屏Tg
if (wdCropper.layer.fullIndex == 1) {
wdCropper.layer.fullScreen();
wdCropper.layer.fullIndex = 2;
wdCropper.topWin.$(".icon-fullscreen").hide();
wdCropper.topWin.$(".icon-restore").show();
} else {
wdCropper.layer.exitScreen();
wdCropper.layer.fullIndex = 1;
// wdCropper.topWin.$(".icon-fullscreen").removeClass("icon-zoomOut");
wdCropper.topWin.$(".icon-fullscreen").show();
wdCropper.topWin.$(".icon-restore").hide();
}
},
fullScreen: function() { // 全屏
var el = wdCropper.topWin.document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
};
return;
},
exitScreen: function() { // 退出全屏
var d = wdCropper.topWin.document;
if (d.exitFullscreen) {
d.exitFullscreen();
} else if (d.mozCancelFullScreen) {
d.mozCancelFullScreen();
} else if (d.webkitCancelFullScreen) {
d.webkitCancelFullScreen();
} else if (d.msExitFullscreen) {
d.msExitFullscreen();
}
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
},
close: function() { // 关闭
wdCropper.topWin.$("#shade").remove();
wdCropper.topWin.$("#cropper").remove();
wdCropper.topWin.$("#imgInfo").remove();
/* 再改,启用清除 .css、.js 语句 -- 上面的 show(,启用了引入 .css、.js 语句。Lin
//wdCropper.topWin.$("html link[href='/wd/js/Cropper/cropper-master/dist/cropper.css']").remove();
//wdCropper.topWin.$("html script[src='/wd/js/Cropper/cropper-master/dist/cropper.js']").remove();
//wdCropper.topWin.$("html script[src='/wd/js/Cropper/drag/Tdrag.min.js']").remove();
*/
wdCropper.topWin.$("html link[href='/ss/Cropper/cropper-master/dist/cropper.css']").remove();
wdCropper.topWin.$("html script[src='/ss/Cropper/cropper-master/dist/cropper.js']").remove();
wdCropper.topWin.$("html script[src='/ss/Cropper/drag/Tdrag.min.js']").remove();
wd.topWindow.$("#cropiframe").hide();
}
},
cropper: {
fileName: null,
$image: undefined, // cropper实例,由init时赋值
changeflag: false, // 是否被拖动标记,如被拖动为真,否则为假
autoSizeFlag: 0, // 累计加载完毕次数
imageURL: undefined, // BASE64 图像
startInterval: undefined, // 连续操作的定时器对象
startIntervalType: undefined, // 连续操作的类型
rotatingNumber: 0, // 旋转度数
img: undefined,
init: function() {
// 通过指定的宽和高计算裁剪框比例,出现小数向上取整
var _widthRatio = 0,
_heightRatio = 0,
ratioFlag = false;
if (wdCropper.settings.width && wdCropper.settings.height) {
ratioFlag = true;
_widthRatio = (wdCropper.settings.width / 100).toFixed(2);
_heightRatio = (wdCropper.settings.height / 100).toFixed(2);
}
wdCropper.cropper.$image = wdCropper.topWin.$("#cropperImage");
wdCropper.cropper.$image.cropper({
aspectRatio: ratioFlag ? _widthRatio / _heightRatio : undefined,
viewMode: 0, // 视点模式:【0:无限制;1:不能超出裁剪区域;】
dragMode: 'move', // 拖曳模式:'crop'*创建一个新的麦田盒,'move'*移动画布,'none'*无所事事
modal: true, // 是否显示黑色遮罩
guides: true, // 显示麦田盒上方的虚线。
center: true, // 显示位于“作物”框上方的中心指示器。
highlight: true, // 在“作物”框上方显示白色模式(突出显示“作物”框)。
background: true, // 是否显示透明背景
movable: false, // 是否可以移动图像
rotatable: true, // 可旋转
scalable: true, // 可伸缩
zoomable: true, // 可缩放
responsive: true, // 调整窗口大小时,重新渲染裁剪器
zoomOnWheel: false, // 通过移动鼠标使图像能够缩放
wheelZoomRatio: 0.1, // 定义缩放比率时,通过鼠标旋转放大图像。(滚动时放大或缩小的比例)
cropBoxMovable: true, // 通过拖动启用移动“裁剪”框。
CropBoxResizable: false, // 可以通过拖动调整裁剪框的大小
crop: function(event) { // 移动开始时
try {
if (!wdCropper.cropper.changeflag) {
wdCropper.topWin.$("#imgInfo").show();
}
var offset = wdCropper.topWin.$(".cat").offset();
if (offset != undefined) {
wdCropper.topWin.$("#imgInfo").css({
"left": (offset.left + 30) + "px",
"top": (offset.top - 9) + "px"
});
}
var d = wdCropper.cropper.$image.data('cropper').getData();
wdCropper.topWin.$("#width").html(Math.round(d.width));
wdCropper.topWin.$("#height").html(Math.round(d.height));
if (!wdCropper.settings.width) {
wdCropper.topWin.$("#showSize").html("" + Math.round(d.width) + " X " + Math.round(d.height) + "");
}
// 计算比例
wdCropper.cropper.getRatio();
} catch (e) {
console.log(e);
}
return false;
},
cropend: function() { // 移动停止时
wdCropper.topWin.$("#imgInfo").hide();
wdCropper.cropper.changeflag = false;
},
ready: function() { // 渲染完毕时
wd.topWindow.wdCropper = wdCropper;
wdCropper.cropper.initDragStyle();
wdCropper.topWin.$("#imgInfo").hide();
// 图片小于200*100就会被Cropper放大,接下来要做的就是把图片还原到原大小
var cd = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小
var img = wdCropper.cropper.$image.data('cropper').getImageData(); // 图片实际大小
wdCropper.cropper.img = img;
if (img.width < 200 || img.height < 200) {
wdCropper.cropper.$image.data('cropper').setCanvasData({
width: img.naturalWidth,
height: img.naturalHeight,
left: (200 - img.naturalWidth) / 2,
top: (200 - img.naturalHeight) / 2,
});
}
if (img) {
wdCropper.cropper.getRatio();
}
// setting中没有指定裁剪宽和高,就设置裁剪框和图片一样大
if (!wdCropper.settings.width) {
var cd2 = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小
wdCropper.cropper.$image.data('cropper').setCropBoxData({
"width": cd2.width,
"height": cd2.height
})
}
// 解决部分屏幕初始化后裁剪框无法居中的问题
var w = wdCropper.cropper.$image.data('cropper').getContainerData().width;
wd.topWindow.wdCropper.cropper.$image.data('cropper').setCropBoxData({
left: (w - wd.topWindow.wdCropper.cropper.$image.data('cropper').getCropBoxData().width) / 2
});
// setTimeout(function() {
// }, 500);
}
});
},
keepTwoDecimal: function(num) { // 四舍五入,保留一位小数
return Math.round(num * 10) / 10;
},
replace: function replace(url) { // 重新渲染裁剪框
wdCropper.cropper.imageURL = url;
wdCropper.cropper.$image.data('cropper').replace(url, false);
},
zoom: function() { // 放大
wdCropper.cropper.changeflag = true;
var cd = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小
var img = wdCropper.cropper.$image.data('cropper').getImageData(); // 图片实际大小
if (cd.width >= img.naturalWidth || cd.height >= img.naturalHeight) {
wdCropper.topWin.$("#zoom_btn").removeClass("icon-zoomIn").addClass("disableIcon-zoomIn");
return false;
}
wdCropper.cropper.$image.cropper("zoom", 0.01);
},
narrow: function() { // 缩小
wdCropper.cropper.changeflag = true;
wdCropper.cropper.$image.cropper("zoom", -0.01);
wdCropper.topWin.$("#zoom_btn").removeClass("disableIcon-zoomIn").addClass("icon-zoomIn");
},
ZN_auto: function(type) { // 连续放大或缩小
window.clearInterval(wdCropper.cropper.startInterval);
type = wdCropper.cropper.startIntervalType = type;
wdCropper.cropper.startInterval = setInterval(function() {
if (type.trim() == 'z') {
wdCropper.cropper.zoom();
} else {
wdCropper.cropper.narrow();
}
}, 100);
},
rotate_left: function() { // 逆时针
wdCropper.cropper.rotatingNumber--;
wdCropper.cropper.changeflag = true;
wdCropper.cropper.$image.cropper("rotate", -1);
wdCropper.topWin.$("#jd").html(wdCropper.cropper.rotatingNumber + "°");
},
rotate_right: function() { // 顺时针
wdCropper.cropper.rotatingNumber++;
wdCropper.cropper.changeflag = true;
wdCropper.cropper.$image.cropper("rotate", 1);
wdCropper.topWin.$("#jd").html(wdCropper.cropper.rotatingNumber + "°");
},
endFlag: function() { // 结束循环
window.clearInterval(wdCropper.cropper.startInterval);
},
RL_auto: function(type) { // 连续旋转
window.clearInterval(wdCropper.cropper.startInterval);
type = wdCropper.cropper.startIntervalType = type;
wdCropper.cropper.startInterval = setInterval(function() {
if (type.trim() == 'l') {
wdCropper.cropper.rotate_left();
} else {
wdCropper.cropper.rotate_right();
}
}, 100);
},
getRatio: function() { // 获取图片缩放比例
try {
var id = wdCropper.cropper.$image.data('cropper').getImageData();
//console.log("id=" + id)
if (id && id.width) {
var bl = wdCropper.cropper.keepTwoDecimal(id.width / wdCropper.cropper.img.width);
wdCropper.topWin.$("#bl").html(bl == 1 ? "1:1" : bl);
}
} catch (e) {
console.log(e);
}
},
initDragStyle: function() { // 初始化裁剪框
wdCropper.topWin.$("span.line-e").remove();
wdCropper.topWin.$("span.line-n").remove();
wdCropper.topWin.$("span.line-w").remove();
wdCropper.topWin.$("span.line-s").remove();
wdCropper.topWin.$("span.point-e").remove();
wdCropper.topWin.$("span.point-n").remove();
wdCropper.topWin.$("span.point-w").remove();
wdCropper.topWin.$("span.point-s").remove();
wdCropper.topWin.$("span.point-ne").remove();
wdCropper.topWin.$("span.point-nw").remove();
wdCropper.topWin.$("span.point-sw").remove();
wdCropper.topWin.$("span.point-se").addClass("cat plugin-drag");
wdCropper.topWin.$("span.point-se").mousemove(function() {
wdCropper.cropper.changeflag = false;
});
wdCropper.topWin.$(".cropper-modal").addClass("dialog-mask");
wdCropper.topWin.$(".cropper-view-box").addClass("area-div");
if (!wdCropper.settings.width) {
var d = wdCropper.cropper.$image.data('cropper').getData();
wdCropper.topWin.$("#showSize").html("" + Math.round(d.width) + " X " + Math.round(d.height) + "");
} else {
wdCropper.topWin.$("#showSize").html("" + wdCropper.settings.width + " X " + wdCropper.settings.height + "");
}
wdCropper.topWin.$("#jd").html("0°");
},
getCroppedCanvas: function() { // 获取裁剪图片
var myForm = undefined; // 最终上传的表单
// 新增需求:裁剪框和图片大小一致的情况下,直接上传原图,不再进行裁剪操作
var canvasData = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 画布大小
var cropBoxData = wdCropper.cropper.$image.data('cropper').getCropBoxData(); // 裁剪框大小
if (canvasData.width == cropBoxData.width && canvasData.height == cropBoxData.height) {
//console.log("原图上传");
var myForm = new FormData();
myForm.append("application", "");
myForm.append("fileEdit", wdCropper.fileObj);
} else {
var hce = wdCropper.cropper.$image.data('cropper').getCroppedCanvas({
width: wdCropper.settings.width,
height: wdCropper.settings.height,
fillColor: '#FFF'
});
var src = hce.toDataURL("image/jpeg");
var dataURLtoBlob = function(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
var newFile = new File([dataURLtoBlob(src)], wdCropper.cropper.fileName);
wdCropper.fileEle.files[0] = newFile;
var myForm = new FormData();
myForm.append("application", "");
myForm.append("fileEdit", newFile);
}
//console.log(wdCropper.settings.action);
$.ajax({
url: wdCropper.settings.action,
type: "POST",
data: myForm,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
error: function() {
wdCropper.layer.close();
setTimeout(function() {
this.wdCropper = undefined;
wd.topWindow.wdCropper = undefined;
}, 1000);
},
success: function(result) {
result = eval("(" + result + ")");
if (wdCropper.cropConfirm) {
wdCropper.cropConfirm.call(wdCropper.thisWindow, result)
}
wdCropper.layer.close();
setTimeout(function() {
this.wdCropper = undefined;
wd.topWindow.wdCropper = undefined;
}, 1000);
}
});
}
}
}
}
//裁剪
function initCropper(fileEle, settings, cropConfirm) {
initWdCropper();
wdCropper.fileEle = fileEle;
var files = fileEle.files;
if (files && files.length) {
if (!!!/^image\/\w+$/.test(files[0].type)) {
window.alert('Please choose an image file.');
return
}
} else {
return;
}
wdCropper.thisWindow = window;
wdCropper.settings = settings;
wdCropper.cropConfirm = cropConfirm;
var file = files[0];
wdCropper.cropper.fileName = file.name;
wdCropper.fileObj = file;
//生成裁剪窗口
if(wd.topWindow){
wd.topWindow.$("#cropiframe").remove();
}else{
wd.topWindow = top;
}
var cropiframe = $(
"
"
)
cropiframe.on("load", function() {
wdCropper.topWin = this.contentWindow;
var uploadedImageURL = URL.createObjectURL(file);
var img = new Image();
img.onload = function() {
wdCropper.layer.show({
width: img.width,
height: img.height
});
wdCropper.cropper.init();
wdCropper.cropper.replace(uploadedImageURL);
}
img.src = uploadedImageURL;
}).appendTo(wd.topWindow.$("body")).show();
}
function uploadFileClean(id) {
$('#' + id + 'Name').html('');
$('input[name="' + id + 'wj"]').val('');
$('#' + id + 'Edit_File').val('');
$('#' + id + 'Edit_File').files = null;
$('#' + id + 'path').val('');
$("#qx" + id).hide();
$("#check" + id).hide();
};