mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 19:13:26 +08:00
修复cropperImg大小写问题。
This commit is contained in:
@@ -595,7 +595,6 @@
|
||||
<None Include="wwwroot\lib\layuiAdmin\modules\coredropdown.js" />
|
||||
<None Include="wwwroot\lib\layuiAdmin\modules\coreHelper.js" />
|
||||
<None Include="wwwroot\lib\layuiAdmin\modules\Cropper.js" />
|
||||
<None Include="wwwroot\lib\layuiAdmin\modules\cropperImg.js" />
|
||||
<None Include="wwwroot\lib\layuiAdmin\modules\dltable.js" />
|
||||
<None Include="wwwroot\lib\layuiAdmin\modules\dtree.js" />
|
||||
<None Include="wwwroot\lib\layuiAdmin\modules\echarts.js" />
|
||||
|
||||
@@ -1,364 +0,0 @@
|
||||
layui.define(["layer", "setter"],
|
||||
function (f) {
|
||||
var h = layui.jquery;
|
||||
var k = layui.layer;
|
||||
var d = layui.setter;
|
||||
var n = { version: "1.1.0", layerData: {} };
|
||||
n.open = function (s) {
|
||||
if (s.content && s.type === 2) {
|
||||
s.url = undefined
|
||||
}
|
||||
if (s.url && (s.type === 2 || s.type === undefined)) {
|
||||
s.type = 1
|
||||
}
|
||||
if (s.area === undefined) {
|
||||
s.area = s.type === 2 ? ["360px", "300px"] : "360px"
|
||||
}
|
||||
if (s.offset === undefined) {
|
||||
s.offset = "70px"
|
||||
}
|
||||
if (s.shade === undefined) {
|
||||
s.shade = 0.1
|
||||
}
|
||||
if (s.fixed === undefined) {
|
||||
s.fixed = false
|
||||
}
|
||||
if (s.resize === undefined) {
|
||||
s.resize = false
|
||||
}
|
||||
if (s.skin === undefined) {
|
||||
//s.skin = "layui-layer-admin"
|
||||
s.skin = "layui-layer-admin"
|
||||
}
|
||||
var q = s.end;
|
||||
s.end = function () {
|
||||
k.closeAll("tips");
|
||||
q && q()
|
||||
};
|
||||
if (s.url) {
|
||||
var r = s.success;
|
||||
s.success = function (t, u) {
|
||||
h(t).data("tpl", s.tpl || "");
|
||||
n.reloadLayer(u, s.url, r)
|
||||
}
|
||||
} else {
|
||||
if (s.tpl && s.content) {
|
||||
s.content = n.util.tpl(s.content, s.data, d.tplOpen, d.tplClose)
|
||||
}
|
||||
}
|
||||
var i = k.open(s);
|
||||
if (s.data) {
|
||||
n.layerData["d" + i] = s.data
|
||||
}
|
||||
return i
|
||||
};
|
||||
n.closeDialog = function (i) {
|
||||
if (i) {
|
||||
k.close(n.getLayerIndex(i))
|
||||
} else {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name))
|
||||
}
|
||||
};
|
||||
n.getLayerIndex = function (i) {
|
||||
if (!i) {
|
||||
return parent.layer.getFrameIndex(window.name)
|
||||
}
|
||||
var q = h(i).parents(".layui-layer").first().attr("id");
|
||||
if (q && q.length >= 11) {
|
||||
return q.substring(11)
|
||||
}
|
||||
};
|
||||
n.cropImg = function (s) {
|
||||
var q = "image/jpeg";
|
||||
var x = s.aspectRatio;
|
||||
var y = s.imgSrc ? s.imgSrc == 'no' ? null : s.imgSrc : "/static/images/common/empty-banner.png";
|
||||
|
||||
//var y = s.imgSrc == 'no' ? null : s.imgSrc;
|
||||
|
||||
var v = s.imgType;
|
||||
var t = s.onCrop;
|
||||
var u = s.limitSize;
|
||||
var w = s.acceptMime;
|
||||
var r = s.exts;
|
||||
var i = s.title;
|
||||
if (x === undefined) {
|
||||
x = 1
|
||||
}
|
||||
if (i === undefined) {
|
||||
i = "裁剪图片"
|
||||
}
|
||||
if (v) {
|
||||
q = v
|
||||
}
|
||||
layui.use(["Cropper", "upload"],
|
||||
function () {
|
||||
var A = layui.Cropper, z = layui.upload;
|
||||
|
||||
function B() {
|
||||
var E, F = h("#ew-crop-img");
|
||||
var G = {
|
||||
elem: "#ew-crop-img-upload",
|
||||
auto: false,
|
||||
drag: false,
|
||||
choose: function (H) {
|
||||
H.preview(function (J, K, I) {
|
||||
console.log("xuanze");
|
||||
q = K.type;
|
||||
F.attr("src", I);
|
||||
if (!y || !E) {
|
||||
y = I;
|
||||
B()
|
||||
} else {
|
||||
E.destroy();
|
||||
E = new A(F[0], D)
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
if (u !== undefined) {
|
||||
G.size = u
|
||||
}
|
||||
if (w !== undefined) {
|
||||
G.acceptMime = w
|
||||
}
|
||||
if (r !== undefined) {
|
||||
G.exts = r
|
||||
}
|
||||
z.render(G);
|
||||
if (!y) {
|
||||
return h("#ew-crop-img-upload").trigger("click")
|
||||
}
|
||||
var D = {
|
||||
aspectRatio: x, preview: ".ew-crop-img-preview",
|
||||
ready: function (e) {
|
||||
//console.log("初始准备" + e.type);
|
||||
},
|
||||
cropstart: function (e) {
|
||||
//console.log(e.type, e.detail.action);
|
||||
},
|
||||
cropmove: function (e) {
|
||||
//console.log(e.type, e.detail.action);
|
||||
},
|
||||
cropend: function (e) {
|
||||
//console.log(e.type, e.detail.action);
|
||||
},
|
||||
crop: function (e) {
|
||||
var data = e.detail;
|
||||
|
||||
var dataX = document.getElementById('dataX');
|
||||
var dataY = document.getElementById('dataY');
|
||||
var dataHeight = document.getElementById('dataHeight');
|
||||
var dataWidth = document.getElementById('dataWidth');
|
||||
var dataRotate = document.getElementById('dataRotate');
|
||||
var dataScaleX = document.getElementById('dataScaleX');
|
||||
var dataScaleY = document.getElementById('dataScaleY');
|
||||
dataX.value = Math.round(data.x);
|
||||
dataY.value = Math.round(data.y);
|
||||
dataHeight.value = Math.round(data.height);
|
||||
dataWidth.value = Math.round(data.width);
|
||||
dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
|
||||
dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
|
||||
dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
|
||||
},
|
||||
zoom: function (e) {
|
||||
console.log(e.type, e.detail.ratio);
|
||||
}
|
||||
};
|
||||
E = new A(F[0], D);
|
||||
h(".ew-crop-tool").on("click",
|
||||
"[data-method]",
|
||||
function () {
|
||||
var I = h(this).data(), J, H;
|
||||
if (!E || !I.method) {
|
||||
return
|
||||
}
|
||||
I = h.extend({}, I);
|
||||
J = E.cropped;
|
||||
switch (I.method) {
|
||||
case "rotate":
|
||||
if (J && D.viewMode > 0) {
|
||||
E.clear()
|
||||
}
|
||||
break;
|
||||
case "getCroppedCanvas":
|
||||
if (q === "image/jpeg") {
|
||||
if (!I.option) {
|
||||
I.option = {}
|
||||
}
|
||||
I.option.fillColor = "#fff"
|
||||
}
|
||||
break
|
||||
}
|
||||
H = E[I.method](I.option, I.secondOption);
|
||||
switch (I.method) {
|
||||
case "rotate":
|
||||
if (J && D.viewMode > 0) {
|
||||
E.crop()
|
||||
}
|
||||
break;
|
||||
case "scaleX":
|
||||
case "scaleY":
|
||||
h(this).data("option", -I.option);
|
||||
break;
|
||||
case "getCroppedCanvas":
|
||||
if (H) {
|
||||
t && t(H.toDataURL(q));
|
||||
n.closeDialog("#ew-crop-img")
|
||||
} else {
|
||||
k.msg("裁剪失败", { icon: 2, anim: 6 })
|
||||
}
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
// docs - toggles
|
||||
h(".my-toggles").on('click', "[data-value]",
|
||||
function () {
|
||||
var data = h(this).data();
|
||||
//console.log(data.value);
|
||||
if (!E) {
|
||||
return;
|
||||
}
|
||||
D.aspectRatio = data.value;
|
||||
D.ready = function () {
|
||||
//console.log('重新准备');
|
||||
};
|
||||
// Restart
|
||||
E.destroy();
|
||||
E = new A(F[0], D);
|
||||
});
|
||||
}
|
||||
|
||||
var C = [
|
||||
'<div class="layui-row">', ' <div class="layui-col-sm8" style="height: 500px;background: #e6e6e6;max-height:500px;">',
|
||||
' <img id="ew-crop-img" crossOrigin="anonymous" src="', y || "", '" style="max-width:100%;" alt=""/>',
|
||||
" </div>",
|
||||
' <div class="layui-col-sm4 layui-hide-xs docs-preview clearfix" style="padding:0px 15px;text-align: center;">',
|
||||
' <div class="ew-crop-img-preview preview-lg"></div>',
|
||||
' <div class="ew-crop-img-preview preview-md"></div>',
|
||||
' <div class="ew-crop-img-preview preview-sm"></div>',
|
||||
' <div class="ew-crop-img-preview preview-xs"></div>',
|
||||
'<div class="layui-form layui-form-pane myCropperBox">',
|
||||
' <div class="layui-form-item input-group-sm">',
|
||||
' <label class="layui-form-label" for="dataX">',
|
||||
' X轴坐标',
|
||||
' </label>',
|
||||
'<div class="layui-input-inline" style="width:140px;">',
|
||||
' <input type="text" class="layui-input" id="dataX" placeholder="x">',
|
||||
'</div>',
|
||||
' <div class="layui-form-mid layui-word-aux">',
|
||||
' 像素',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="layui-form-item input-group-sm">',
|
||||
' <label class="layui-form-label" for="dataY">',
|
||||
' Y轴坐标',
|
||||
' </label>',
|
||||
'<div class="layui-input-inline" style="width:140px;">',
|
||||
' <input type="text" class="layui-input" id="dataY" placeholder="y">',
|
||||
'</div>',
|
||||
' <div class="layui-form-mid layui-word-aux">',
|
||||
' 像素',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="layui-form-item input-group-sm">',
|
||||
' <label class="layui-form-label" for="dataWidth">',
|
||||
' 宽度',
|
||||
' </label>',
|
||||
'<div class="layui-input-inline" style="width:140px;">',
|
||||
' <input type="text" class="layui-input" id="dataWidth" placeholder="width">',
|
||||
'</div>',
|
||||
' <div class="layui-form-mid layui-word-aux">',
|
||||
' 像素',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="layui-form-item input-group-sm">',
|
||||
' <label class="layui-form-label" for="dataHeight">',
|
||||
' 高度',
|
||||
' </label>',
|
||||
'<div class="layui-input-inline" style="width:140px;">',
|
||||
' <input type="text" class="layui-input" id="dataHeight" placeholder="height">',
|
||||
'</div>',
|
||||
' <div class="layui-form-mid layui-word-aux">',
|
||||
' 像素',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="layui-form-item input-group-sm">',
|
||||
' <label class="layui-form-label" for="dataRotate">',
|
||||
' 旋转',
|
||||
' </label>',
|
||||
'<div class="layui-input-inline" style="width:140px;">',
|
||||
' <input type="text" class="layui-input" id="dataRotate" placeholder="rotate">',
|
||||
'</div>',
|
||||
' <div class="layui-form-mid layui-word-aux">',
|
||||
' 度',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="layui-form-item input-group-sm">',
|
||||
' <label class="layui-form-label" for="dataScaleX">',
|
||||
' 左右翻转',
|
||||
' </label>',
|
||||
'<div class="layui-input-inline" style="width:140px;">',
|
||||
' <input type="text" class="layui-input" id="dataScaleX" placeholder="scaleX">',
|
||||
'</div>',
|
||||
' </div>',
|
||||
' <div class="layui-form-item input-group-sm">',
|
||||
' <label class="layui-form-label" for="dataScaleY">',
|
||||
' 上下翻转',
|
||||
' </label>',
|
||||
'<div class="layui-input-inline" style="width:140px;">',
|
||||
' <input type="text" class="layui-input" id="dataScaleY" placeholder="scaleY">',
|
||||
'</div>',
|
||||
' </div>',
|
||||
'</div>',
|
||||
|
||||
|
||||
'<div class="layui-btn-group my-toggles">',
|
||||
'<button type="button" class="layui-btn layui-btn-sm myCropperImg" data-value="1.7777777777777777">16:9</button>',
|
||||
'<button type="button" class="layui-btn layui-btn-sm" data-value="1.3333333333333333">4:3</button>',
|
||||
'<button type="button" class="layui-btn layui-btn-sm" data-value="1">1:1</button>',
|
||||
'<button type="button" class="layui-btn layui-btn-sm" data-value="0.6666666666666666">2:3</button>',
|
||||
'<button type="button" class="layui-btn layui-btn-sm" data-value="NaN">自由</button>',
|
||||
'</div>',
|
||||
|
||||
|
||||
|
||||
" </div>",
|
||||
"</div>",
|
||||
'<div class="ew-crop-tool" style="padding: 15px 0px 0px 0;">',
|
||||
' <div class="layui-btn-group">',
|
||||
' <button title="放大" data-method="zoom" data-option="0.1" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-add-1"></i></button>',
|
||||
' <button title="缩小" data-method="zoom" data-option="-0.1" class="layui-btn icon-btn" type="button"><span style="display: inline-block;width: 12px;height: 2.5px;background: rgba(255, 255, 255, 0.9);vertical-align: middle;margin: 0 4px;"></span></button>',
|
||||
" </div>", ' <div class="layui-btn-group layui-hide-xs">',
|
||||
' <button title="向左旋转" data-method="rotate" data-option="-45" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-refresh-1" style="transform: rotateY(180deg) rotate(40deg);display: inline-block;"></i></button>',
|
||||
' <button title="向右旋转" data-method="rotate" data-option="45" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-refresh-1" style="transform: rotate(30deg);display: inline-block;"></i></button>',
|
||||
" </div>", ' <div class="layui-btn-group">',
|
||||
' <button title="左移" data-method="move" data-option="-10" data-second-option="0" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-left"></i></button>',
|
||||
' <button title="右移" data-method="move" data-option="10" data-second-option="0" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-right"></i></button>',
|
||||
' <button title="上移" data-method="move" data-option="0" data-second-option="-10" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-up"></i></button>',
|
||||
' <button title="下移" data-method="move" data-option="0" data-second-option="10" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-down"></i></button>',
|
||||
" </div>", ' <div class="layui-btn-group">',
|
||||
' <button title="左右翻转" data-method="scaleX" data-option="-1" class="layui-btn icon-btn" type="button" style="position: relative;width: 41px;"><i class="layui-icon layui-icon-triangle-r" style="position: absolute;left: 9px;top: 0;transform: rotateY(180deg);font-size: 16px;"></i><i class="layui-icon layui-icon-triangle-r" style="position: absolute; right: 3px; top: 0;font-size: 16px;"></i></button>',
|
||||
' <button title="上下翻转" data-method="scaleY" data-option="-1" class="layui-btn icon-btn" type="button" style="position: relative;width: 41px;"><i class="layui-icon layui-icon-triangle-d" style="position: absolute;left: 11px;top: 6px;transform: rotateX(180deg);line-height: normal;font-size: 16px;"></i><i class="layui-icon layui-icon-triangle-d" style="position: absolute; left: 11px; top: 14px;line-height: normal;font-size: 16px;"></i></button>',
|
||||
" </div>", ' <div class="layui-btn-group">',
|
||||
' <button title="重新开始" data-method="reset" class="layui-btn icon-btn" type="button"><i class="layui-icon layui-icon-refresh"></i></button>',
|
||||
' <button title="选择图片" id="ew-crop-img-upload" class="layui-btn icon-btn" type="button" style="border-radius: 0 2px 2px 0;"><i class="layui-icon layui-icon-upload-drag"></i></button>',
|
||||
" </div>",
|
||||
' <button data-method="getCroppedCanvas" data-option="{ "maxWidth": 4096, "maxHeight": 4096 }" class="layui-btn icon-btn" type="button" style="margin-left: 10px;"><i class="layui-icon"></i>完成</button>',
|
||||
"</div>"
|
||||
].join("");
|
||||
n.open({
|
||||
title: i,
|
||||
area: "900px",
|
||||
type: 1,
|
||||
content: C,
|
||||
success: function (D, E) {
|
||||
h(D).children(".layui-layer-content").css("overflow", "visible");
|
||||
B()
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
f("cropperImg", n)
|
||||
});
|
||||
Reference in New Issue
Block a user