@minilo/ui 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/minilo/dist/index.full.js +20 -1117
- package/minilo/dist/index.full.min.js +1 -7
- package/minilo/dist/index.full.min.js.map +1 -1
- package/minilo/dist/index.full.min.mjs +1 -7
- package/minilo/dist/index.full.min.mjs.map +1 -1
- package/minilo/dist/index.full.mjs +21 -1118
- package/minilo/es/components/image-upload-pro/index.d.ts +502 -3
- package/minilo/es/components/image-upload-pro/index.vue.d.ts +504 -3
- package/minilo/es/components/image-upload-pro/index.vue2.mjs +21 -31
- package/minilo/es/components/image-upload-pro/type.d.ts +1 -0
- package/minilo/es/index.d.ts +502 -3
- package/minilo/es/resolver/index.d.ts +1 -1
- package/minilo/es/resolver/index.mjs +4 -1
- package/minilo/lib/components/image-upload-pro/index.d.ts +502 -3
- package/minilo/lib/components/image-upload-pro/index.vue.d.ts +504 -3
- package/minilo/lib/components/image-upload-pro/index.vue2.js +20 -30
- package/minilo/lib/components/image-upload-pro/type.d.ts +1 -0
- package/minilo/lib/index.d.ts +502 -3
- package/minilo/lib/resolver/index.d.ts +1 -1
- package/minilo/lib/resolver/index.js +4 -1
- package/package.json +1 -1
- package/minilo/es/components/button/type.mjs +0 -1
- package/minilo/es/components/chart/type.mjs +0 -1
- package/minilo/es/components/detail/type.mjs +0 -1
- package/minilo/es/components/number-range-input/props.mjs +0 -1
- package/minilo/es/components/tree-select/type.mjs +0 -1
- package/minilo/es/components/virtual-list/type.mjs +0 -1
- package/minilo/lib/components/button/type.js +0 -2
- package/minilo/lib/components/chart/type.js +0 -2
- package/minilo/lib/components/detail/type.js +0 -2
- package/minilo/lib/components/number-range-input/props.js +0 -2
- package/minilo/lib/components/tree-select/type.js +0 -2
- package/minilo/lib/components/virtual-list/type.js +0 -2
|
@@ -7637,1094 +7637,6 @@ var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
|
7637
7637
|
|
|
7638
7638
|
const MlTreeSelectDrawer = withInstall(_sfc_main$1);
|
|
7639
7639
|
|
|
7640
|
-
const Y = {};
|
|
7641
|
-
Y.getData = (t) => new Promise((e, i) => {
|
|
7642
|
-
let s = {};
|
|
7643
|
-
L(t).then((r) => {
|
|
7644
|
-
s.arrayBuffer = r;
|
|
7645
|
-
try {
|
|
7646
|
-
s.orientation = N(r);
|
|
7647
|
-
} catch {
|
|
7648
|
-
s.orientation = -1;
|
|
7649
|
-
}
|
|
7650
|
-
e(s);
|
|
7651
|
-
}).catch((r) => {
|
|
7652
|
-
i(r);
|
|
7653
|
-
});
|
|
7654
|
-
});
|
|
7655
|
-
function L(t) {
|
|
7656
|
-
let e = null;
|
|
7657
|
-
return new Promise((i, s) => {
|
|
7658
|
-
if (t.src)
|
|
7659
|
-
if (/^data\:/i.test(t.src))
|
|
7660
|
-
e = k(t.src), i(e);
|
|
7661
|
-
else if (/^blob\:/i.test(t.src)) {
|
|
7662
|
-
var r = new FileReader();
|
|
7663
|
-
r.onload = function(h) {
|
|
7664
|
-
e = h.target.result, i(e);
|
|
7665
|
-
}, E(t.src, function(h) {
|
|
7666
|
-
r.readAsArrayBuffer(h);
|
|
7667
|
-
});
|
|
7668
|
-
} else {
|
|
7669
|
-
var o = new XMLHttpRequest();
|
|
7670
|
-
o.onload = function() {
|
|
7671
|
-
if (this.status == 200 || this.status === 0)
|
|
7672
|
-
e = o.response, i(e);
|
|
7673
|
-
else
|
|
7674
|
-
throw "Could not load image";
|
|
7675
|
-
o = null;
|
|
7676
|
-
}, o.open("GET", t.src, true), o.responseType = "arraybuffer", o.send(null);
|
|
7677
|
-
}
|
|
7678
|
-
else
|
|
7679
|
-
s("img error");
|
|
7680
|
-
});
|
|
7681
|
-
}
|
|
7682
|
-
function E(t, e) {
|
|
7683
|
-
var i = new XMLHttpRequest();
|
|
7684
|
-
i.open("GET", t, true), i.responseType = "blob", i.onload = function(s) {
|
|
7685
|
-
(this.status == 200 || this.status === 0) && e(this.response);
|
|
7686
|
-
}, i.send();
|
|
7687
|
-
}
|
|
7688
|
-
function k(t, e) {
|
|
7689
|
-
e = e || t.match(/^data\:([^\;]+)\;base64,/mi)[1] || "", t = t.replace(/^data\:([^\;]+)\;base64,/gmi, "");
|
|
7690
|
-
for (var i = atob(t), s = i.length % 2 == 0 ? i.length : i.length + 1, r = new ArrayBuffer(s), o = new Uint16Array(r), h = 0; h < s; h++)
|
|
7691
|
-
o[h] = i.charCodeAt(h);
|
|
7692
|
-
return r;
|
|
7693
|
-
}
|
|
7694
|
-
function T(t, e, i) {
|
|
7695
|
-
var s = "", r;
|
|
7696
|
-
for (r = e, i += e; r < i; r++)
|
|
7697
|
-
s += String.fromCharCode(t.getUint8(r));
|
|
7698
|
-
return s;
|
|
7699
|
-
}
|
|
7700
|
-
function N(t) {
|
|
7701
|
-
var e = new DataView(t), i = e.byteLength, s, r, o, h, a, n, c, l, f, p;
|
|
7702
|
-
if (e.getUint8(0) === 255 && e.getUint8(1) === 216)
|
|
7703
|
-
for (f = 2; f < i; ) {
|
|
7704
|
-
if (e.getUint8(f) === 255 && e.getUint8(f + 1) === 225) {
|
|
7705
|
-
c = f;
|
|
7706
|
-
break;
|
|
7707
|
-
}
|
|
7708
|
-
f++;
|
|
7709
|
-
}
|
|
7710
|
-
if (c && (r = c + 4, o = c + 10, T(e, r, 4) === "Exif" && (n = e.getUint16(o), a = n === 18761, (a || n === 19789) && e.getUint16(o + 2, a) === 42 && (h = e.getUint32(o + 4, a), h >= 8 && (l = o + h)))), l) {
|
|
7711
|
-
for (i = e.getUint16(l, a), p = 0; p < i; p++)
|
|
7712
|
-
if (f = l + p * 12 + 2, e.getUint16(f, a) === 274) {
|
|
7713
|
-
f += 8, s = e.getUint16(f, a);
|
|
7714
|
-
break;
|
|
7715
|
-
}
|
|
7716
|
-
}
|
|
7717
|
-
return s;
|
|
7718
|
-
}
|
|
7719
|
-
const $ = (t, e) => {
|
|
7720
|
-
const i = t.__vccOpts || t;
|
|
7721
|
-
for (const [s, r] of e)
|
|
7722
|
-
i[s] = r;
|
|
7723
|
-
return i;
|
|
7724
|
-
}, z = vue.defineComponent({
|
|
7725
|
-
data: function() {
|
|
7726
|
-
return {
|
|
7727
|
-
// 容器高宽
|
|
7728
|
-
w: 0,
|
|
7729
|
-
h: 0,
|
|
7730
|
-
// 图片缩放比例
|
|
7731
|
-
scale: 1,
|
|
7732
|
-
// 图片偏移x轴
|
|
7733
|
-
x: 0,
|
|
7734
|
-
// 图片偏移y轴
|
|
7735
|
-
y: 0,
|
|
7736
|
-
// 图片加载
|
|
7737
|
-
loading: true,
|
|
7738
|
-
// 图片真实宽度
|
|
7739
|
-
trueWidth: 0,
|
|
7740
|
-
// 图片真实高度
|
|
7741
|
-
trueHeight: 0,
|
|
7742
|
-
move: true,
|
|
7743
|
-
// 移动的x
|
|
7744
|
-
moveX: 0,
|
|
7745
|
-
// 移动的y
|
|
7746
|
-
moveY: 0,
|
|
7747
|
-
// 开启截图
|
|
7748
|
-
crop: false,
|
|
7749
|
-
// 正在截图
|
|
7750
|
-
cropping: false,
|
|
7751
|
-
// 裁剪框大小
|
|
7752
|
-
cropW: 0,
|
|
7753
|
-
cropH: 0,
|
|
7754
|
-
cropOldW: 0,
|
|
7755
|
-
cropOldH: 0,
|
|
7756
|
-
// 判断是否能够改变
|
|
7757
|
-
canChangeX: false,
|
|
7758
|
-
canChangeY: false,
|
|
7759
|
-
// 改变的基准点
|
|
7760
|
-
changeCropTypeX: 1,
|
|
7761
|
-
changeCropTypeY: 1,
|
|
7762
|
-
// 裁剪框的坐标轴
|
|
7763
|
-
cropX: 0,
|
|
7764
|
-
cropY: 0,
|
|
7765
|
-
cropChangeX: 0,
|
|
7766
|
-
cropChangeY: 0,
|
|
7767
|
-
cropOffsertX: 0,
|
|
7768
|
-
cropOffsertY: 0,
|
|
7769
|
-
// 支持的滚动事件
|
|
7770
|
-
support: "",
|
|
7771
|
-
// 移动端手指缩放
|
|
7772
|
-
touches: [],
|
|
7773
|
-
touchNow: false,
|
|
7774
|
-
// 图片旋转
|
|
7775
|
-
rotate: 0,
|
|
7776
|
-
isIos: false,
|
|
7777
|
-
orientation: 0,
|
|
7778
|
-
imgs: "",
|
|
7779
|
-
// 图片缩放系数
|
|
7780
|
-
coe: 0.2,
|
|
7781
|
-
// 是否正在多次缩放
|
|
7782
|
-
scaling: false,
|
|
7783
|
-
scalingSet: "",
|
|
7784
|
-
coeStatus: "",
|
|
7785
|
-
// 控制emit触发频率
|
|
7786
|
-
isCanShow: true,
|
|
7787
|
-
// 图片是否等于截图大小
|
|
7788
|
-
imgIsQqualCrop: false
|
|
7789
|
-
};
|
|
7790
|
-
},
|
|
7791
|
-
props: {
|
|
7792
|
-
img: {
|
|
7793
|
-
type: [String, Blob, null, File],
|
|
7794
|
-
default: ""
|
|
7795
|
-
},
|
|
7796
|
-
// 输出图片压缩比
|
|
7797
|
-
outputSize: {
|
|
7798
|
-
type: Number,
|
|
7799
|
-
default: 1
|
|
7800
|
-
},
|
|
7801
|
-
outputType: {
|
|
7802
|
-
type: String,
|
|
7803
|
-
default: "jpeg"
|
|
7804
|
-
},
|
|
7805
|
-
info: {
|
|
7806
|
-
type: Boolean,
|
|
7807
|
-
default: true
|
|
7808
|
-
},
|
|
7809
|
-
// 是否开启滚轮放大缩小
|
|
7810
|
-
canScale: {
|
|
7811
|
-
type: Boolean,
|
|
7812
|
-
default: true
|
|
7813
|
-
},
|
|
7814
|
-
// 是否自成截图框
|
|
7815
|
-
autoCrop: {
|
|
7816
|
-
type: Boolean,
|
|
7817
|
-
default: false
|
|
7818
|
-
},
|
|
7819
|
-
autoCropWidth: {
|
|
7820
|
-
type: [Number, String],
|
|
7821
|
-
default: 0
|
|
7822
|
-
},
|
|
7823
|
-
autoCropHeight: {
|
|
7824
|
-
type: [Number, String],
|
|
7825
|
-
default: 0
|
|
7826
|
-
},
|
|
7827
|
-
// 是否开启固定宽高比
|
|
7828
|
-
fixed: {
|
|
7829
|
-
type: Boolean,
|
|
7830
|
-
default: false
|
|
7831
|
-
},
|
|
7832
|
-
// 宽高比 w/h
|
|
7833
|
-
fixedNumber: {
|
|
7834
|
-
type: Array,
|
|
7835
|
-
default: () => [1, 1]
|
|
7836
|
-
},
|
|
7837
|
-
// 固定大小 禁止改变截图框大小
|
|
7838
|
-
fixedBox: {
|
|
7839
|
-
type: Boolean,
|
|
7840
|
-
default: false
|
|
7841
|
-
},
|
|
7842
|
-
// 输出截图是否缩放
|
|
7843
|
-
full: {
|
|
7844
|
-
type: Boolean,
|
|
7845
|
-
default: false
|
|
7846
|
-
},
|
|
7847
|
-
// 是否可以拖动图片
|
|
7848
|
-
canMove: {
|
|
7849
|
-
type: Boolean,
|
|
7850
|
-
default: true
|
|
7851
|
-
},
|
|
7852
|
-
// 是否可以拖动截图框
|
|
7853
|
-
canMoveBox: {
|
|
7854
|
-
type: Boolean,
|
|
7855
|
-
default: true
|
|
7856
|
-
},
|
|
7857
|
-
// 上传图片按照原始比例显示
|
|
7858
|
-
original: {
|
|
7859
|
-
type: Boolean,
|
|
7860
|
-
default: false
|
|
7861
|
-
},
|
|
7862
|
-
// 截图框能否超过图片
|
|
7863
|
-
centerBox: {
|
|
7864
|
-
type: Boolean,
|
|
7865
|
-
default: false
|
|
7866
|
-
},
|
|
7867
|
-
// 是否根据dpr输出高清图片
|
|
7868
|
-
high: {
|
|
7869
|
-
type: Boolean,
|
|
7870
|
-
default: true
|
|
7871
|
-
},
|
|
7872
|
-
// 截图框展示宽高类型
|
|
7873
|
-
infoTrue: {
|
|
7874
|
-
type: Boolean,
|
|
7875
|
-
default: false
|
|
7876
|
-
},
|
|
7877
|
-
// 可以压缩图片宽高 默认不超过200
|
|
7878
|
-
maxImgSize: {
|
|
7879
|
-
type: [Number, String],
|
|
7880
|
-
default: 2e3
|
|
7881
|
-
},
|
|
7882
|
-
// 倍数 可渲染当前截图框的n倍 0 - 1000;
|
|
7883
|
-
enlarge: {
|
|
7884
|
-
type: [Number, String],
|
|
7885
|
-
default: 1
|
|
7886
|
-
},
|
|
7887
|
-
// 自动预览的固定宽度
|
|
7888
|
-
preW: {
|
|
7889
|
-
type: [Number, String],
|
|
7890
|
-
default: 0
|
|
7891
|
-
},
|
|
7892
|
-
/*
|
|
7893
|
-
图片布局方式 mode 实现和css背景一样的效果
|
|
7894
|
-
contain 居中布局 默认不会缩放 保证图片在容器里面 mode: 'contain'
|
|
7895
|
-
cover 拉伸布局 填充整个容器 mode: 'cover'
|
|
7896
|
-
如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为auto。 mode: '50px'
|
|
7897
|
-
如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。 mode: '50px 60px'
|
|
7898
|
-
*/
|
|
7899
|
-
mode: {
|
|
7900
|
-
type: String,
|
|
7901
|
-
default: "contain"
|
|
7902
|
-
},
|
|
7903
|
-
//限制最小区域,可传1以上的数字和字符串,限制长宽都是这么大
|
|
7904
|
-
// 也可以传数组[90,90]
|
|
7905
|
-
limitMinSize: {
|
|
7906
|
-
type: [Number, Array, String],
|
|
7907
|
-
default: () => 10,
|
|
7908
|
-
validator: function(t) {
|
|
7909
|
-
return Array.isArray(t) ? Number(t[0]) >= 0 && Number(t[1]) >= 0 : Number(t) >= 0;
|
|
7910
|
-
}
|
|
7911
|
-
},
|
|
7912
|
-
// 导出时,填充背景颜色
|
|
7913
|
-
fillColor: {
|
|
7914
|
-
type: String,
|
|
7915
|
-
default: ""
|
|
7916
|
-
}
|
|
7917
|
-
},
|
|
7918
|
-
computed: {
|
|
7919
|
-
cropInfo() {
|
|
7920
|
-
let t = {};
|
|
7921
|
-
if (t.top = this.cropOffsertY > 21 ? "-21px" : "0px", t.width = this.cropW > 0 ? this.cropW : 0, t.height = this.cropH > 0 ? this.cropH : 0, this.infoTrue) {
|
|
7922
|
-
let e = 1;
|
|
7923
|
-
this.high && !this.full && (e = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (e = Math.abs(Number(this.enlarge))), t.width = t.width * e, t.height = t.height * e, this.full && (t.width = t.width / this.scale, t.height = t.height / this.scale);
|
|
7924
|
-
}
|
|
7925
|
-
return t.width = t.width.toFixed(0), t.height = t.height.toFixed(0), t;
|
|
7926
|
-
},
|
|
7927
|
-
isIE() {
|
|
7928
|
-
return !!window.ActiveXObject || "ActiveXObject" in window;
|
|
7929
|
-
},
|
|
7930
|
-
passive() {
|
|
7931
|
-
return this.isIE ? null : {
|
|
7932
|
-
passive: false
|
|
7933
|
-
};
|
|
7934
|
-
},
|
|
7935
|
-
// 是否处于左右旋转
|
|
7936
|
-
isRotateRightOrLeft() {
|
|
7937
|
-
return [1, -1, 3, -3].includes(this.rotate);
|
|
7938
|
-
}
|
|
7939
|
-
},
|
|
7940
|
-
watch: {
|
|
7941
|
-
// 如果图片改变, 重新布局
|
|
7942
|
-
img() {
|
|
7943
|
-
this.checkedImg();
|
|
7944
|
-
},
|
|
7945
|
-
imgs(t) {
|
|
7946
|
-
t !== "" && this.reload();
|
|
7947
|
-
},
|
|
7948
|
-
cropW() {
|
|
7949
|
-
this.showPreview();
|
|
7950
|
-
},
|
|
7951
|
-
cropH() {
|
|
7952
|
-
this.showPreview();
|
|
7953
|
-
},
|
|
7954
|
-
cropOffsertX() {
|
|
7955
|
-
this.showPreview();
|
|
7956
|
-
},
|
|
7957
|
-
cropOffsertY() {
|
|
7958
|
-
this.showPreview();
|
|
7959
|
-
},
|
|
7960
|
-
scale(t, e) {
|
|
7961
|
-
this.showPreview();
|
|
7962
|
-
},
|
|
7963
|
-
x() {
|
|
7964
|
-
this.showPreview();
|
|
7965
|
-
},
|
|
7966
|
-
y() {
|
|
7967
|
-
this.showPreview();
|
|
7968
|
-
},
|
|
7969
|
-
autoCrop(t) {
|
|
7970
|
-
t && this.goAutoCrop();
|
|
7971
|
-
},
|
|
7972
|
-
// 修改了自动截图框
|
|
7973
|
-
autoCropWidth() {
|
|
7974
|
-
this.autoCrop && this.goAutoCrop();
|
|
7975
|
-
},
|
|
7976
|
-
autoCropHeight() {
|
|
7977
|
-
this.autoCrop && this.goAutoCrop();
|
|
7978
|
-
},
|
|
7979
|
-
mode() {
|
|
7980
|
-
this.checkedImg();
|
|
7981
|
-
},
|
|
7982
|
-
rotate() {
|
|
7983
|
-
this.showPreview(), this.autoCrop ? this.goAutoCrop(this.cropW, this.cropH) : (this.cropW > 0 || this.cropH > 0) && this.goAutoCrop(this.cropW, this.cropH);
|
|
7984
|
-
}
|
|
7985
|
-
},
|
|
7986
|
-
methods: {
|
|
7987
|
-
getVersion(t) {
|
|
7988
|
-
var e = navigator.userAgent.split(" "), i = "";
|
|
7989
|
-
let s = 0;
|
|
7990
|
-
const r = new RegExp(t, "i");
|
|
7991
|
-
for (var o = 0; o < e.length; o++)
|
|
7992
|
-
r.test(e[o]) && (i = e[o]);
|
|
7993
|
-
return i ? s = i.split("/")[1].split(".") : s = ["0", "0", "0"], s;
|
|
7994
|
-
},
|
|
7995
|
-
checkOrientationImage(t, e, i, s) {
|
|
7996
|
-
if (this.getVersion("chrome")[0] >= 81)
|
|
7997
|
-
e = -1;
|
|
7998
|
-
else if (this.getVersion("safari")[0] >= 605) {
|
|
7999
|
-
const h = this.getVersion("version");
|
|
8000
|
-
h[0] > 13 && h[1] > 1 && (e = -1);
|
|
8001
|
-
} else {
|
|
8002
|
-
const h = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
|
|
8003
|
-
if (h) {
|
|
8004
|
-
let a = h[1];
|
|
8005
|
-
a = a.split("_"), (a[0] > 13 || a[0] >= 13 && a[1] >= 4) && (e = -1);
|
|
8006
|
-
}
|
|
8007
|
-
}
|
|
8008
|
-
let r = document.createElement("canvas"), o = r.getContext("2d");
|
|
8009
|
-
switch (o.save(), e) {
|
|
8010
|
-
case 2:
|
|
8011
|
-
r.width = i, r.height = s, o.translate(i, 0), o.scale(-1, 1);
|
|
8012
|
-
break;
|
|
8013
|
-
case 3:
|
|
8014
|
-
r.width = i, r.height = s, o.translate(i / 2, s / 2), o.rotate(180 * Math.PI / 180), o.translate(-i / 2, -s / 2);
|
|
8015
|
-
break;
|
|
8016
|
-
case 4:
|
|
8017
|
-
r.width = i, r.height = s, o.translate(0, s), o.scale(1, -1);
|
|
8018
|
-
break;
|
|
8019
|
-
case 5:
|
|
8020
|
-
r.height = i, r.width = s, o.rotate(0.5 * Math.PI), o.scale(1, -1);
|
|
8021
|
-
break;
|
|
8022
|
-
case 6:
|
|
8023
|
-
r.width = s, r.height = i, o.translate(s / 2, i / 2), o.rotate(90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
|
|
8024
|
-
break;
|
|
8025
|
-
case 7:
|
|
8026
|
-
r.height = i, r.width = s, o.rotate(0.5 * Math.PI), o.translate(i, -s), o.scale(-1, 1);
|
|
8027
|
-
break;
|
|
8028
|
-
case 8:
|
|
8029
|
-
r.height = i, r.width = s, o.translate(s / 2, i / 2), o.rotate(-90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
|
|
8030
|
-
break;
|
|
8031
|
-
default:
|
|
8032
|
-
r.width = i, r.height = s;
|
|
8033
|
-
}
|
|
8034
|
-
o.drawImage(t, 0, 0, i, s), o.restore(), r.toBlob(
|
|
8035
|
-
(h) => {
|
|
8036
|
-
let a = URL.createObjectURL(h);
|
|
8037
|
-
URL.revokeObjectURL(this.imgs), this.imgs = a;
|
|
8038
|
-
},
|
|
8039
|
-
"image/" + this.outputType,
|
|
8040
|
-
1
|
|
8041
|
-
);
|
|
8042
|
-
},
|
|
8043
|
-
// checkout img
|
|
8044
|
-
checkedImg() {
|
|
8045
|
-
if (this.img === null || this.img === "") {
|
|
8046
|
-
this.imgs = "", this.clearCrop();
|
|
8047
|
-
return;
|
|
8048
|
-
}
|
|
8049
|
-
this.loading = true, this.scale = 1, this.rotate = 0, this.imgIsQqualCrop = false, this.clearCrop();
|
|
8050
|
-
let t = new Image();
|
|
8051
|
-
if (t.onload = () => {
|
|
8052
|
-
if (this.img === "")
|
|
8053
|
-
return this.$emit("img-load", new Error("图片不能为空")), false;
|
|
8054
|
-
let i = t.width, s = t.height;
|
|
8055
|
-
Y.getData(t).then((r) => {
|
|
8056
|
-
this.orientation = r.orientation || 1;
|
|
8057
|
-
let o = Number(this.maxImgSize);
|
|
8058
|
-
if (!this.orientation && i < o & s < o) {
|
|
8059
|
-
this.imgs = this.img;
|
|
8060
|
-
return;
|
|
8061
|
-
}
|
|
8062
|
-
i > o && (s = s / i * o, i = o), s > o && (i = i / s * o, s = o), this.checkOrientationImage(t, this.orientation, i, s);
|
|
8063
|
-
}).catch((r) => {
|
|
8064
|
-
this.$emit("img-load", "error"), this.$emit("img-load-error", r);
|
|
8065
|
-
});
|
|
8066
|
-
}, t.onerror = (i) => {
|
|
8067
|
-
this.$emit("img-load", "error"), this.$emit("img-load-error", i);
|
|
8068
|
-
}, this.img.substr(0, 4) !== "data" && (t.crossOrigin = ""), this.isIE) {
|
|
8069
|
-
var e = new XMLHttpRequest();
|
|
8070
|
-
e.onload = function() {
|
|
8071
|
-
var i = URL.createObjectURL(this.response);
|
|
8072
|
-
t.src = i;
|
|
8073
|
-
}, e.open("GET", this.img, true), e.responseType = "blob", e.send();
|
|
8074
|
-
} else
|
|
8075
|
-
t.src = this.img;
|
|
8076
|
-
},
|
|
8077
|
-
// 当按下鼠标键
|
|
8078
|
-
startMove(t) {
|
|
8079
|
-
if (t.preventDefault(), this.move && !this.crop) {
|
|
8080
|
-
if (!this.canMove)
|
|
8081
|
-
return false;
|
|
8082
|
-
this.moveX = ("clientX" in t ? t.clientX : t.touches[0].clientX) - this.x, this.moveY = ("clientY" in t ? t.clientY : t.touches[0].clientY) - this.y, t.touches ? (window.addEventListener("touchmove", this.moveImg), window.addEventListener("touchend", this.leaveImg), t.touches.length == 2 && (this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale))) : (window.addEventListener("mousemove", this.moveImg), window.addEventListener("mouseup", this.leaveImg)), this.$emit("img-moving", {
|
|
8083
|
-
moving: true,
|
|
8084
|
-
axis: this.getImgAxis()
|
|
8085
|
-
});
|
|
8086
|
-
} else
|
|
8087
|
-
this.cropping = true, window.addEventListener("mousemove", this.createCrop), window.addEventListener("mouseup", this.endCrop), window.addEventListener("touchmove", this.createCrop), window.addEventListener("touchend", this.endCrop), this.cropOffsertX = t.offsetX ? t.offsetX : t.touches[0].pageX - this.$refs.cropper.offsetLeft, this.cropOffsertY = t.offsetY ? t.offsetY : t.touches[0].pageY - this.$refs.cropper.offsetTop, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.cropW = 0, this.cropH = 0;
|
|
8088
|
-
},
|
|
8089
|
-
// 移动端缩放
|
|
8090
|
-
touchScale(t) {
|
|
8091
|
-
t.preventDefault();
|
|
8092
|
-
let e = this.scale;
|
|
8093
|
-
var i = {
|
|
8094
|
-
x: this.touches[0].clientX,
|
|
8095
|
-
y: this.touches[0].clientY
|
|
8096
|
-
}, s = {
|
|
8097
|
-
x: t.touches[0].clientX,
|
|
8098
|
-
y: t.touches[0].clientY
|
|
8099
|
-
}, r = {
|
|
8100
|
-
x: this.touches[1].clientX,
|
|
8101
|
-
y: this.touches[1].clientY
|
|
8102
|
-
}, o = {
|
|
8103
|
-
x: t.touches[1].clientX,
|
|
8104
|
-
y: t.touches[1].clientY
|
|
8105
|
-
}, h = Math.sqrt(
|
|
8106
|
-
Math.pow(i.x - r.x, 2) + Math.pow(i.y - r.y, 2)
|
|
8107
|
-
), a = Math.sqrt(
|
|
8108
|
-
Math.pow(s.x - o.x, 2) + Math.pow(s.y - o.y, 2)
|
|
8109
|
-
), n = a - h, c = 1;
|
|
8110
|
-
c = c / this.trueWidth > c / this.trueHeight ? c / this.trueHeight : c / this.trueWidth, c = c > 0.1 ? 0.1 : c;
|
|
8111
|
-
var l = c * n;
|
|
8112
|
-
if (!this.touchNow) {
|
|
8113
|
-
if (this.touchNow = true, n > 0 ? e += Math.abs(l) : n < 0 && e > Math.abs(l) && (e -= Math.abs(l)), this.touches = t.touches, setTimeout(() => {
|
|
8114
|
-
this.touchNow = false;
|
|
8115
|
-
}, 8), !this.checkoutImgAxis(this.x, this.y, e))
|
|
8116
|
-
return false;
|
|
8117
|
-
this.scale = e;
|
|
8118
|
-
}
|
|
8119
|
-
},
|
|
8120
|
-
cancelTouchScale(t) {
|
|
8121
|
-
window.removeEventListener("touchmove", this.touchScale);
|
|
8122
|
-
},
|
|
8123
|
-
// 移动图片
|
|
8124
|
-
moveImg(t) {
|
|
8125
|
-
if (t.preventDefault(), t.touches && t.touches.length === 2)
|
|
8126
|
-
return this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale), window.removeEventListener("touchmove", this.moveImg), false;
|
|
8127
|
-
let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, s, r;
|
|
8128
|
-
s = e - this.moveX, r = i - this.moveY, this.$nextTick(() => {
|
|
8129
|
-
if (this.centerBox) {
|
|
8130
|
-
let o = this.getImgAxis(s, r, this.scale), h = this.getCropAxis(), a = this.trueHeight * this.scale, n = this.trueWidth * this.scale, c, l, f, p;
|
|
8131
|
-
switch (this.rotate) {
|
|
8132
|
-
case 1:
|
|
8133
|
-
case -1:
|
|
8134
|
-
case 3:
|
|
8135
|
-
case -3:
|
|
8136
|
-
c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2 + (a - n) / 2, l = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2 + (n - a) / 2, f = c - a + this.cropW, p = l - n + this.cropH;
|
|
8137
|
-
break;
|
|
8138
|
-
default:
|
|
8139
|
-
c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2, l = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2, f = c - n + this.cropW, p = l - a + this.cropH;
|
|
8140
|
-
break;
|
|
8141
|
-
}
|
|
8142
|
-
o.x1 >= h.x1 && (s = c), o.y1 >= h.y1 && (r = l), o.x2 <= h.x2 && (s = f), o.y2 <= h.y2 && (r = p);
|
|
8143
|
-
}
|
|
8144
|
-
this.x = s, this.y = r, this.$emit("img-moving", {
|
|
8145
|
-
moving: true,
|
|
8146
|
-
axis: this.getImgAxis()
|
|
8147
|
-
});
|
|
8148
|
-
});
|
|
8149
|
-
},
|
|
8150
|
-
// 移动图片结束
|
|
8151
|
-
leaveImg(t) {
|
|
8152
|
-
window.removeEventListener("mousemove", this.moveImg), window.removeEventListener("touchmove", this.moveImg), window.removeEventListener("mouseup", this.leaveImg), window.removeEventListener("touchend", this.leaveImg), this.$emit("img-moving", {
|
|
8153
|
-
moving: false,
|
|
8154
|
-
axis: this.getImgAxis()
|
|
8155
|
-
});
|
|
8156
|
-
},
|
|
8157
|
-
// 缩放图片
|
|
8158
|
-
scaleImg() {
|
|
8159
|
-
this.canScale && window.addEventListener(this.support, this.changeSize, this.passive);
|
|
8160
|
-
},
|
|
8161
|
-
// 移出框
|
|
8162
|
-
cancelScale() {
|
|
8163
|
-
this.canScale && window.removeEventListener(this.support, this.changeSize);
|
|
8164
|
-
},
|
|
8165
|
-
// 改变大小函数
|
|
8166
|
-
changeSize(t) {
|
|
8167
|
-
t.preventDefault();
|
|
8168
|
-
let e = this.scale;
|
|
8169
|
-
var i = t.deltaY || t.wheelDelta, s = navigator.userAgent.indexOf("Firefox");
|
|
8170
|
-
i = s > 0 ? i * 30 : i, this.isIE && (i = -i);
|
|
8171
|
-
var r = this.coe;
|
|
8172
|
-
r = r / this.trueWidth > r / this.trueHeight ? r / this.trueHeight : r / this.trueWidth;
|
|
8173
|
-
var o = r * i;
|
|
8174
|
-
o < 0 ? e += Math.abs(o) : e > Math.abs(o) && (e -= Math.abs(o));
|
|
8175
|
-
let h = o < 0 ? "add" : "reduce";
|
|
8176
|
-
if (h !== this.coeStatus && (this.coeStatus = h, this.coe = 0.2), this.scaling || (this.scalingSet = setTimeout(() => {
|
|
8177
|
-
this.scaling = false, this.coe = this.coe += 0.01;
|
|
8178
|
-
}, 50)), this.scaling = true, !this.checkoutImgAxis(this.x, this.y, e))
|
|
8179
|
-
return false;
|
|
8180
|
-
this.scale = e;
|
|
8181
|
-
},
|
|
8182
|
-
// 修改图片大小函数
|
|
8183
|
-
changeScale(t) {
|
|
8184
|
-
let e = this.scale;
|
|
8185
|
-
t = t || 1;
|
|
8186
|
-
var i = 20;
|
|
8187
|
-
if (i = i / this.trueWidth > i / this.trueHeight ? i / this.trueHeight : i / this.trueWidth, t = t * i, t > 0 ? e += Math.abs(t) : e > Math.abs(t) && (e -= Math.abs(t)), !this.checkoutImgAxis(this.x, this.y, e))
|
|
8188
|
-
return false;
|
|
8189
|
-
this.scale = e;
|
|
8190
|
-
},
|
|
8191
|
-
// 创建截图框
|
|
8192
|
-
createCrop(t) {
|
|
8193
|
-
t.preventDefault();
|
|
8194
|
-
var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
|
|
8195
|
-
this.$nextTick(() => {
|
|
8196
|
-
var s = e - this.cropX, r = i - this.cropY;
|
|
8197
|
-
if (s > 0 ? (this.cropW = s + this.cropChangeX > this.w ? this.w - this.cropChangeX : s, this.cropOffsertX = this.cropChangeX) : (this.cropW = this.w - this.cropChangeX + Math.abs(s) > this.w ? this.cropChangeX : Math.abs(s), this.cropOffsertX = this.cropChangeX + s > 0 ? this.cropChangeX + s : 0), !this.fixed)
|
|
8198
|
-
r > 0 ? (this.cropH = r + this.cropChangeY > this.h ? this.h - this.cropChangeY : r, this.cropOffsertY = this.cropChangeY) : (this.cropH = this.h - this.cropChangeY + Math.abs(r) > this.h ? this.cropChangeY : Math.abs(r), this.cropOffsertY = this.cropChangeY + r > 0 ? this.cropChangeY + r : 0);
|
|
8199
|
-
else {
|
|
8200
|
-
var o = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
|
|
8201
|
-
o + this.cropOffsertY > this.h ? (this.cropH = this.h - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], s > 0 ? this.cropOffsertX = this.cropChangeX : this.cropOffsertX = this.cropChangeX - this.cropW) : this.cropH = o, this.cropOffsertY = this.cropOffsertY;
|
|
8202
|
-
}
|
|
8203
|
-
});
|
|
8204
|
-
},
|
|
8205
|
-
// 改变截图框大小
|
|
8206
|
-
changeCropSize(t, e, i, s, r) {
|
|
8207
|
-
t.preventDefault(), window.addEventListener("mousemove", this.changeCropNow), window.addEventListener("mouseup", this.changeCropEnd), window.addEventListener("touchmove", this.changeCropNow), window.addEventListener("touchend", this.changeCropEnd), this.canChangeX = e, this.canChangeY = i, this.changeCropTypeX = s, this.changeCropTypeY = r, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropOldW = this.cropW, this.cropOldH = this.cropH, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.fixed && this.canChangeX && this.canChangeY && (this.canChangeY = 0), this.$emit("change-crop-size", {
|
|
8208
|
-
width: this.cropW,
|
|
8209
|
-
height: this.cropH
|
|
8210
|
-
});
|
|
8211
|
-
},
|
|
8212
|
-
// 正在改变
|
|
8213
|
-
changeCropNow(t) {
|
|
8214
|
-
t.preventDefault();
|
|
8215
|
-
var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
|
|
8216
|
-
let s = this.w, r = this.h, o = 0, h = 0;
|
|
8217
|
-
if (this.centerBox) {
|
|
8218
|
-
let c = this.getImgAxis(), l = c.x2, f = c.y2;
|
|
8219
|
-
o = c.x1 > 0 ? c.x1 : 0, h = c.y1 > 0 ? c.y1 : 0, s > l && (s = l), r > f && (r = f);
|
|
8220
|
-
}
|
|
8221
|
-
const [a, n] = this.checkCropLimitSize();
|
|
8222
|
-
this.$nextTick(() => {
|
|
8223
|
-
var c = e - this.cropX, l = i - this.cropY;
|
|
8224
|
-
if (this.canChangeX && (this.changeCropTypeX === 1 ? this.cropOldW - c < a ? (this.cropW = a, this.cropOffsertX = this.cropOldW + this.cropChangeX - o - a) : this.cropOldW - c > 0 ? (this.cropW = s - this.cropChangeX - c <= s - o ? this.cropOldW - c : this.cropOldW + this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX - c <= s - o ? this.cropChangeX + c : o) : (this.cropW = Math.abs(c) + this.cropChangeX <= s ? Math.abs(c) - this.cropOldW : s - this.cropOldW - this.cropChangeX, this.cropOffsertX = this.cropChangeX + this.cropOldW) : this.changeCropTypeX === 2 && (this.cropOldW + c < a ? this.cropW = a : this.cropOldW + c > 0 ? (this.cropW = this.cropOldW + c + this.cropOffsertX <= s ? this.cropOldW + c : s - this.cropOffsertX, this.cropOffsertX = this.cropChangeX) : (this.cropW = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? Math.abs(c + this.cropOldW) : this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? this.cropChangeX - Math.abs(c + this.cropOldW) : o))), this.canChangeY && (this.changeCropTypeY === 1 ? this.cropOldH - l < n ? (this.cropH = n, this.cropOffsertY = this.cropOldH + this.cropChangeY - h - n) : this.cropOldH - l > 0 ? (this.cropH = r - this.cropChangeY - l <= r - h ? this.cropOldH - l : this.cropOldH + this.cropChangeY - h, this.cropOffsertY = r - this.cropChangeY - l <= r - h ? this.cropChangeY + l : h) : (this.cropH = Math.abs(l) + this.cropChangeY <= r ? Math.abs(l) - this.cropOldH : r - this.cropOldH - this.cropChangeY, this.cropOffsertY = this.cropChangeY + this.cropOldH) : this.changeCropTypeY === 2 && (this.cropOldH + l < n ? this.cropH = n : this.cropOldH + l > 0 ? (this.cropH = this.cropOldH + l + this.cropOffsertY <= r ? this.cropOldH + l : r - this.cropOffsertY, this.cropOffsertY = this.cropChangeY) : (this.cropH = r - this.cropChangeY + Math.abs(l + this.cropOldH) <= r - h ? Math.abs(l + this.cropOldH) : this.cropChangeY - h, this.cropOffsertY = r - this.cropChangeY + Math.abs(l + this.cropOldH) <= r - h ? this.cropChangeY - Math.abs(l + this.cropOldH) : h))), this.canChangeX && this.fixed) {
|
|
8225
|
-
var f = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
|
|
8226
|
-
f < n ? (this.cropH = n, this.cropW = this.fixedNumber[0] * n / this.fixedNumber[1], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : f + this.cropOffsertY > r ? (this.cropH = r - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : this.cropH = f;
|
|
8227
|
-
}
|
|
8228
|
-
if (this.canChangeY && this.fixed) {
|
|
8229
|
-
var p = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
|
|
8230
|
-
p < a ? (this.cropW = a, this.cropH = this.fixedNumber[1] * a / this.fixedNumber[0], this.cropOffsertY = this.cropOldH + this.cropChangeY - this.cropH) : p + this.cropOffsertX > s ? (this.cropW = s - this.cropOffsertX, this.cropH = this.cropW / this.fixedNumber[0] * this.fixedNumber[1]) : this.cropW = p;
|
|
8231
|
-
}
|
|
8232
|
-
});
|
|
8233
|
-
},
|
|
8234
|
-
checkCropLimitSize() {
|
|
8235
|
-
let { cropW: t, cropH: e, limitMinSize: i } = this, s = new Array();
|
|
8236
|
-
return Array.isArray(i) ? s = i : s = [i, i], t = parseFloat(s[0]), e = parseFloat(s[1]), [t, e];
|
|
8237
|
-
},
|
|
8238
|
-
// 结束改变
|
|
8239
|
-
changeCropEnd(t) {
|
|
8240
|
-
window.removeEventListener("mousemove", this.changeCropNow), window.removeEventListener("mouseup", this.changeCropEnd), window.removeEventListener("touchmove", this.changeCropNow), window.removeEventListener("touchend", this.changeCropEnd);
|
|
8241
|
-
},
|
|
8242
|
-
// 根据比例x/y,最小宽度,最小高度,现有宽度,现有高度,得到应该有的宽度和高度
|
|
8243
|
-
calculateSize(t, e, i, s, r, o) {
|
|
8244
|
-
const h = t / e;
|
|
8245
|
-
let a = r, n = o;
|
|
8246
|
-
return a < i && (a = i, n = Math.ceil(a / h)), n < s && (n = s, a = Math.ceil(n * h), a < i && (a = i, n = Math.ceil(a / h))), a < r && (a = r, n = Math.ceil(a / h)), n < o && (n = o, a = Math.ceil(n * h)), { width: a, height: n };
|
|
8247
|
-
},
|
|
8248
|
-
// 创建完成
|
|
8249
|
-
endCrop() {
|
|
8250
|
-
this.cropW === 0 && this.cropH === 0 && (this.cropping = false);
|
|
8251
|
-
let [t, e] = this.checkCropLimitSize();
|
|
8252
|
-
const { width: i, height: s } = this.fixed ? this.calculateSize(
|
|
8253
|
-
this.fixedNumber[0],
|
|
8254
|
-
this.fixedNumber[1],
|
|
8255
|
-
t,
|
|
8256
|
-
e,
|
|
8257
|
-
this.cropW,
|
|
8258
|
-
this.cropH
|
|
8259
|
-
) : { width: t, height: e };
|
|
8260
|
-
i > this.cropW && (this.cropW = i, this.cropOffsertX + i > this.w && (this.cropOffsertX = this.w - i)), s > this.cropH && (this.cropH = s, this.cropOffsertY + s > this.h && (this.cropOffsertY = this.h - s)), window.removeEventListener("mousemove", this.createCrop), window.removeEventListener("mouseup", this.endCrop), window.removeEventListener("touchmove", this.createCrop), window.removeEventListener("touchend", this.endCrop);
|
|
8261
|
-
},
|
|
8262
|
-
// 开始截图
|
|
8263
|
-
startCrop() {
|
|
8264
|
-
this.crop = true;
|
|
8265
|
-
},
|
|
8266
|
-
// 停止截图
|
|
8267
|
-
stopCrop() {
|
|
8268
|
-
this.crop = false;
|
|
8269
|
-
},
|
|
8270
|
-
// 清除截图
|
|
8271
|
-
clearCrop() {
|
|
8272
|
-
this.cropping = false, this.cropW = 0, this.cropH = 0;
|
|
8273
|
-
},
|
|
8274
|
-
// 截图移动
|
|
8275
|
-
cropMove(t) {
|
|
8276
|
-
if (t.preventDefault(), !this.canMoveBox)
|
|
8277
|
-
return this.crop = false, this.startMove(t), false;
|
|
8278
|
-
if (t.touches && t.touches.length === 2)
|
|
8279
|
-
return this.crop = false, this.startMove(t), this.leaveCrop(), false;
|
|
8280
|
-
window.addEventListener("mousemove", this.moveCrop), window.addEventListener("mouseup", this.leaveCrop), window.addEventListener("touchmove", this.moveCrop), window.addEventListener("touchend", this.leaveCrop);
|
|
8281
|
-
let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, s, r;
|
|
8282
|
-
s = e - this.cropOffsertX, r = i - this.cropOffsertY, this.cropX = s, this.cropY = r, this.$emit("crop-moving", {
|
|
8283
|
-
moving: true,
|
|
8284
|
-
axis: this.getCropAxis()
|
|
8285
|
-
});
|
|
8286
|
-
},
|
|
8287
|
-
moveCrop(t, e) {
|
|
8288
|
-
let i = 0, s = 0;
|
|
8289
|
-
t && (t.preventDefault(), i = "clientX" in t ? t.clientX : t.touches[0].clientX, s = "clientY" in t ? t.clientY : t.touches[0].clientY), this.$nextTick(() => {
|
|
8290
|
-
let r, o, h = i - this.cropX, a = s - this.cropY;
|
|
8291
|
-
if (e && (h = this.cropOffsertX, a = this.cropOffsertY), h <= 0 ? r = 0 : h + this.cropW > this.w ? r = this.w - this.cropW : r = h, a <= 0 ? o = 0 : a + this.cropH > this.h ? o = this.h - this.cropH : o = a, this.centerBox) {
|
|
8292
|
-
let n = this.getImgAxis();
|
|
8293
|
-
r <= n.x1 && (r = n.x1), r + this.cropW > n.x2 && (r = n.x2 - this.cropW), o <= n.y1 && (o = n.y1), o + this.cropH > n.y2 && (o = n.y2 - this.cropH);
|
|
8294
|
-
}
|
|
8295
|
-
this.cropOffsertX = r, this.cropOffsertY = o, this.$emit("crop-moving", {
|
|
8296
|
-
moving: true,
|
|
8297
|
-
axis: this.getCropAxis()
|
|
8298
|
-
});
|
|
8299
|
-
});
|
|
8300
|
-
},
|
|
8301
|
-
// 算出不同场景下面 图片相对于外层容器的坐标轴
|
|
8302
|
-
getImgAxis(t, e, i) {
|
|
8303
|
-
t = t || this.x, e = e || this.y, i = i || this.scale;
|
|
8304
|
-
let s = {
|
|
8305
|
-
x1: 0,
|
|
8306
|
-
x2: 0,
|
|
8307
|
-
y1: 0,
|
|
8308
|
-
y2: 0
|
|
8309
|
-
}, r = this.trueWidth * i, o = this.trueHeight * i;
|
|
8310
|
-
switch (this.rotate) {
|
|
8311
|
-
case 0:
|
|
8312
|
-
s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
|
|
8313
|
-
break;
|
|
8314
|
-
case 1:
|
|
8315
|
-
case -1:
|
|
8316
|
-
case 3:
|
|
8317
|
-
case -3:
|
|
8318
|
-
s.x1 = t + this.trueWidth * (1 - i) / 2 + (r - o) / 2, s.x2 = s.x1 + this.trueHeight * i, s.y1 = e + this.trueHeight * (1 - i) / 2 + (o - r) / 2, s.y2 = s.y1 + this.trueWidth * i;
|
|
8319
|
-
break;
|
|
8320
|
-
default:
|
|
8321
|
-
s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
|
|
8322
|
-
break;
|
|
8323
|
-
}
|
|
8324
|
-
return s;
|
|
8325
|
-
},
|
|
8326
|
-
// 获取截图框的坐标轴
|
|
8327
|
-
getCropAxis() {
|
|
8328
|
-
let t = {
|
|
8329
|
-
x1: 0,
|
|
8330
|
-
x2: 0,
|
|
8331
|
-
y1: 0,
|
|
8332
|
-
y2: 0
|
|
8333
|
-
};
|
|
8334
|
-
return t.x1 = this.cropOffsertX, t.x2 = t.x1 + this.cropW, t.y1 = this.cropOffsertY, t.y2 = t.y1 + this.cropH, t;
|
|
8335
|
-
},
|
|
8336
|
-
leaveCrop(t) {
|
|
8337
|
-
window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.$emit("crop-moving", {
|
|
8338
|
-
moving: false,
|
|
8339
|
-
axis: this.getCropAxis()
|
|
8340
|
-
});
|
|
8341
|
-
},
|
|
8342
|
-
getCropChecked(t) {
|
|
8343
|
-
let e = document.createElement("canvas"), i = e.getContext("2d"), s = new Image(), r = this.rotate, o = this.trueWidth, h = this.trueHeight, a = this.cropOffsertX, n = this.cropOffsertY;
|
|
8344
|
-
s.onload = () => {
|
|
8345
|
-
if (this.cropW !== 0) {
|
|
8346
|
-
let p = 1;
|
|
8347
|
-
this.high & !this.full && (p = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (p = Math.abs(Number(this.enlarge)));
|
|
8348
|
-
let d = this.cropW * p, C = this.cropH * p, u = o * this.scale * p, g = h * this.scale * p, m = (this.x - a + this.trueWidth * (1 - this.scale) / 2) * p, v = (this.y - n + this.trueHeight * (1 - this.scale) / 2) * p;
|
|
8349
|
-
switch (f(d, C), i.save(), r) {
|
|
8350
|
-
case 0:
|
|
8351
|
-
this.full ? (f(d / this.scale, C / this.scale), i.drawImage(
|
|
8352
|
-
s,
|
|
8353
|
-
m / this.scale,
|
|
8354
|
-
v / this.scale,
|
|
8355
|
-
u / this.scale,
|
|
8356
|
-
g / this.scale
|
|
8357
|
-
)) : i.drawImage(s, m, v, u, g);
|
|
8358
|
-
break;
|
|
8359
|
-
case 1:
|
|
8360
|
-
case -3:
|
|
8361
|
-
this.full ? (f(d / this.scale, C / this.scale), m = m / this.scale + (u / this.scale - g / this.scale) / 2, v = v / this.scale + (g / this.scale - u / this.scale) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(
|
|
8362
|
-
s,
|
|
8363
|
-
v,
|
|
8364
|
-
-m - g / this.scale,
|
|
8365
|
-
u / this.scale,
|
|
8366
|
-
g / this.scale
|
|
8367
|
-
)) : (m = m + (u - g) / 2, v = v + (g - u) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, v, -m - g, u, g));
|
|
8368
|
-
break;
|
|
8369
|
-
case 2:
|
|
8370
|
-
case -2:
|
|
8371
|
-
this.full ? (f(d / this.scale, C / this.scale), i.rotate(r * 90 * Math.PI / 180), m = m / this.scale, v = v / this.scale, i.drawImage(
|
|
8372
|
-
s,
|
|
8373
|
-
-m - u / this.scale,
|
|
8374
|
-
-v - g / this.scale,
|
|
8375
|
-
u / this.scale,
|
|
8376
|
-
g / this.scale
|
|
8377
|
-
)) : (i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -m - u, -v - g, u, g));
|
|
8378
|
-
break;
|
|
8379
|
-
case 3:
|
|
8380
|
-
case -1:
|
|
8381
|
-
this.full ? (f(d / this.scale, C / this.scale), m = m / this.scale + (u / this.scale - g / this.scale) / 2, v = v / this.scale + (g / this.scale - u / this.scale) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(
|
|
8382
|
-
s,
|
|
8383
|
-
-v - u / this.scale,
|
|
8384
|
-
m,
|
|
8385
|
-
u / this.scale,
|
|
8386
|
-
g / this.scale
|
|
8387
|
-
)) : (m = m + (u - g) / 2, v = v + (g - u) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -v - u, m, u, g));
|
|
8388
|
-
break;
|
|
8389
|
-
default:
|
|
8390
|
-
this.full ? (f(d / this.scale, C / this.scale), i.drawImage(
|
|
8391
|
-
s,
|
|
8392
|
-
m / this.scale,
|
|
8393
|
-
v / this.scale,
|
|
8394
|
-
u / this.scale,
|
|
8395
|
-
g / this.scale
|
|
8396
|
-
)) : i.drawImage(s, m, v, u, g);
|
|
8397
|
-
}
|
|
8398
|
-
i.restore();
|
|
8399
|
-
} else {
|
|
8400
|
-
let p = o * this.scale, d = h * this.scale;
|
|
8401
|
-
switch (i.save(), r) {
|
|
8402
|
-
case 0:
|
|
8403
|
-
f(p, d), i.drawImage(s, 0, 0, p, d);
|
|
8404
|
-
break;
|
|
8405
|
-
case 1:
|
|
8406
|
-
case -3:
|
|
8407
|
-
f(d, p), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, 0, -d, p, d);
|
|
8408
|
-
break;
|
|
8409
|
-
case 2:
|
|
8410
|
-
case -2:
|
|
8411
|
-
f(p, d), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -p, -d, p, d);
|
|
8412
|
-
break;
|
|
8413
|
-
case 3:
|
|
8414
|
-
case -1:
|
|
8415
|
-
f(d, p), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -p, 0, p, d);
|
|
8416
|
-
break;
|
|
8417
|
-
default:
|
|
8418
|
-
f(p, d), i.drawImage(s, 0, 0, p, d);
|
|
8419
|
-
}
|
|
8420
|
-
i.restore();
|
|
8421
|
-
}
|
|
8422
|
-
t(e);
|
|
8423
|
-
};
|
|
8424
|
-
var c = this.img.substr(0, 4);
|
|
8425
|
-
c !== "data" && (s.crossOrigin = "Anonymous"), s.src = this.imgs;
|
|
8426
|
-
const l = this.fillColor;
|
|
8427
|
-
function f(p, d) {
|
|
8428
|
-
e.width = Math.round(p), e.height = Math.round(d), l && (i.fillStyle = l, i.fillRect(0, 0, e.width, e.height));
|
|
8429
|
-
}
|
|
8430
|
-
},
|
|
8431
|
-
// 获取转换成base64 的图片信息
|
|
8432
|
-
getCropData(t) {
|
|
8433
|
-
this.getCropChecked((e) => {
|
|
8434
|
-
t(e.toDataURL("image/" + this.outputType, this.outputSize));
|
|
8435
|
-
});
|
|
8436
|
-
},
|
|
8437
|
-
//canvas获取为blob对象
|
|
8438
|
-
getCropBlob(t) {
|
|
8439
|
-
this.getCropChecked((e) => {
|
|
8440
|
-
e.toBlob(
|
|
8441
|
-
(i) => t(i),
|
|
8442
|
-
"image/" + this.outputType,
|
|
8443
|
-
this.outputSize
|
|
8444
|
-
);
|
|
8445
|
-
});
|
|
8446
|
-
},
|
|
8447
|
-
// 自动预览函数
|
|
8448
|
-
showPreview() {
|
|
8449
|
-
if (this.isCanShow)
|
|
8450
|
-
this.isCanShow = false, setTimeout(() => {
|
|
8451
|
-
this.isCanShow = true;
|
|
8452
|
-
}, 16);
|
|
8453
|
-
else
|
|
8454
|
-
return false;
|
|
8455
|
-
let t = this.cropW, e = this.cropH, i = this.scale;
|
|
8456
|
-
var s = {};
|
|
8457
|
-
s.div = {
|
|
8458
|
-
width: `${t}px`,
|
|
8459
|
-
height: `${e}px`
|
|
8460
|
-
};
|
|
8461
|
-
let r = (this.x - this.cropOffsertX) / i, o = (this.y - this.cropOffsertY) / i, h = 0;
|
|
8462
|
-
s.w = t, s.h = e, s.url = this.imgs, s.img = {
|
|
8463
|
-
width: `${this.trueWidth}px`,
|
|
8464
|
-
height: `${this.trueHeight}px`,
|
|
8465
|
-
transform: `scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate * 90}deg)`
|
|
8466
|
-
}, s.html = `
|
|
8467
|
-
<div class="show-preview" style="width: ${s.w}px; height: ${s.h}px,; overflow: hidden">
|
|
8468
|
-
<div style="width: ${t}px; height: ${e}px">
|
|
8469
|
-
<img src=${s.url} style="width: ${this.trueWidth}px; height: ${this.trueHeight}px; transform:
|
|
8470
|
-
scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate * 90}deg)">
|
|
8471
|
-
</div>
|
|
8472
|
-
</div>`, this.$emit("real-time", s);
|
|
8473
|
-
},
|
|
8474
|
-
// reload 图片布局函数
|
|
8475
|
-
reload() {
|
|
8476
|
-
let t = new Image();
|
|
8477
|
-
t.onload = () => {
|
|
8478
|
-
this.w = parseFloat(window.getComputedStyle(this.$refs.cropper).width), this.h = parseFloat(window.getComputedStyle(this.$refs.cropper).height), this.trueWidth = t.width, this.trueHeight = t.height, this.original ? this.scale = 1 : this.scale = this.checkedMode(), this.$nextTick(() => {
|
|
8479
|
-
this.x = -(this.trueWidth - this.trueWidth * this.scale) / 2 + (this.w - this.trueWidth * this.scale) / 2, this.y = -(this.trueHeight - this.trueHeight * this.scale) / 2 + (this.h - this.trueHeight * this.scale) / 2, this.loading = false, this.autoCrop && this.goAutoCrop(), this.$emit("img-load", "success"), setTimeout(() => {
|
|
8480
|
-
this.showPreview();
|
|
8481
|
-
}, 20);
|
|
8482
|
-
});
|
|
8483
|
-
}, t.onerror = () => {
|
|
8484
|
-
this.$emit("img-load", "error");
|
|
8485
|
-
}, t.src = this.imgs;
|
|
8486
|
-
},
|
|
8487
|
-
// 背景布局的函数
|
|
8488
|
-
checkedMode() {
|
|
8489
|
-
let t = 1, e = this.trueWidth, i = this.trueHeight;
|
|
8490
|
-
const s = this.mode.split(" ");
|
|
8491
|
-
switch (s[0]) {
|
|
8492
|
-
case "contain":
|
|
8493
|
-
this.trueWidth > this.w && (t = this.w / this.trueWidth), this.trueHeight * t > this.h && (t = this.h / this.trueHeight);
|
|
8494
|
-
break;
|
|
8495
|
-
case "cover":
|
|
8496
|
-
e = this.w, t = e / this.trueWidth, i = i * t, i < this.h && (i = this.h, t = i / this.trueHeight);
|
|
8497
|
-
break;
|
|
8498
|
-
default:
|
|
8499
|
-
try {
|
|
8500
|
-
let r = s[0];
|
|
8501
|
-
if (r.search("px") !== -1) {
|
|
8502
|
-
r = r.replace("px", ""), e = parseFloat(r);
|
|
8503
|
-
const o = e / this.trueWidth;
|
|
8504
|
-
let h = 1, a = s[1];
|
|
8505
|
-
a.search("px") !== -1 && (a = a.replace("px", ""), i = parseFloat(a), h = i / this.trueHeight), t = Math.min(o, h);
|
|
8506
|
-
}
|
|
8507
|
-
if (r.search("%") !== -1 && (r = r.replace("%", ""), e = parseFloat(r) / 100 * this.w, t = e / this.trueWidth), s.length === 2 && r === "auto") {
|
|
8508
|
-
let o = s[1];
|
|
8509
|
-
o.search("px") !== -1 && (o = o.replace("px", ""), i = parseFloat(o), t = i / this.trueHeight), o.search("%") !== -1 && (o = o.replace("%", ""), i = parseFloat(o) / 100 * this.h, t = i / this.trueHeight);
|
|
8510
|
-
}
|
|
8511
|
-
} catch {
|
|
8512
|
-
t = 1;
|
|
8513
|
-
}
|
|
8514
|
-
}
|
|
8515
|
-
return t;
|
|
8516
|
-
},
|
|
8517
|
-
// 自动截图函数
|
|
8518
|
-
goAutoCrop(t, e) {
|
|
8519
|
-
if (this.imgs === "" || this.imgs === null)
|
|
8520
|
-
return;
|
|
8521
|
-
this.clearCrop(), this.cropping = true;
|
|
8522
|
-
let i = this.w, s = this.h;
|
|
8523
|
-
if (this.centerBox) {
|
|
8524
|
-
const h = Math.abs(this.rotate) % 2 > 0;
|
|
8525
|
-
let a = (h ? this.trueHeight : this.trueWidth) * this.scale, n = (h ? this.trueWidth : this.trueHeight) * this.scale;
|
|
8526
|
-
i = a < i ? a : i, s = n < s ? n : s;
|
|
8527
|
-
}
|
|
8528
|
-
var r = t || parseFloat(this.autoCropWidth), o = e || parseFloat(this.autoCropHeight);
|
|
8529
|
-
(r === 0 || o === 0) && (r = i * 0.8, o = s * 0.8), r = r > i ? i : r, o = o > s ? s : o, this.fixed && (o = r / this.fixedNumber[0] * this.fixedNumber[1]), o > this.h && (o = this.h, r = o / this.fixedNumber[1] * this.fixedNumber[0]), this.changeCrop(r, o);
|
|
8530
|
-
},
|
|
8531
|
-
// 手动改变截图框大小函数
|
|
8532
|
-
changeCrop(t, e) {
|
|
8533
|
-
if (this.centerBox) {
|
|
8534
|
-
let i = this.getImgAxis();
|
|
8535
|
-
t > i.x2 - i.x1 && (t = i.x2 - i.x1, e = t / this.fixedNumber[0] * this.fixedNumber[1]), e > i.y2 - i.y1 && (e = i.y2 - i.y1, t = e / this.fixedNumber[1] * this.fixedNumber[0]);
|
|
8536
|
-
}
|
|
8537
|
-
this.cropW = t, this.cropH = e, this.checkCropLimitSize(), this.$nextTick(() => {
|
|
8538
|
-
this.cropOffsertX = (this.w - this.cropW) / 2, this.cropOffsertY = (this.h - this.cropH) / 2, this.centerBox && this.moveCrop(null, true);
|
|
8539
|
-
});
|
|
8540
|
-
},
|
|
8541
|
-
// 重置函数, 恢复组件置初始状态
|
|
8542
|
-
refresh() {
|
|
8543
|
-
this.img, this.imgs = "", this.scale = 1, this.crop = false, this.rotate = 0, this.w = 0, this.h = 0, this.trueWidth = 0, this.trueHeight = 0, this.imgIsQqualCrop = false, this.clearCrop(), this.$nextTick(() => {
|
|
8544
|
-
this.checkedImg();
|
|
8545
|
-
});
|
|
8546
|
-
},
|
|
8547
|
-
// 向左边旋转
|
|
8548
|
-
rotateLeft() {
|
|
8549
|
-
this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;
|
|
8550
|
-
},
|
|
8551
|
-
// 向右边旋转
|
|
8552
|
-
rotateRight() {
|
|
8553
|
-
this.rotate = this.rotate >= 3 ? 0 : this.rotate + 1;
|
|
8554
|
-
},
|
|
8555
|
-
// 清除旋转
|
|
8556
|
-
rotateClear() {
|
|
8557
|
-
this.rotate = 0;
|
|
8558
|
-
},
|
|
8559
|
-
// 图片坐标点校验
|
|
8560
|
-
checkoutImgAxis(t, e, i) {
|
|
8561
|
-
t = t || this.x, e = e || this.y, i = i || this.scale;
|
|
8562
|
-
let s = true;
|
|
8563
|
-
if (this.centerBox) {
|
|
8564
|
-
let r = this.getImgAxis(t, e, i), o = this.getCropAxis();
|
|
8565
|
-
r.x1 >= o.x1 && (s = false), r.x2 <= o.x2 && (s = false), r.y1 >= o.y1 && (s = false), r.y2 <= o.y2 && (s = false), s || this.changeImgScale(r, o, i);
|
|
8566
|
-
}
|
|
8567
|
-
return s;
|
|
8568
|
-
},
|
|
8569
|
-
// 缩放图片,将图片坐标适配截图框坐标
|
|
8570
|
-
changeImgScale(t, e, i) {
|
|
8571
|
-
let s = this.trueWidth, r = this.trueHeight, o = s * i, h = r * i;
|
|
8572
|
-
if (o >= this.cropW && h >= this.cropH)
|
|
8573
|
-
this.scale = i;
|
|
8574
|
-
else {
|
|
8575
|
-
const a = this.cropW / s, n = this.cropH / r, c = this.cropH <= r * a ? a : n;
|
|
8576
|
-
this.scale = c, o = s * c, h = r * c;
|
|
8577
|
-
}
|
|
8578
|
-
this.imgIsQqualCrop || (t.x1 >= e.x1 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - h) / 2 : this.x = e.x1 - (s - o) / 2), t.x2 <= e.x2 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - h) / 2 - h + this.cropW : this.x = e.x2 - (s - o) / 2 - o), t.y1 >= e.y1 && (this.isRotateRightOrLeft ? this.y = e.y1 - (r - h) / 2 - (h - o) / 2 : this.y = e.y1 - (r - h) / 2), t.y2 <= e.y2 && (this.isRotateRightOrLeft ? this.y = e.y2 - (r - h) / 2 - (h - o) / 2 - o : this.y = e.y2 - (r - h) / 2 - h)), (o < this.cropW || h < this.cropH) && (this.imgIsQqualCrop = true);
|
|
8579
|
-
}
|
|
8580
|
-
},
|
|
8581
|
-
mounted() {
|
|
8582
|
-
this.support = "onwheel" in document.createElement("div") ? "wheel" : document.onmousewheel !== void 0 ? "mousewheel" : "DOMMouseScroll";
|
|
8583
|
-
let t = this;
|
|
8584
|
-
var e = navigator.userAgent;
|
|
8585
|
-
this.isIOS = !!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), HTMLCanvasElement.prototype.toBlob || Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
|
|
8586
|
-
value: function(i, s, r) {
|
|
8587
|
-
for (var o = atob(this.toDataURL(s, r).split(",")[1]), h = o.length, a = new Uint8Array(h), n = 0; n < h; n++)
|
|
8588
|
-
a[n] = o.charCodeAt(n);
|
|
8589
|
-
i(new Blob([a], { type: t.type || "image/png" }));
|
|
8590
|
-
}
|
|
8591
|
-
}), this.showPreview(), this.checkedImg();
|
|
8592
|
-
},
|
|
8593
|
-
unmounted() {
|
|
8594
|
-
window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.cancelScale();
|
|
8595
|
-
}
|
|
8596
|
-
}), A = {
|
|
8597
|
-
key: 0,
|
|
8598
|
-
class: "cropper-box"
|
|
8599
|
-
}, B = ["src"], P = { class: "cropper-view-box" }, R = ["src"], D = { key: 1 };
|
|
8600
|
-
function U(t, e, i, s, r, o) {
|
|
8601
|
-
return vue.openBlock(), vue.createElementBlock("div", {
|
|
8602
|
-
class: "vue-cropper",
|
|
8603
|
-
ref: "cropper",
|
|
8604
|
-
onMouseover: e[28] || (e[28] = (...h) => t.scaleImg && t.scaleImg(...h)),
|
|
8605
|
-
onMouseout: e[29] || (e[29] = (...h) => t.cancelScale && t.cancelScale(...h))
|
|
8606
|
-
}, [
|
|
8607
|
-
t.imgs ? (vue.openBlock(), vue.createElementBlock("div", A, [
|
|
8608
|
-
vue.withDirectives(vue.createElementVNode("div", {
|
|
8609
|
-
class: "cropper-box-canvas",
|
|
8610
|
-
style: vue.normalizeStyle({
|
|
8611
|
-
width: t.trueWidth + "px",
|
|
8612
|
-
height: t.trueHeight + "px",
|
|
8613
|
-
transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + t.x / t.scale + "px," + t.y / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
|
|
8614
|
-
})
|
|
8615
|
-
}, [
|
|
8616
|
-
vue.createElementVNode("img", {
|
|
8617
|
-
src: t.imgs,
|
|
8618
|
-
alt: "cropper-img",
|
|
8619
|
-
ref: "cropperImg"
|
|
8620
|
-
}, null, 8, B)
|
|
8621
|
-
], 4), [
|
|
8622
|
-
[vue.vShow, !t.loading]
|
|
8623
|
-
])
|
|
8624
|
-
])) : vue.createCommentVNode("", true),
|
|
8625
|
-
vue.createElementVNode("div", {
|
|
8626
|
-
class: vue.normalizeClass(["cropper-drag-box", { "cropper-move": t.move && !t.crop, "cropper-crop": t.crop, "cropper-modal": t.cropping }]),
|
|
8627
|
-
onMousedown: e[0] || (e[0] = (...h) => t.startMove && t.startMove(...h)),
|
|
8628
|
-
onTouchstart: e[1] || (e[1] = (...h) => t.startMove && t.startMove(...h))
|
|
8629
|
-
}, null, 34),
|
|
8630
|
-
vue.withDirectives(vue.createElementVNode("div", {
|
|
8631
|
-
class: "cropper-crop-box",
|
|
8632
|
-
style: vue.normalizeStyle({
|
|
8633
|
-
width: t.cropW + "px",
|
|
8634
|
-
height: t.cropH + "px",
|
|
8635
|
-
transform: "translate3d(" + t.cropOffsertX + "px," + t.cropOffsertY + "px,0)"
|
|
8636
|
-
})
|
|
8637
|
-
}, [
|
|
8638
|
-
vue.createElementVNode("span", P, [
|
|
8639
|
-
vue.createElementVNode("img", {
|
|
8640
|
-
style: vue.normalizeStyle({
|
|
8641
|
-
width: t.trueWidth + "px",
|
|
8642
|
-
height: t.trueHeight + "px",
|
|
8643
|
-
transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + (t.x - t.cropOffsertX) / t.scale + "px," + (t.y - t.cropOffsertY) / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
|
|
8644
|
-
}),
|
|
8645
|
-
src: t.imgs,
|
|
8646
|
-
alt: "cropper-img"
|
|
8647
|
-
}, null, 12, R)
|
|
8648
|
-
]),
|
|
8649
|
-
vue.createElementVNode("span", {
|
|
8650
|
-
class: "cropper-face cropper-move",
|
|
8651
|
-
onMousedown: e[2] || (e[2] = (...h) => t.cropMove && t.cropMove(...h)),
|
|
8652
|
-
onTouchstart: e[3] || (e[3] = (...h) => t.cropMove && t.cropMove(...h))
|
|
8653
|
-
}, null, 32),
|
|
8654
|
-
t.info ? (vue.openBlock(), vue.createElementBlock("span", {
|
|
8655
|
-
key: 0,
|
|
8656
|
-
class: "crop-info",
|
|
8657
|
-
style: vue.normalizeStyle({ top: t.cropInfo.top })
|
|
8658
|
-
}, vue.toDisplayString(t.cropInfo.width) + " × " + vue.toDisplayString(t.cropInfo.height), 5)) : vue.createCommentVNode("", true),
|
|
8659
|
-
t.fixedBox ? vue.createCommentVNode("", true) : (vue.openBlock(), vue.createElementBlock("span", D, [
|
|
8660
|
-
vue.createElementVNode("span", {
|
|
8661
|
-
class: "crop-line line-w",
|
|
8662
|
-
onMousedown: e[4] || (e[4] = (h) => t.changeCropSize(h, false, true, 0, 1)),
|
|
8663
|
-
onTouchstart: e[5] || (e[5] = (h) => t.changeCropSize(h, false, true, 0, 1))
|
|
8664
|
-
}, null, 32),
|
|
8665
|
-
vue.createElementVNode("span", {
|
|
8666
|
-
class: "crop-line line-a",
|
|
8667
|
-
onMousedown: e[6] || (e[6] = (h) => t.changeCropSize(h, true, false, 1, 0)),
|
|
8668
|
-
onTouchstart: e[7] || (e[7] = (h) => t.changeCropSize(h, true, false, 1, 0))
|
|
8669
|
-
}, null, 32),
|
|
8670
|
-
vue.createElementVNode("span", {
|
|
8671
|
-
class: "crop-line line-s",
|
|
8672
|
-
onMousedown: e[8] || (e[8] = (h) => t.changeCropSize(h, false, true, 0, 2)),
|
|
8673
|
-
onTouchstart: e[9] || (e[9] = (h) => t.changeCropSize(h, false, true, 0, 2))
|
|
8674
|
-
}, null, 32),
|
|
8675
|
-
vue.createElementVNode("span", {
|
|
8676
|
-
class: "crop-line line-d",
|
|
8677
|
-
onMousedown: e[10] || (e[10] = (h) => t.changeCropSize(h, true, false, 2, 0)),
|
|
8678
|
-
onTouchstart: e[11] || (e[11] = (h) => t.changeCropSize(h, true, false, 2, 0))
|
|
8679
|
-
}, null, 32),
|
|
8680
|
-
vue.createElementVNode("span", {
|
|
8681
|
-
class: "crop-point point1",
|
|
8682
|
-
onMousedown: e[12] || (e[12] = (h) => t.changeCropSize(h, true, true, 1, 1)),
|
|
8683
|
-
onTouchstart: e[13] || (e[13] = (h) => t.changeCropSize(h, true, true, 1, 1))
|
|
8684
|
-
}, null, 32),
|
|
8685
|
-
vue.createElementVNode("span", {
|
|
8686
|
-
class: "crop-point point2",
|
|
8687
|
-
onMousedown: e[14] || (e[14] = (h) => t.changeCropSize(h, false, true, 0, 1)),
|
|
8688
|
-
onTouchstart: e[15] || (e[15] = (h) => t.changeCropSize(h, false, true, 0, 1))
|
|
8689
|
-
}, null, 32),
|
|
8690
|
-
vue.createElementVNode("span", {
|
|
8691
|
-
class: "crop-point point3",
|
|
8692
|
-
onMousedown: e[16] || (e[16] = (h) => t.changeCropSize(h, true, true, 2, 1)),
|
|
8693
|
-
onTouchstart: e[17] || (e[17] = (h) => t.changeCropSize(h, true, true, 2, 1))
|
|
8694
|
-
}, null, 32),
|
|
8695
|
-
vue.createElementVNode("span", {
|
|
8696
|
-
class: "crop-point point4",
|
|
8697
|
-
onMousedown: e[18] || (e[18] = (h) => t.changeCropSize(h, true, false, 1, 0)),
|
|
8698
|
-
onTouchstart: e[19] || (e[19] = (h) => t.changeCropSize(h, true, false, 1, 0))
|
|
8699
|
-
}, null, 32),
|
|
8700
|
-
vue.createElementVNode("span", {
|
|
8701
|
-
class: "crop-point point5",
|
|
8702
|
-
onMousedown: e[20] || (e[20] = (h) => t.changeCropSize(h, true, false, 2, 0)),
|
|
8703
|
-
onTouchstart: e[21] || (e[21] = (h) => t.changeCropSize(h, true, false, 2, 0))
|
|
8704
|
-
}, null, 32),
|
|
8705
|
-
vue.createElementVNode("span", {
|
|
8706
|
-
class: "crop-point point6",
|
|
8707
|
-
onMousedown: e[22] || (e[22] = (h) => t.changeCropSize(h, true, true, 1, 2)),
|
|
8708
|
-
onTouchstart: e[23] || (e[23] = (h) => t.changeCropSize(h, true, true, 1, 2))
|
|
8709
|
-
}, null, 32),
|
|
8710
|
-
vue.createElementVNode("span", {
|
|
8711
|
-
class: "crop-point point7",
|
|
8712
|
-
onMousedown: e[24] || (e[24] = (h) => t.changeCropSize(h, false, true, 0, 2)),
|
|
8713
|
-
onTouchstart: e[25] || (e[25] = (h) => t.changeCropSize(h, false, true, 0, 2))
|
|
8714
|
-
}, null, 32),
|
|
8715
|
-
vue.createElementVNode("span", {
|
|
8716
|
-
class: "crop-point point8",
|
|
8717
|
-
onMousedown: e[26] || (e[26] = (h) => t.changeCropSize(h, true, true, 2, 2)),
|
|
8718
|
-
onTouchstart: e[27] || (e[27] = (h) => t.changeCropSize(h, true, true, 2, 2))
|
|
8719
|
-
}, null, 32)
|
|
8720
|
-
]))
|
|
8721
|
-
], 4), [
|
|
8722
|
-
[vue.vShow, t.cropping]
|
|
8723
|
-
])
|
|
8724
|
-
], 544);
|
|
8725
|
-
}
|
|
8726
|
-
const M = /* @__PURE__ */ $(z, [["render", U], ["__scopeId", "data-v-a742df44"]]);
|
|
8727
|
-
|
|
8728
7640
|
const imageUploadProProps = {
|
|
8729
7641
|
/**
|
|
8730
7642
|
* 已上传图片列表(用于回显)
|
|
@@ -9131,17 +8043,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9131
8043
|
}
|
|
9132
8044
|
});
|
|
9133
8045
|
return (_ctx, _cache) => {
|
|
9134
|
-
const
|
|
9135
|
-
const _component_el_upload = vue.resolveComponent("el-upload");
|
|
9136
|
-
const _component_el_image = vue.resolveComponent("el-image");
|
|
8046
|
+
const _component_vue_cropper = vue.resolveComponent("vue-cropper");
|
|
9137
8047
|
const _component_el_option = vue.resolveComponent("el-option");
|
|
9138
|
-
const _component_el_select = vue.resolveComponent("el-select");
|
|
9139
|
-
const _component_el_form_item = vue.resolveComponent("el-form-item");
|
|
9140
|
-
const _component_el_col = vue.resolveComponent("el-col");
|
|
9141
|
-
const _component_el_input_number = vue.resolveComponent("el-input-number");
|
|
9142
|
-
const _component_el_row = vue.resolveComponent("el-row");
|
|
9143
|
-
const _component_el_form = vue.resolveComponent("el-form");
|
|
9144
|
-
const _component_el_dialog = vue.resolveComponent("el-dialog");
|
|
9145
8048
|
return vue.openBlock(), vue.createElementBlock(
|
|
9146
8049
|
"div",
|
|
9147
8050
|
{
|
|
@@ -9149,7 +8052,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9149
8052
|
},
|
|
9150
8053
|
[
|
|
9151
8054
|
vue.createCommentVNode(" \u6838\u5FC3\u4E0A\u4F20\u533A\u57DF "),
|
|
9152
|
-
vue.createVNode(
|
|
8055
|
+
vue.createVNode(vue.unref(elementPlus.ElUpload), {
|
|
9153
8056
|
ref_key: "uploadRef",
|
|
9154
8057
|
ref: uploadRef,
|
|
9155
8058
|
class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "upload-container")),
|
|
@@ -9187,7 +8090,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9187
8090
|
)
|
|
9188
8091
|
]),
|
|
9189
8092
|
default: vue.withCtx(() => [
|
|
9190
|
-
vue.createVNode(
|
|
8093
|
+
vue.createVNode(vue.unref(elementPlus.ElButton), {
|
|
9191
8094
|
disabled: fileList.value.length === props.maxCount,
|
|
9192
8095
|
type: "primary"
|
|
9193
8096
|
}, {
|
|
@@ -9232,9 +8135,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9232
8135
|
class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "preview-img"))
|
|
9233
8136
|
},
|
|
9234
8137
|
[
|
|
9235
|
-
vue.createVNode(
|
|
8138
|
+
vue.createVNode(vue.unref(elementPlus.ElImage), {
|
|
9236
8139
|
src: item.url,
|
|
9237
|
-
"preview-src-list": previewList.value.map((i) => i.url),
|
|
8140
|
+
"preview-src-list": previewList.value.filter((i) => i.url).map((i) => i.url),
|
|
9238
8141
|
"preview-current-index": index,
|
|
9239
8142
|
fit: "cover"
|
|
9240
8143
|
}, null, 8, ["src", "preview-src-list", "preview-current-index"])
|
|
@@ -9249,7 +8152,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9249
8152
|
class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "preview-actions"))
|
|
9250
8153
|
},
|
|
9251
8154
|
[
|
|
9252
|
-
vue.createVNode(
|
|
8155
|
+
vue.createVNode(vue.unref(elementPlus.ElButton), {
|
|
9253
8156
|
type: "primary",
|
|
9254
8157
|
text: "",
|
|
9255
8158
|
size: "small",
|
|
@@ -9265,7 +8168,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9265
8168
|
_: 1
|
|
9266
8169
|
/* STABLE */
|
|
9267
8170
|
}, 8, ["onClick"]),
|
|
9268
|
-
vue.createVNode(
|
|
8171
|
+
vue.createVNode(vue.unref(elementPlus.ElButton), {
|
|
9269
8172
|
text: "",
|
|
9270
8173
|
size: "small",
|
|
9271
8174
|
type: "danger",
|
|
@@ -9295,7 +8198,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9295
8198
|
/* CLASS */
|
|
9296
8199
|
)) : vue.createCommentVNode("v-if", true),
|
|
9297
8200
|
vue.createCommentVNode(" \u88C1\u526A\u5F39\u7A97 "),
|
|
9298
|
-
vue.createVNode(
|
|
8201
|
+
vue.createVNode(vue.unref(elementPlus.ElDialog), {
|
|
9299
8202
|
modelValue: cropDialogVisible.value,
|
|
9300
8203
|
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => cropDialogVisible.value = $event),
|
|
9301
8204
|
title: "\u56FE\u7247\u88C1\u526A",
|
|
@@ -9305,7 +8208,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9305
8208
|
onClose: resetCropper
|
|
9306
8209
|
}, {
|
|
9307
8210
|
footer: vue.withCtx(() => [
|
|
9308
|
-
vue.createVNode(
|
|
8211
|
+
vue.createVNode(vue.unref(elementPlus.ElButton), {
|
|
9309
8212
|
onClick: _cache[4] || (_cache[4] = ($event) => cropDialogVisible.value = false)
|
|
9310
8213
|
}, {
|
|
9311
8214
|
default: vue.withCtx(() => [..._cache[10] || (_cache[10] = [
|
|
@@ -9318,7 +8221,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9318
8221
|
_: 1
|
|
9319
8222
|
/* STABLE */
|
|
9320
8223
|
}),
|
|
9321
|
-
vue.createVNode(
|
|
8224
|
+
vue.createVNode(vue.unref(elementPlus.ElButton), {
|
|
9322
8225
|
type: "primary",
|
|
9323
8226
|
onClick: handleCropConfirm
|
|
9324
8227
|
}, {
|
|
@@ -9341,7 +8244,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9341
8244
|
},
|
|
9342
8245
|
[
|
|
9343
8246
|
vue.createCommentVNode(" \u88C1\u526A\u533A\u57DF "),
|
|
9344
|
-
vue.createVNode(
|
|
8247
|
+
vue.createVNode(_component_vue_cropper, {
|
|
9345
8248
|
ref_key: "cropperRef",
|
|
9346
8249
|
ref: cropperRef,
|
|
9347
8250
|
img: cropImageUrl.value,
|
|
@@ -9366,15 +8269,15 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9366
8269
|
class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "cropper-config"))
|
|
9367
8270
|
},
|
|
9368
8271
|
[
|
|
9369
|
-
vue.createVNode(
|
|
8272
|
+
vue.createVNode(vue.unref(elementPlus.ElForm), { model: cropForm }, {
|
|
9370
8273
|
default: vue.withCtx(() => [
|
|
9371
|
-
vue.createVNode(
|
|
8274
|
+
vue.createVNode(vue.unref(elementPlus.ElRow), { gutter: 10 }, {
|
|
9372
8275
|
default: vue.withCtx(() => [
|
|
9373
|
-
vue.createVNode(
|
|
8276
|
+
vue.createVNode(vue.unref(elementPlus.ElCol), { span: 8 }, {
|
|
9374
8277
|
default: vue.withCtx(() => [
|
|
9375
|
-
vue.createVNode(
|
|
8278
|
+
vue.createVNode(vue.unref(elementPlus.ElFormItem), { label: "\u88C1\u526A\u6BD4\u4F8B" }, {
|
|
9376
8279
|
default: vue.withCtx(() => [
|
|
9377
|
-
vue.createVNode(
|
|
8280
|
+
vue.createVNode(vue.unref(elementPlus.ElSelect), {
|
|
9378
8281
|
style: { "width": "100%" },
|
|
9379
8282
|
modelValue: cropForm.aspectRatio,
|
|
9380
8283
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => cropForm.aspectRatio = $event),
|
|
@@ -9406,11 +8309,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9406
8309
|
_: 1
|
|
9407
8310
|
/* STABLE */
|
|
9408
8311
|
}),
|
|
9409
|
-
vue.createVNode(
|
|
8312
|
+
vue.createVNode(vue.unref(elementPlus.ElCol), { span: 16 }, {
|
|
9410
8313
|
default: vue.withCtx(() => [
|
|
9411
|
-
vue.createVNode(
|
|
8314
|
+
vue.createVNode(vue.unref(elementPlus.ElFormItem), { label: "\u88C1\u526A\u5C3A\u5BF8" }, {
|
|
9412
8315
|
default: vue.withCtx(() => [
|
|
9413
|
-
vue.createVNode(
|
|
8316
|
+
vue.createVNode(vue.unref(elementPlus.ElInputNumber), {
|
|
9414
8317
|
modelValue: displayWidth.value,
|
|
9415
8318
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => displayWidth.value = $event),
|
|
9416
8319
|
placeholder: "\u5BBD\u5EA6",
|
|
@@ -9424,7 +8327,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9424
8327
|
-1
|
|
9425
8328
|
/* CACHED */
|
|
9426
8329
|
)),
|
|
9427
|
-
vue.createVNode(
|
|
8330
|
+
vue.createVNode(vue.unref(elementPlus.ElInputNumber), {
|
|
9428
8331
|
modelValue: displayHeight.value,
|
|
9429
8332
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => displayHeight.value = $event),
|
|
9430
8333
|
placeholder: "\u9AD8\u5EA6",
|