2473 lines
107 KiB
JavaScript
2473 lines
107 KiB
JavaScript
var V={exports:{}};(function(Q,J){(function(R,N){Q.exports=N()})(self,()=>(()=>{var R={750:(f,p,l)=>{l.d(p,{A:()=>y});var v=l(354),W=l.n(v),x=l(314),m=l.n(x),w=l(417),X=l.n(w),O=new URL(l(107),l.b),M=m()(W()),z=X()(O);M.push([f.id,`
|
||
.vue-cropper[data-v-01ee97ad] {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
direction: ltr;
|
||
touch-action: none;
|
||
text-align: left;
|
||
background-image: url(${z});
|
||
}
|
||
.cropper-box[data-v-01ee97ad],
|
||
.cropper-box-canvas[data-v-01ee97ad],
|
||
.cropper-drag-box[data-v-01ee97ad],
|
||
.cropper-crop-box[data-v-01ee97ad],
|
||
.cropper-face[data-v-01ee97ad] {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
user-select: none;
|
||
}
|
||
.cropper-box-canvas img[data-v-01ee97ad] {
|
||
position: relative;
|
||
text-align: left;
|
||
user-select: none;
|
||
transform: none;
|
||
max-width: none;
|
||
max-height: none;
|
||
}
|
||
.cropper-box[data-v-01ee97ad] {
|
||
overflow: hidden;
|
||
}
|
||
.cropper-move[data-v-01ee97ad] {
|
||
cursor: move;
|
||
}
|
||
.cropper-crop[data-v-01ee97ad] {
|
||
cursor: crosshair;
|
||
}
|
||
.cropper-modal[data-v-01ee97ad] {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
.cropper-crop-box[data-v-01ee97ad] {
|
||
/*border: 2px solid #39f;*/
|
||
}
|
||
.cropper-view-box[data-v-01ee97ad] {
|
||
display: block;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
outline: 1px solid #39f;
|
||
outline-color: rgba(51, 153, 255, 0.75);
|
||
user-select: none;
|
||
}
|
||
.cropper-view-box img[data-v-01ee97ad] {
|
||
user-select: none;
|
||
text-align: left;
|
||
max-width: none;
|
||
max-height: none;
|
||
}
|
||
.cropper-face[data-v-01ee97ad] {
|
||
top: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
opacity: 0.1;
|
||
}
|
||
.crop-info[data-v-01ee97ad] {
|
||
position: absolute;
|
||
left: 0px;
|
||
min-width: 65px;
|
||
text-align: center;
|
||
color: white;
|
||
line-height: 20px;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
font-size: 12px;
|
||
}
|
||
.crop-line[data-v-01ee97ad] {
|
||
position: absolute;
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0.1;
|
||
}
|
||
.line-w[data-v-01ee97ad] {
|
||
top: -3px;
|
||
left: 0;
|
||
height: 5px;
|
||
cursor: n-resize;
|
||
}
|
||
.line-a[data-v-01ee97ad] {
|
||
top: 0;
|
||
left: -3px;
|
||
width: 5px;
|
||
cursor: w-resize;
|
||
}
|
||
.line-s[data-v-01ee97ad] {
|
||
bottom: -3px;
|
||
left: 0;
|
||
height: 5px;
|
||
cursor: s-resize;
|
||
}
|
||
.line-d[data-v-01ee97ad] {
|
||
top: 0;
|
||
right: -3px;
|
||
width: 5px;
|
||
cursor: e-resize;
|
||
}
|
||
.crop-point[data-v-01ee97ad] {
|
||
position: absolute;
|
||
width: 8px;
|
||
height: 8px;
|
||
opacity: 0.75;
|
||
background-color: #39f;
|
||
border-radius: 100%;
|
||
}
|
||
.point1[data-v-01ee97ad] {
|
||
top: -4px;
|
||
left: -4px;
|
||
cursor: nw-resize;
|
||
}
|
||
.point2[data-v-01ee97ad] {
|
||
top: -5px;
|
||
left: 50%;
|
||
margin-left: -3px;
|
||
cursor: n-resize;
|
||
}
|
||
.point3[data-v-01ee97ad] {
|
||
top: -4px;
|
||
right: -4px;
|
||
cursor: ne-resize;
|
||
}
|
||
.point4[data-v-01ee97ad] {
|
||
top: 50%;
|
||
left: -4px;
|
||
margin-top: -3px;
|
||
cursor: w-resize;
|
||
}
|
||
.point5[data-v-01ee97ad] {
|
||
top: 50%;
|
||
right: -4px;
|
||
margin-top: -3px;
|
||
cursor: e-resize;
|
||
}
|
||
.point6[data-v-01ee97ad] {
|
||
bottom: -5px;
|
||
left: -4px;
|
||
cursor: sw-resize;
|
||
}
|
||
.point7[data-v-01ee97ad] {
|
||
bottom: -5px;
|
||
left: 50%;
|
||
margin-left: -3px;
|
||
cursor: s-resize;
|
||
}
|
||
.point8[data-v-01ee97ad] {
|
||
bottom: -5px;
|
||
right: -4px;
|
||
cursor: se-resize;
|
||
}
|
||
@media screen and (max-width: 500px) {
|
||
.crop-point[data-v-01ee97ad] {
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.45;
|
||
background-color: #39f;
|
||
border-radius: 100%;
|
||
}
|
||
.point1[data-v-01ee97ad] {
|
||
top: -10px;
|
||
left: -10px;
|
||
}
|
||
.point2[data-v-01ee97ad],
|
||
.point4[data-v-01ee97ad],
|
||
.point5[data-v-01ee97ad],
|
||
.point7[data-v-01ee97ad] {
|
||
display: none;
|
||
}
|
||
.point3[data-v-01ee97ad] {
|
||
top: -10px;
|
||
right: -10px;
|
||
}
|
||
.point4[data-v-01ee97ad] {
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.point6[data-v-01ee97ad] {
|
||
bottom: -10px;
|
||
left: -10px;
|
||
}
|
||
.point8[data-v-01ee97ad] {
|
||
bottom: -10px;
|
||
right: -10px;
|
||
}
|
||
}
|
||
`,"",{version:3,sources:["webpack://./src/vue-cropper.vue"],names:[],mappings:";AA6+DA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,iBAAA;EACA,yBAAA;EACA,sBAAA;EACA,qBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;EACA,yDAAA;AACA;AAEA;;;;;EAKA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,iBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,8BAAA;AACA;AAEA;EACA,0BAAA;AACA;AAEA;EACA,cAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,uCAAA;EACA,iBAAA;AACA;AAEA;EACA,iBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,OAAA;EACA,sBAAA;EACA,YAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,oCAAA;EACA,eAAA;AACA;AAEA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;AACA;AAEA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,gBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AACA;AAEA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA;EACA,SAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,SAAA;EACA,WAAA;EACA,iBAAA;AACA;AAEA;EACA,QAAA;EACA,UAAA;EACA,gBAAA;EACA,gBAAA;AACA;AAEA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA;EACA,YAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;AACA;AAEA;AACA;IACA,kBAAA;IACA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;IACA,mBAAA;AACA;AAEA;IACA,UAAA;IACA,WAAA;AACA;AAEA;;;;IAIA,aAAA;AACA;AAEA;IACA,UAAA;IACA,YAAA;AACA;AAEA;IACA,MAAA;IACA,OAAA;AACA;AAEA;IACA,aAAA;IACA,WAAA;AACA;AAEA;IACA,aAAA;IACA,YAAA;AACA;AACA",sourcesContent:[`<template>
|
||
<div class="vue-cropper" ref="cropper" @mouseover="scaleImg" @mouseout="cancelScale">
|
||
<div class="cropper-box" v-if="imgs">
|
||
<div
|
||
class="cropper-box-canvas"
|
||
v-show="!loading"
|
||
:style="{
|
||
'width': trueWidth + 'px',
|
||
'height': trueHeight + 'px',
|
||
'transform': 'scale(' + scale + ',' + scale + ') ' + 'translate3d('+ x / scale + 'px,' + y / scale + 'px,' + '0)'
|
||
+ 'rotateZ('+ rotate * 90 +'deg)'
|
||
}"
|
||
>
|
||
<img :src="imgs" alt="cropper-img" ref="cropperImg">
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="cropper-drag-box"
|
||
:class="{'cropper-move': move && !crop, 'cropper-crop': crop, 'cropper-modal': cropping}"
|
||
@mousedown="startMove"
|
||
@touchstart="startMove"
|
||
></div>
|
||
<div
|
||
v-show="cropping"
|
||
class="cropper-crop-box"
|
||
:style="{
|
||
'width': cropW + 'px',
|
||
'height': cropH + 'px',
|
||
'transform': 'translate3d('+ cropOffsertX + 'px,' + cropOffsertY + 'px,' + '0)'
|
||
}"
|
||
>
|
||
<span class="cropper-view-box">
|
||
<img
|
||
:style="{
|
||
'width': trueWidth + 'px',
|
||
'height': trueHeight + 'px',
|
||
'transform': 'scale(' + scale + ',' + scale + ') ' + 'translate3d('+ (x - cropOffsertX) / scale + 'px,' + (y - cropOffsertY) / scale + 'px,' + '0)'
|
||
+ 'rotateZ('+ rotate * 90 +'deg)'
|
||
}"
|
||
:src="imgs"
|
||
alt="cropper-img"
|
||
>
|
||
</span>
|
||
<span class="cropper-face cropper-move" @mousedown="cropMove" @touchstart="cropMove"></span>
|
||
<span
|
||
class="crop-info"
|
||
v-if="info"
|
||
:style="{'top': cropInfo.top}"
|
||
>{{ cropInfo.width }} × {{ cropInfo.height }}</span>
|
||
<span v-if="!fixedBox">
|
||
<span
|
||
class="crop-line line-w"
|
||
@mousedown="changeCropSize($event, false, true, 0, 1)"
|
||
@touchstart="changeCropSize($event, false, true, 0, 1)"
|
||
></span>
|
||
<span
|
||
class="crop-line line-a"
|
||
@mousedown="changeCropSize($event, true, false, 1, 0)"
|
||
@touchstart="changeCropSize($event, true, false, 1, 0)"
|
||
></span>
|
||
<span
|
||
class="crop-line line-s"
|
||
@mousedown="changeCropSize($event, false, true, 0, 2)"
|
||
@touchstart="changeCropSize($event, false, true, 0, 2)"
|
||
></span>
|
||
<span
|
||
class="crop-line line-d"
|
||
@mousedown="changeCropSize($event, true, false, 2, 0)"
|
||
@touchstart="changeCropSize($event, true, false, 2, 0)"
|
||
></span>
|
||
<span
|
||
class="crop-point point1"
|
||
@mousedown="changeCropSize($event, true, true, 1, 1)"
|
||
@touchstart="changeCropSize($event, true, true, 1, 1)"
|
||
></span>
|
||
<span
|
||
class="crop-point point2"
|
||
@mousedown="changeCropSize($event, false, true, 0, 1)"
|
||
@touchstart="changeCropSize($event, false, true, 0, 1)"
|
||
></span>
|
||
<span
|
||
class="crop-point point3"
|
||
@mousedown="changeCropSize($event, true, true, 2, 1)"
|
||
@touchstart="changeCropSize($event, true, true, 2, 1)"
|
||
></span>
|
||
<span
|
||
class="crop-point point4"
|
||
@mousedown="changeCropSize($event, true, false, 1, 0)"
|
||
@touchstart="changeCropSize($event, true, false, 1, 0)"
|
||
></span>
|
||
<span
|
||
class="crop-point point5"
|
||
@mousedown="changeCropSize($event, true, false, 2, 0)"
|
||
@touchstart="changeCropSize($event, true, false, 2, 0)"
|
||
></span>
|
||
<span
|
||
class="crop-point point6"
|
||
@mousedown="changeCropSize($event, true, true, 1, 2)"
|
||
@touchstart="changeCropSize($event, true, true, 1, 2)"
|
||
></span>
|
||
<span
|
||
class="crop-point point7"
|
||
@mousedown="changeCropSize($event, false, true, 0, 2)"
|
||
@touchstart="changeCropSize($event, false, true, 0, 2)"
|
||
></span>
|
||
<span
|
||
class="crop-point point8"
|
||
@mousedown="changeCropSize($event, true, true, 2, 2)"
|
||
@touchstart="changeCropSize($event, true, true, 2, 2)"
|
||
></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import exifmin from "./exif-js-min";
|
||
|
||
export default {
|
||
data: function() {
|
||
return {
|
||
// 容器高宽
|
||
w: 0,
|
||
h: 0,
|
||
// 图片缩放比例
|
||
scale: 1,
|
||
// 图片偏移x轴
|
||
x: 0,
|
||
// 图片偏移y轴
|
||
y: 0,
|
||
// 图片加载
|
||
loading: true,
|
||
// 图片真实宽度
|
||
trueWidth: 0,
|
||
// 图片真实高度
|
||
trueHeight: 0,
|
||
move: true,
|
||
// 移动的x
|
||
moveX: 0,
|
||
// 移动的y
|
||
moveY: 0,
|
||
// 开启截图
|
||
crop: false,
|
||
// 正在截图
|
||
cropping: false,
|
||
// 裁剪框大小
|
||
cropW: 0,
|
||
cropH: 0,
|
||
cropOldW: 0,
|
||
cropOldH: 0,
|
||
// 判断是否能够改变
|
||
canChangeX: false,
|
||
canChangeY: false,
|
||
// 改变的基准点
|
||
changeCropTypeX: 1,
|
||
changeCropTypeY: 1,
|
||
// 裁剪框的坐标轴
|
||
cropX: 0,
|
||
cropY: 0,
|
||
cropChangeX: 0,
|
||
cropChangeY: 0,
|
||
cropOffsertX: 0,
|
||
cropOffsertY: 0,
|
||
// 支持的滚动事件
|
||
support: "",
|
||
// 移动端手指缩放
|
||
touches: [],
|
||
touchNow: false,
|
||
// 图片旋转
|
||
rotate: 0,
|
||
isIos: false,
|
||
orientation: 0,
|
||
imgs: "",
|
||
// 图片缩放系数
|
||
coe: 0.2,
|
||
// 是否正在多次缩放
|
||
scaling: false,
|
||
scalingSet: "",
|
||
coeStatus: "",
|
||
// 控制emit触发频率
|
||
isCanShow: true,
|
||
// 图片是否等于截图大小
|
||
imgIsQqualCrop: false
|
||
};
|
||
},
|
||
props: {
|
||
img: {
|
||
type: [String, Blob, null, File],
|
||
default: ""
|
||
},
|
||
// 输出图片压缩比
|
||
outputSize: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
outputType: {
|
||
type: String,
|
||
default: "jpeg"
|
||
},
|
||
info: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否开启滚轮放大缩小
|
||
canScale: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否自成截图框
|
||
autoCrop: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
autoCropWidth: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
autoCropHeight: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
// 是否开启固定宽高比
|
||
fixed: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 宽高比 w/h
|
||
fixedNumber: {
|
||
type: Array,
|
||
default: () => {
|
||
return [1, 1];
|
||
}
|
||
},
|
||
// 固定大小 禁止改变截图框大小
|
||
fixedBox: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 输出截图是否缩放
|
||
full: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否可以拖动图片
|
||
canMove: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否可以拖动截图框
|
||
canMoveBox: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 上传图片按照原始比例显示
|
||
original: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 截图框能否超过图片
|
||
centerBox: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否根据dpr输出高清图片
|
||
high: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 截图框展示宽高类型
|
||
infoTrue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 可以压缩图片宽高 默认不超过200
|
||
maxImgSize: {
|
||
type: [Number, String],
|
||
default: 2000
|
||
},
|
||
// 倍数 可渲染当前截图框的n倍 0 - 1000;
|
||
enlarge: {
|
||
type: [Number, String],
|
||
default: 1
|
||
},
|
||
|
||
// 自动预览的固定宽度
|
||
preW: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
/*
|
||
图片布局方式 mode 实现和css背景一样的效果
|
||
contain 居中布局 默认不会缩放 保证图片在容器里面 mode: 'contain'
|
||
cover 拉伸布局 填充整个容器 mode: 'cover'
|
||
如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。 mode: '50px'
|
||
如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。 mode: '50px 60px'
|
||
*/
|
||
mode: {
|
||
type: String,
|
||
default: "contain"
|
||
},
|
||
//限制最小区域,可传1以上的数字和字符串，限制长宽都是这么大
|
||
// 也可以传数组[90,90]
|
||
limitMinSize: {
|
||
type: [Number, Array, String],
|
||
default: () => {
|
||
return 10;
|
||
},
|
||
validator: function (value) {
|
||
if (Array.isArray(value)) {
|
||
return Number(value[0]) >= 0 && Number(value[1]) >= 0;
|
||
} else {
|
||
return Number(value) >= 0;
|
||
}
|
||
},
|
||
},
|
||
// 导出时,填充背景颜色
|
||
fillColor: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
computed: {
|
||
cropInfo() {
|
||
let obj = {};
|
||
obj.top = this.cropOffsertY > 21 ? "-21px" : "0px";
|
||
obj.width = this.cropW > 0 ? this.cropW : 0;
|
||
obj.height = this.cropH > 0 ? this.cropH : 0;
|
||
if (this.infoTrue) {
|
||
let dpr = 1;
|
||
if (this.high && !this.full) {
|
||
dpr = window.devicePixelRatio;
|
||
}
|
||
if ((this.enlarge !== 1) & !this.full) {
|
||
dpr = Math.abs(Number(this.enlarge));
|
||
}
|
||
obj.width = obj.width * dpr;
|
||
obj.height = obj.height * dpr;
|
||
if (this.full) {
|
||
obj.width = obj.width / this.scale;
|
||
obj.height = obj.height / this.scale;
|
||
}
|
||
}
|
||
obj.width = obj.width.toFixed(0);
|
||
obj.height = obj.height.toFixed(0);
|
||
return obj;
|
||
},
|
||
|
||
isIE() {
|
||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||
const isIE = !!window.ActiveXObject || 'ActiveXObject' in window; //判断是否IE浏览器
|
||
return isIE;
|
||
},
|
||
|
||
passive () {
|
||
return this.isIE ? null : {
|
||
passive: false
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
// 如果图片改变， 重新布局
|
||
img() {
|
||
// 当传入图片时, 读取图片信息同时展示
|
||
this.checkedImg();
|
||
},
|
||
imgs(val) {
|
||
if (val === "") {
|
||
return;
|
||
}
|
||
this.reload();
|
||
},
|
||
cropW() {
|
||
this.showPreview();
|
||
},
|
||
cropH() {
|
||
this.showPreview();
|
||
},
|
||
cropOffsertX() {
|
||
this.showPreview();
|
||
},
|
||
cropOffsertY() {
|
||
this.showPreview();
|
||
},
|
||
scale(val, oldVal) {
|
||
this.showPreview();
|
||
},
|
||
x() {
|
||
this.showPreview();
|
||
},
|
||
y() {
|
||
this.showPreview();
|
||
},
|
||
autoCrop(val) {
|
||
if (val) {
|
||
this.goAutoCrop();
|
||
}
|
||
},
|
||
// 修改了自动截图框
|
||
autoCropWidth() {
|
||
if (this.autoCrop) {
|
||
this.goAutoCrop();
|
||
}
|
||
},
|
||
autoCropHeight() {
|
||
if (this.autoCrop) {
|
||
this.goAutoCrop();
|
||
}
|
||
},
|
||
mode() {
|
||
this.checkedImg();
|
||
},
|
||
rotate() {
|
||
this.showPreview();
|
||
if (this.autoCrop) {
|
||
this.goAutoCrop(this.cropW, this.cropH);
|
||
} else {
|
||
if (this.cropW > 0 || this.cropH > 0) {
|
||
this.goAutoCrop(this.cropW, this.cropH);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getVersion (name) {
|
||
var arr = navigator.userAgent.split(' ');
|
||
var chromeVersion = '';
|
||
let result = 0;
|
||
const reg = new RegExp(name, 'i')
|
||
for(var i=0;i < arr.length;i++){
|
||
if(reg.test(arr[i]))
|
||
chromeVersion = arr[i]
|
||
}
|
||
if(chromeVersion){
|
||
result = chromeVersion.split('/')[1].split('.');
|
||
} else {
|
||
result = ['0', '0', '0'];
|
||
}
|
||
return result
|
||
},
|
||
checkOrientationImage(img, orientation, width, height) {
|
||
// 如果是 chrome内核版本在81 safari 在 605 以上不处理图片旋转
|
||
// alert(navigator.userAgent)
|
||
if (this.getVersion('chrome')[0] >= 81) {
|
||
orientation = -1
|
||
} else {
|
||
if (this.getVersion('safari')[0] >= 605 ) {
|
||
const safariVersion = this.getVersion('version')
|
||
if (safariVersion[0] > 13 && safariVersion[1] > 1) {
|
||
orientation = -1
|
||
}
|
||
} else {
|
||
// 判断 ios 版本进行处理
|
||
// 针对 ios 版本大于 13.4的系统不做图片旋转
|
||
const isIos = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)
|
||
if (isIos) {
|
||
let version = isIos[1]
|
||
version = version.split('_')
|
||
if (version[0] > 13 || (version[0] >= 13 && version[1] >= 4)) {
|
||
orientation = -1
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// alert(\`当前处理的orientation\${orientation}\`)
|
||
let canvas = document.createElement("canvas");
|
||
let ctx = canvas.getContext("2d");
|
||
ctx.save();
|
||
|
||
switch (orientation) {
|
||
case 2:
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
// horizontal flip
|
||
ctx.translate(width, 0);
|
||
ctx.scale(-1, 1);
|
||
break;
|
||
case 3:
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
//180 graus
|
||
ctx.translate(width / 2, height / 2);
|
||
ctx.rotate((180 * Math.PI) / 180);
|
||
ctx.translate(-width / 2, -height / 2);
|
||
break;
|
||
case 4:
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
// vertical flip
|
||
ctx.translate(0, height);
|
||
ctx.scale(1, -1);
|
||
break;
|
||
case 5:
|
||
// vertical flip + 90 rotate right
|
||
canvas.height = width;
|
||
canvas.width = height;
|
||
ctx.rotate(0.5 * Math.PI);
|
||
ctx.scale(1, -1);
|
||
break;
|
||
case 6:
|
||
canvas.width = height;
|
||
canvas.height = width;
|
||
//90 graus
|
||
ctx.translate(height / 2, width / 2);
|
||
ctx.rotate((90 * Math.PI) / 180);
|
||
ctx.translate(-width / 2, -height / 2);
|
||
break;
|
||
case 7:
|
||
// horizontal flip + 90 rotate right
|
||
canvas.height = width;
|
||
canvas.width = height;
|
||
ctx.rotate(0.5 * Math.PI);
|
||
ctx.translate(width, -height);
|
||
ctx.scale(-1, 1);
|
||
break;
|
||
case 8:
|
||
canvas.height = width;
|
||
canvas.width = height;
|
||
//-90 graus
|
||
ctx.translate(height / 2, width / 2);
|
||
ctx.rotate((-90 * Math.PI) / 180);
|
||
ctx.translate(-width / 2, -height / 2);
|
||
break;
|
||
default:
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
}
|
||
|
||
ctx.drawImage(img, 0, 0, width, height);
|
||
ctx.restore();
|
||
canvas.toBlob(
|
||
blob => {
|
||
let data = URL.createObjectURL(blob);
|
||
URL.revokeObjectURL(this.imgs)
|
||
this.imgs = data;
|
||
},
|
||
"image/" + this.outputType,
|
||
1
|
||
);
|
||
},
|
||
|
||
// checkout img
|
||
checkedImg() {
|
||
if (this.img === null || this.img === '') {
|
||
this.imgs = ''
|
||
this.clearCrop()
|
||
return
|
||
}
|
||
this.loading = true;
|
||
this.scale = 1;
|
||
this.rotate = 0;
|
||
this.clearCrop();
|
||
let img = new Image();
|
||
img.onload = () => {
|
||
if (this.img === "") {
|
||
this.$emit("imgLoad", "error");
|
||
this.$emit("img-load", "error");
|
||
this.$emit("img-load", new Error('图片不能为空'));
|
||
return false;
|
||
}
|
||
|
||
let width = img.width;
|
||
let height = img.height;
|
||
exifmin.getData(img).then(data => {
|
||
this.orientation = data.orientation || 1;
|
||
let max = Number(this.maxImgSize);
|
||
if (!this.orientation && (width < max) & (height < max)) {
|
||
this.imgs = this.img;
|
||
return;
|
||
}
|
||
|
||
if (width > max) {
|
||
height = (height / width) * max;
|
||
width = max;
|
||
}
|
||
|
||
if (height > max) {
|
||
width = (width / height) * max;
|
||
height = max;
|
||
}
|
||
this.checkOrientationImage(img, this.orientation, width, height);
|
||
}).catch(error => {
|
||
this.$emit("img-load", "error");
|
||
this.$emit("img-load-error", error);
|
||
});
|
||
};
|
||
|
||
img.onerror = () => {
|
||
this.$emit("imgLoad", "error");
|
||
this.$emit("img-load", "error");
|
||
this.$emit("img-load-error", error);
|
||
};
|
||
|
||
// 判断如果不是base64图片 再添加crossOrigin属性，否则会导致iOS低版本(10.2)无法显示图片
|
||
if (this.img.substr(0, 4) !== "data") {
|
||
img.crossOrigin = "";
|
||
}
|
||
|
||
if (this.isIE) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.onload = function() {
|
||
var url = URL.createObjectURL(this.response);
|
||
img.src = url;
|
||
};
|
||
xhr.open("GET", this.img, true);
|
||
xhr.responseType = "blob";
|
||
xhr.send();
|
||
} else {
|
||
img.src = this.img;
|
||
}
|
||
},
|
||
// 当按下鼠标键
|
||
startMove(e) {
|
||
e.preventDefault();
|
||
// 如果move 为true 表示当前可以拖动
|
||
if (this.move && !this.crop) {
|
||
if (!this.canMove) {
|
||
return false;
|
||
}
|
||
// 开始移动
|
||
this.moveX = ('clientX' in e ? e.clientX : e.touches[0].clientX) - this.x;
|
||
this.moveY = ('clientY' in e ? e.clientY : e.touches[0].clientY) - this.y;
|
||
if (e.touches) {
|
||
window.addEventListener("touchmove", this.moveImg);
|
||
window.addEventListener("touchend", this.leaveImg);
|
||
if (e.touches.length == 2) {
|
||
// 记录手指刚刚放上去
|
||
this.touches = e.touches;
|
||
window.addEventListener("touchmove", this.touchScale);
|
||
window.addEventListener("touchend", this.cancelTouchScale);
|
||
}
|
||
} else {
|
||
window.addEventListener("mousemove", this.moveImg);
|
||
window.addEventListener("mouseup", this.leaveImg);
|
||
}
|
||
// 触发图片移动事件
|
||
this.$emit("imgMoving", {
|
||
moving: true,
|
||
axis: this.getImgAxis()
|
||
});
|
||
this.$emit("img-moving", {
|
||
moving: true,
|
||
axis: this.getImgAxis()
|
||
});
|
||
} else {
|
||
// 截图ing
|
||
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 = e.offsetX
|
||
? e.offsetX
|
||
: e.touches[0].pageX - this.$refs.cropper.offsetLeft;
|
||
this.cropOffsertY = e.offsetY
|
||
? e.offsetY
|
||
: e.touches[0].pageY - this.$refs.cropper.offsetTop;
|
||
this.cropX = 'clientX' in e ? e.clientX : e.touches[0].clientX;
|
||
this.cropY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
|
||
this.cropChangeX = this.cropOffsertX;
|
||
this.cropChangeY = this.cropOffsertY;
|
||
this.cropW = 0;
|
||
this.cropH = 0;
|
||
}
|
||
},
|
||
|
||
// 移动端缩放
|
||
touchScale(e) {
|
||
e.preventDefault();
|
||
let scale = this.scale;
|
||
// 记录变化量
|
||
// 第一根手指
|
||
var oldTouch1 = {
|
||
x: this.touches[0].clientX,
|
||
y: this.touches[0].clientY
|
||
};
|
||
var newTouch1 = {
|
||
x: e.touches[0].clientX,
|
||
y: e.touches[0].clientY
|
||
};
|
||
// 第二根手指
|
||
var oldTouch2 = {
|
||
x: this.touches[1].clientX,
|
||
y: this.touches[1].clientY
|
||
};
|
||
var newTouch2 = {
|
||
x: e.touches[1].clientX,
|
||
y: e.touches[1].clientY
|
||
};
|
||
var oldL = Math.sqrt(
|
||
Math.pow(oldTouch1.x - oldTouch2.x, 2) +
|
||
Math.pow(oldTouch1.y - oldTouch2.y, 2)
|
||
);
|
||
var newL = Math.sqrt(
|
||
Math.pow(newTouch1.x - newTouch2.x, 2) +
|
||
Math.pow(newTouch1.y - newTouch2.y, 2)
|
||
);
|
||
var cha = newL - oldL;
|
||
// 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小
|
||
// 1px - 0.2
|
||
var coe = 1;
|
||
coe =
|
||
coe / this.trueWidth > coe / this.trueHeight
|
||
? coe / this.trueHeight
|
||
: coe / this.trueWidth;
|
||
coe = coe > 0.1 ? 0.1 : coe;
|
||
var num = coe * cha;
|
||
if (!this.touchNow) {
|
||
this.touchNow = true;
|
||
if (cha > 0) {
|
||
scale += Math.abs(num);
|
||
} else if (cha < 0) {
|
||
scale > Math.abs(num) ? (scale -= Math.abs(num)) : scale;
|
||
}
|
||
this.touches = e.touches;
|
||
setTimeout(() => {
|
||
this.touchNow = false;
|
||
}, 8);
|
||
if (!this.checkoutImgAxis(this.x, this.y, scale)) {
|
||
return false;
|
||
}
|
||
this.scale = scale;
|
||
}
|
||
},
|
||
|
||
cancelTouchScale(e) {
|
||
window.removeEventListener("touchmove", this.touchScale);
|
||
},
|
||
|
||
// 移动图片
|
||
moveImg(e) {
|
||
e.preventDefault();
|
||
if (e.touches && e.touches.length === 2) {
|
||
this.touches = e.touches;
|
||
window.addEventListener("touchmove", this.touchScale);
|
||
window.addEventListener("touchend", this.cancelTouchScale);
|
||
window.removeEventListener("touchmove", this.moveImg);
|
||
return false;
|
||
}
|
||
let nowX = 'clientX' in e ? e.clientX : e.touches[0].clientX;
|
||
let nowY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
|
||
|
||
let changeX, changeY;
|
||
changeX = nowX - this.moveX;
|
||
changeY = nowY - this.moveY;
|
||
|
||
this.$nextTick(() => {
|
||
if (this.centerBox) {
|
||
let axis = this.getImgAxis(changeX, changeY, this.scale);
|
||
let cropAxis = this.getCropAxis();
|
||
let imgW = this.trueHeight * this.scale;
|
||
let imgH = this.trueWidth * this.scale;
|
||
let maxLeft, maxTop, maxRight, maxBottom;
|
||
switch (this.rotate) {
|
||
case 1:
|
||
case -1:
|
||
case 3:
|
||
case -3:
|
||
maxLeft =
|
||
this.cropOffsertX -
|
||
(this.trueWidth * (1 - this.scale)) / 2 +
|
||
(imgW - imgH) / 2;
|
||
maxTop =
|
||
this.cropOffsertY -
|
||
(this.trueHeight * (1 - this.scale)) / 2 +
|
||
(imgH - imgW) / 2;
|
||
maxRight = maxLeft - imgW + this.cropW;
|
||
maxBottom = maxTop - imgH + this.cropH;
|
||
break;
|
||
default:
|
||
maxLeft =
|
||
this.cropOffsertX - (this.trueWidth * (1 - this.scale)) / 2;
|
||
maxTop =
|
||
this.cropOffsertY - (this.trueHeight * (1 - this.scale)) / 2;
|
||
maxRight = maxLeft - imgH + this.cropW;
|
||
maxBottom = maxTop - imgW + this.cropH;
|
||
break;
|
||
}
|
||
|
||
// 图片左边 图片不能超过截图框
|
||
if (axis.x1 >= cropAxis.x1) {
|
||
changeX = maxLeft;
|
||
}
|
||
|
||
// 图片上边 图片不能超过截图框
|
||
if (axis.y1 >= cropAxis.y1) {
|
||
changeY = maxTop;
|
||
}
|
||
|
||
// 图片右边
|
||
if (axis.x2 <= cropAxis.x2) {
|
||
changeX = maxRight;
|
||
}
|
||
|
||
// 图片下边
|
||
if (axis.y2 <= cropAxis.y2) {
|
||
changeY = maxBottom;
|
||
}
|
||
}
|
||
this.x = changeX;
|
||
this.y = changeY;
|
||
// 触发图片移动事件
|
||
this.$emit("imgMoving", {
|
||
moving: true,
|
||
axis: this.getImgAxis()
|
||
});
|
||
this.$emit("img-moving", {
|
||
moving: true,
|
||
axis: this.getImgAxis()
|
||
});
|
||
});
|
||
},
|
||
// 移动图片结束
|
||
leaveImg(e) {
|
||
window.removeEventListener("mousemove", this.moveImg);
|
||
window.removeEventListener("touchmove", this.moveImg);
|
||
window.removeEventListener("mouseup", this.leaveImg);
|
||
window.removeEventListener("touchend", this.leaveImg);
|
||
// 触发图片移动事件
|
||
this.$emit("imgMoving", {
|
||
moving: false,
|
||
axis: this.getImgAxis()
|
||
});
|
||
this.$emit("img-moving", {
|
||
moving: false,
|
||
axis: this.getImgAxis()
|
||
});
|
||
},
|
||
// 缩放图片
|
||
scaleImg() {
|
||
if (this.canScale) {
|
||
window.addEventListener(this.support, this.changeSize, this.passive);
|
||
}
|
||
},
|
||
// 移出框
|
||
cancelScale() {
|
||
if (this.canScale) {
|
||
window.removeEventListener(this.support, this.changeSize);
|
||
}
|
||
},
|
||
// 改变大小函数
|
||
changeSize(e) {
|
||
e.preventDefault();
|
||
let scale = this.scale;
|
||
var change = e.deltaY || e.wheelDelta;
|
||
// 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小
|
||
var isFirefox = navigator.userAgent.indexOf("Firefox");
|
||
change = isFirefox > 0 ? change * 30 : change;
|
||
// 修复ie的滚动缩放
|
||
if (this.isIE) {
|
||
change = -change;
|
||
}
|
||
// 1px - 0.2
|
||
var coe = this.coe;
|
||
coe =
|
||
coe / this.trueWidth > coe / this.trueHeight
|
||
? coe / this.trueHeight
|
||
: coe / this.trueWidth;
|
||
var num = coe * change;
|
||
num < 0
|
||
? (scale += Math.abs(num))
|
||
: scale > Math.abs(num)
|
||
? (scale -= Math.abs(num))
|
||
: scale;
|
||
// 延迟0.1s 每次放大大或者缩小的范围
|
||
let status = num < 0 ? "add" : "reduce";
|
||
if (status !== this.coeStatus) {
|
||
this.coeStatus = status;
|
||
this.coe = 0.2;
|
||
}
|
||
if (!this.scaling) {
|
||
this.scalingSet = setTimeout(() => {
|
||
this.scaling = false;
|
||
this.coe = this.coe += 0.01;
|
||
}, 50);
|
||
}
|
||
this.scaling = true;
|
||
if (!this.checkoutImgAxis(this.x, this.y, scale)) {
|
||
return false;
|
||
}
|
||
this.scale = scale;
|
||
},
|
||
|
||
// 修改图片大小函数
|
||
changeScale(num) {
|
||
let scale = this.scale;
|
||
num = num || 1;
|
||
var coe = 20;
|
||
coe =
|
||
coe / this.trueWidth > coe / this.trueHeight
|
||
? coe / this.trueHeight
|
||
: coe / this.trueWidth;
|
||
num = num * coe;
|
||
num > 0
|
||
? (scale += Math.abs(num))
|
||
: scale > Math.abs(num)
|
||
? (scale -= Math.abs(num))
|
||
: scale;
|
||
if (!this.checkoutImgAxis(this.x, this.y, scale)) {
|
||
return false;
|
||
}
|
||
this.scale = scale;
|
||
},
|
||
// 创建截图框
|
||
createCrop(e) {
|
||
e.preventDefault();
|
||
// 移动生成大小
|
||
var nowX = 'clientX' in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;
|
||
var nowY = 'clientY' in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;
|
||
this.$nextTick(() => {
|
||
var fw = nowX - this.cropX;
|
||
var fh = nowY - this.cropY;
|
||
if (fw > 0) {
|
||
this.cropW =
|
||
fw + this.cropChangeX > this.w ? this.w - this.cropChangeX : fw;
|
||
this.cropOffsertX = this.cropChangeX;
|
||
} else {
|
||
this.cropW =
|
||
this.w - this.cropChangeX + Math.abs(fw) > this.w
|
||
? this.cropChangeX
|
||
: Math.abs(fw);
|
||
this.cropOffsertX =
|
||
this.cropChangeX + fw > 0 ? this.cropChangeX + fw : 0;
|
||
}
|
||
|
||
if (!this.fixed) {
|
||
if (fh > 0) {
|
||
this.cropH =
|
||
fh + this.cropChangeY > this.h ? this.h - this.cropChangeY : fh;
|
||
this.cropOffsertY = this.cropChangeY;
|
||
} else {
|
||
this.cropH =
|
||
this.h - this.cropChangeY + Math.abs(fh) > this.h
|
||
? this.cropChangeY
|
||
: Math.abs(fh);
|
||
this.cropOffsertY =
|
||
this.cropChangeY + fh > 0 ? this.cropChangeY + fh : 0;
|
||
}
|
||
} else {
|
||
var fixedHeight =
|
||
(this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];
|
||
if (fixedHeight + this.cropOffsertY > this.h) {
|
||
this.cropH = this.h - this.cropOffsertY;
|
||
this.cropW =
|
||
(this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];
|
||
if (fw > 0) {
|
||
this.cropOffsertX = this.cropChangeX;
|
||
} else {
|
||
this.cropOffsertX = this.cropChangeX - this.cropW;
|
||
}
|
||
} else {
|
||
this.cropH = fixedHeight;
|
||
}
|
||
this.cropOffsertY = this.cropOffsertY;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 改变截图框大小
|
||
changeCropSize(e, w, h, typeW, typeH) {
|
||
e.preventDefault();
|
||
window.addEventListener("mousemove", this.changeCropNow);
|
||
window.addEventListener("mouseup", this.changeCropEnd);
|
||
window.addEventListener("touchmove", this.changeCropNow);
|
||
window.addEventListener("touchend", this.changeCropEnd);
|
||
this.canChangeX = w;
|
||
this.canChangeY = h;
|
||
this.changeCropTypeX = typeW;
|
||
this.changeCropTypeY = typeH;
|
||
this.cropX = 'clientX' in e ? e.clientX : e.touches[0].clientX;
|
||
this.cropY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
|
||
this.cropOldW = this.cropW;
|
||
this.cropOldH = this.cropH;
|
||
this.cropChangeX = this.cropOffsertX;
|
||
this.cropChangeY = this.cropOffsertY;
|
||
if (this.fixed) {
|
||
if (this.canChangeX && this.canChangeY) {
|
||
this.canChangeY = 0;
|
||
}
|
||
}
|
||
this.$emit('changeCropSize', {
|
||
width: this.cropW,
|
||
height: this.cropH
|
||
})
|
||
this.$emit('change-crop-size', {
|
||
width: this.cropW,
|
||
height: this.cropH
|
||
})
|
||
},
|
||
|
||
// 正在改变
|
||
changeCropNow(e) {
|
||
e.preventDefault();
|
||
var nowX = 'clientX' in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;
|
||
var nowY = 'clientY' in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;
|
||
// 容器的宽高
|
||
let wrapperW = this.w;
|
||
let wrapperH = this.h;
|
||
|
||
// 不能超过的坐标轴
|
||
let minX = 0;
|
||
let minY = 0;
|
||
|
||
if (this.centerBox) {
|
||
let axis = this.getImgAxis();
|
||
let imgW = axis.x2;
|
||
let imgH = axis.y2;
|
||
minX = axis.x1 > 0 ? axis.x1 : 0;
|
||
minY = axis.y1 > 0 ? axis.y1 : 0;
|
||
if (wrapperW > imgW) {
|
||
wrapperW = imgW;
|
||
}
|
||
|
||
if (wrapperH > imgH) {
|
||
wrapperH = imgH;
|
||
}
|
||
}
|
||
const [minCropW,minCropH] = this.checkCropLimitSize()
|
||
this.$nextTick(() => {
|
||
var fw = nowX - this.cropX;
|
||
var fh = nowY - this.cropY;
|
||
if (this.canChangeX) {
|
||
if (this.changeCropTypeX === 1) {
|
||
if (this.cropOldW - fw < minCropW) {
|
||
this.cropW = minCropW
|
||
this.cropOffsertX = this.cropOldW + this.cropChangeX - minX - minCropW
|
||
} else if (this.cropOldW - fw > 0) {
|
||
this.cropW =
|
||
wrapperW - this.cropChangeX - fw <= wrapperW - minX
|
||
? this.cropOldW - fw
|
||
: this.cropOldW + this.cropChangeX - minX;
|
||
this.cropOffsertX =
|
||
wrapperW - this.cropChangeX - fw <= wrapperW - minX
|
||
? this.cropChangeX + fw
|
||
: minX;
|
||
} else {
|
||
this.cropW =
|
||
Math.abs(fw) + this.cropChangeX <= wrapperW
|
||
? Math.abs(fw) - this.cropOldW
|
||
: wrapperW - this.cropOldW - this.cropChangeX;
|
||
this.cropOffsertX = this.cropChangeX + this.cropOldW;
|
||
}
|
||
} else if (this.changeCropTypeX === 2) {
|
||
if (this.cropOldW + fw < minCropW) {
|
||
this.cropW = minCropW
|
||
} else if (this.cropOldW + fw > 0) {
|
||
this.cropW =
|
||
this.cropOldW + fw + this.cropOffsertX <= wrapperW
|
||
? this.cropOldW + fw
|
||
: wrapperW - this.cropOffsertX;
|
||
this.cropOffsertX = this.cropChangeX;
|
||
} else {
|
||
// 右侧坐标抽 超过左侧
|
||
this.cropW =
|
||
wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=
|
||
wrapperW - minX
|
||
? Math.abs(fw + this.cropOldW)
|
||
: this.cropChangeX - minX;
|
||
this.cropOffsertX =
|
||
wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=
|
||
wrapperW - minX
|
||
? this.cropChangeX - Math.abs(fw + this.cropOldW)
|
||
: minX;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (this.canChangeY) {
|
||
if (this.changeCropTypeY === 1) {
|
||
if (this.cropOldH - fh < minCropH) {
|
||
this.cropH = minCropH
|
||
this.cropOffsertY = this.cropOldH + this.cropChangeY - minY - minCropH
|
||
} else if (this.cropOldH - fh > 0) {
|
||
this.cropH =
|
||
wrapperH - this.cropChangeY - fh <= wrapperH - minY
|
||
? this.cropOldH - fh
|
||
: this.cropOldH + this.cropChangeY - minY;
|
||
this.cropOffsertY =
|
||
wrapperH - this.cropChangeY - fh <= wrapperH - minY
|
||
? this.cropChangeY + fh
|
||
: minY;
|
||
} else {
|
||
this.cropH =
|
||
Math.abs(fh) + this.cropChangeY <= wrapperH
|
||
? Math.abs(fh) - this.cropOldH
|
||
: wrapperH - this.cropOldH - this.cropChangeY;
|
||
this.cropOffsertY = this.cropChangeY + this.cropOldH;
|
||
}
|
||
} else if (this.changeCropTypeY === 2) {
|
||
if (this.cropOldH + fh < minCropH) {
|
||
this.cropH = minCropH
|
||
} else if (this.cropOldH + fh > 0) {
|
||
this.cropH =
|
||
this.cropOldH + fh + this.cropOffsertY <= wrapperH
|
||
? this.cropOldH + fh
|
||
: wrapperH - this.cropOffsertY;
|
||
this.cropOffsertY = this.cropChangeY;
|
||
} else {
|
||
this.cropH =
|
||
wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=
|
||
wrapperH - minY
|
||
? Math.abs(fh + this.cropOldH)
|
||
: this.cropChangeY - minY;
|
||
this.cropOffsertY =
|
||
wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=
|
||
wrapperH - minY
|
||
? this.cropChangeY - Math.abs(fh + this.cropOldH)
|
||
: minY;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (this.canChangeX && this.fixed) {
|
||
var fixedHeight =
|
||
(this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];
|
||
if (fixedHeight < minCropH) {
|
||
this.cropH = minCropH
|
||
this.cropW = this.fixedNumber[0] * minCropH / this.fixedNumber[1]
|
||
// 这里需要去修改 offsetX的值，去调整因为高度变化而导致的宽度变化
|
||
if (this.changeCropTypeX === 1) {
|
||
this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW)
|
||
}
|
||
} else if (fixedHeight + this.cropOffsertY > wrapperH) {
|
||
this.cropH = wrapperH - this.cropOffsertY;
|
||
this.cropW =
|
||
(this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];
|
||
if (this.changeCropTypeX === 1) {
|
||
this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW)
|
||
}
|
||
} else {
|
||
this.cropH = fixedHeight;
|
||
}
|
||
}
|
||
|
||
if (this.canChangeY && this.fixed) {
|
||
var fixedWidth =
|
||
(this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];
|
||
if (fixedWidth < minCropW) {
|
||
this.cropW = minCropW
|
||
this.cropH = this.fixedNumber[1] * minCropW / this.fixedNumber[0];
|
||
} else if (fixedWidth + this.cropOffsertX > wrapperW) {
|
||
this.cropW = wrapperW - this.cropOffsertX;
|
||
this.cropH =
|
||
(this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];
|
||
} else {
|
||
this.cropW = fixedWidth;
|
||
}
|
||
}
|
||
// 触发截图框改变大小事件
|
||
this.$emit('cropSizing', {cropW: this.cropW, cropH: this.cropH})
|
||
this.$emit('crop-sizing', {cropW: this.cropW, cropH: this.cropH})
|
||
});
|
||
},
|
||
|
||
checkCropLimitSize () {
|
||
let { cropW, cropH, limitMinSize } = this;
|
||
|
||
let limitMinNum = new Array;
|
||
if (!Array.isArray(limitMinSize)) {
|
||
limitMinNum = [limitMinSize, limitMinSize]
|
||
} else {
|
||
limitMinNum = limitMinSize
|
||
}
|
||
|
||
//限制最小宽度和高度
|
||
cropW = parseFloat(limitMinNum[0])
|
||
cropH = parseFloat(limitMinNum[1])
|
||
return [cropW, cropH]
|
||
},
|
||
// 结束改变
|
||
changeCropEnd(e) {
|
||
window.removeEventListener("mousemove", this.changeCropNow);
|
||
window.removeEventListener("mouseup", this.changeCropEnd);
|
||
window.removeEventListener("touchmove", this.changeCropNow);
|
||
window.removeEventListener("touchend", this.changeCropEnd);
|
||
},
|
||
// 根据比例x/y，最小宽度，最小高度，现有宽度，现有高度，得到应该有的宽度和高度
|
||
calculateSize(x, y, minX, minY, w, h) {
|
||
const ratio = x / y;
|
||
let width = w;
|
||
let height = h;
|
||
// 先根据最小宽度来计算高度
|
||
if (width < minX) {
|
||
width = minX;
|
||
height = Math.ceil(width / ratio);
|
||
}
|
||
// 如果计算出来的高度小于最小高度，则根据最小高度来重新计算宽度和高度
|
||
if (height < minY) {
|
||
height = minY;
|
||
width = Math.ceil(height * ratio);
|
||
// 如果重新计算的宽度仍然小于最小宽度，则使用最小宽度，并重新计算高度
|
||
if (width < minX) {
|
||
width = minX;
|
||
height = Math.ceil(width / ratio);
|
||
}
|
||
}
|
||
// 如果计算出来的宽度或高度小于输入的宽度或高度，则分别使用输入的宽度或高度
|
||
if (width < w) {
|
||
width = w;
|
||
height = Math.ceil(width / ratio);
|
||
}
|
||
if (height < h) {
|
||
height = h;
|
||
width = Math.ceil(height * ratio);
|
||
}
|
||
return { width, height };
|
||
},
|
||
// 创建完成
|
||
endCrop() {
|
||
if (this.cropW === 0 && this.cropH === 0) {
|
||
this.cropping = false;
|
||
}
|
||
let [minCropW, minCropH] = this.checkCropLimitSize();
|
||
const { width, height } = this.fixed ? this.calculateSize(
|
||
this.fixedNumber[0],
|
||
this.fixedNumber[1],
|
||
minCropW,
|
||
minCropH,
|
||
this.cropW,
|
||
this.cropH
|
||
) : { width: minCropW, height: minCropH }
|
||
if (width > this.cropW) {
|
||
this.cropW = width;
|
||
if (this.cropOffsertX + width > this.w) {
|
||
this.cropOffsertX = this.w - width;
|
||
}
|
||
}
|
||
if (height > this.cropH) {
|
||
this.cropH = height;
|
||
if (this.cropOffsertY + height > this.h) {
|
||
this.cropOffsertY = this.h - height;
|
||
}
|
||
}
|
||
window.removeEventListener("mousemove", this.createCrop);
|
||
window.removeEventListener("mouseup", this.endCrop);
|
||
window.removeEventListener("touchmove", this.createCrop);
|
||
window.removeEventListener("touchend", this.endCrop);
|
||
},
|
||
// 开始截图
|
||
startCrop() {
|
||
this.crop = true;
|
||
},
|
||
// 停止截图
|
||
stopCrop() {
|
||
this.crop = false;
|
||
},
|
||
// 清除截图
|
||
clearCrop() {
|
||
this.cropping = false;
|
||
this.cropW = 0;
|
||
this.cropH = 0;
|
||
},
|
||
// 截图移动
|
||
cropMove(e) {
|
||
e.preventDefault();
|
||
if (!this.canMoveBox) {
|
||
this.crop = false;
|
||
this.startMove(e);
|
||
return false;
|
||
}
|
||
|
||
if (e.touches && e.touches.length === 2) {
|
||
this.crop = false;
|
||
this.startMove(e);
|
||
this.leaveCrop();
|
||
return false;
|
||
}
|
||
window.addEventListener("mousemove", this.moveCrop);
|
||
window.addEventListener("mouseup", this.leaveCrop);
|
||
window.addEventListener("touchmove", this.moveCrop);
|
||
window.addEventListener("touchend", this.leaveCrop);
|
||
let x = 'clientX' in e ? e.clientX : e.touches[0].clientX;
|
||
let y = 'clientY' in e ? e.clientY : e.touches[0].clientY;
|
||
let newX, newY;
|
||
newX = x - this.cropOffsertX;
|
||
newY = y - this.cropOffsertY;
|
||
this.cropX = newX;
|
||
this.cropY = newY;
|
||
// 触发截图框移动事件
|
||
this.$emit("cropMoving", {
|
||
moving: true,
|
||
axis: this.getCropAxis()
|
||
});
|
||
this.$emit("crop-moving", {
|
||
moving: true,
|
||
axis: this.getCropAxis()
|
||
});
|
||
},
|
||
|
||
moveCrop(e, isMove) {
|
||
let nowX = 0;
|
||
let nowY = 0;
|
||
if (e) {
|
||
e.preventDefault();
|
||
nowX = 'clientX' in e ? e.clientX : e.touches[0].clientX;
|
||
nowY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
|
||
}
|
||
this.$nextTick(() => {
|
||
let cx, cy;
|
||
let fw = nowX - this.cropX;
|
||
let fh = nowY - this.cropY;
|
||
if (isMove) {
|
||
fw = this.cropOffsertX;
|
||
fh = this.cropOffsertY;
|
||
}
|
||
// 不能超过外层容器
|
||
if (fw <= 0) {
|
||
cx = 0;
|
||
} else if (fw + this.cropW > this.w) {
|
||
cx = this.w - this.cropW;
|
||
} else {
|
||
cx = fw;
|
||
}
|
||
|
||
if (fh <= 0) {
|
||
cy = 0;
|
||
} else if (fh + this.cropH > this.h) {
|
||
cy = this.h - this.cropH;
|
||
} else {
|
||
cy = fh;
|
||
}
|
||
|
||
// 不能超过图片
|
||
if (this.centerBox) {
|
||
let axis = this.getImgAxis();
|
||
// 横坐标判断
|
||
if (cx <= axis.x1) {
|
||
cx = axis.x1;
|
||
}
|
||
|
||
if (cx + this.cropW > axis.x2) {
|
||
cx = axis.x2 - this.cropW;
|
||
}
|
||
|
||
// 纵坐标纵轴
|
||
if (cy <= axis.y1) {
|
||
cy = axis.y1;
|
||
}
|
||
|
||
if (cy + this.cropH > axis.y2) {
|
||
cy = axis.y2 - this.cropH;
|
||
}
|
||
}
|
||
|
||
this.cropOffsertX = cx;
|
||
this.cropOffsertY = cy;
|
||
|
||
// 触发截图框移动事件
|
||
this.$emit("cropMoving", {
|
||
moving: true,
|
||
axis: this.getCropAxis()
|
||
});
|
||
this.$emit("crop-moving", {
|
||
moving: true,
|
||
axis: this.getCropAxis()
|
||
});
|
||
});
|
||
},
|
||
|
||
// 算出不同场景下面 图片相对于外层容器的坐标轴
|
||
getImgAxis(x, y, scale) {
|
||
x = x || this.x;
|
||
y = y || this.y;
|
||
scale = scale || this.scale;
|
||
// 如果设置了截图框在图片内， 那么限制截图框不能超过图片的坐标
|
||
// 图片的坐标
|
||
let obj = {
|
||
x1: 0,
|
||
x2: 0,
|
||
y1: 0,
|
||
y2: 0
|
||
};
|
||
let imgW = this.trueWidth * scale;
|
||
let imgH = this.trueHeight * scale;
|
||
switch (this.rotate) {
|
||
case 0:
|
||
obj.x1 = x + (this.trueWidth * (1 - scale)) / 2;
|
||
obj.x2 = obj.x1 + this.trueWidth * scale;
|
||
obj.y1 = y + (this.trueHeight * (1 - scale)) / 2;
|
||
obj.y2 = obj.y1 + this.trueHeight * scale;
|
||
break;
|
||
case 1:
|
||
case -1:
|
||
case 3:
|
||
case -3:
|
||
obj.x1 = x + (this.trueWidth * (1 - scale)) / 2 + (imgW - imgH) / 2;
|
||
obj.x2 = obj.x1 + this.trueHeight * scale;
|
||
obj.y1 = y + (this.trueHeight * (1 - scale)) / 2 + (imgH - imgW) / 2;
|
||
obj.y2 = obj.y1 + this.trueWidth * scale;
|
||
break;
|
||
default:
|
||
obj.x1 = x + (this.trueWidth * (1 - scale)) / 2;
|
||
obj.x2 = obj.x1 + this.trueWidth * scale;
|
||
obj.y1 = y + (this.trueHeight * (1 - scale)) / 2;
|
||
obj.y2 = obj.y1 + this.trueHeight * scale;
|
||
break;
|
||
}
|
||
return obj;
|
||
},
|
||
|
||
// 获取截图框的坐标轴
|
||
getCropAxis() {
|
||
let obj = {
|
||
x1: 0,
|
||
x2: 0,
|
||
y1: 0,
|
||
y2: 0
|
||
};
|
||
obj.x1 = this.cropOffsertX;
|
||
obj.x2 = obj.x1 + this.cropW;
|
||
obj.y1 = this.cropOffsertY;
|
||
obj.y2 = obj.y1 + this.cropH;
|
||
return obj;
|
||
},
|
||
|
||
leaveCrop(e) {
|
||
window.removeEventListener("mousemove", this.moveCrop);
|
||
window.removeEventListener("mouseup", this.leaveCrop);
|
||
window.removeEventListener("touchmove", this.moveCrop);
|
||
window.removeEventListener("touchend", this.leaveCrop);
|
||
// 触发截图框移动事件
|
||
this.$emit("cropMoving", {
|
||
moving: false,
|
||
axis: this.getCropAxis()
|
||
});
|
||
this.$emit("crop-moving", {
|
||
moving: false,
|
||
axis: this.getCropAxis()
|
||
});
|
||
},
|
||
|
||
getCropChecked(cb) {
|
||
let canvas = document.createElement("canvas");
|
||
let ctx = canvas.getContext("2d");
|
||
let img = new Image();
|
||
let rotate = this.rotate;
|
||
let trueWidth = this.trueWidth;
|
||
let trueHeight = this.trueHeight;
|
||
let cropOffsertX = this.cropOffsertX;
|
||
let cropOffsertY = this.cropOffsertY;
|
||
img.onload = () => {
|
||
if (this.cropW !== 0) {
|
||
let dpr = 1;
|
||
if (this.high & !this.full) {
|
||
dpr = window.devicePixelRatio;
|
||
}
|
||
if ((this.enlarge !== 1) & !this.full) {
|
||
dpr = Math.abs(Number(this.enlarge));
|
||
}
|
||
let width = this.cropW * dpr;
|
||
let height = this.cropH * dpr;
|
||
let imgW = trueWidth * this.scale * dpr;
|
||
let imgH = trueHeight * this.scale * dpr;
|
||
// 图片x轴偏移
|
||
let dx =
|
||
(this.x - cropOffsertX + (this.trueWidth * (1 - this.scale)) / 2) *
|
||
dpr;
|
||
// 图片y轴偏移
|
||
let dy =
|
||
(this.y - cropOffsertY + (this.trueHeight * (1 - this.scale)) / 2) *
|
||
dpr;
|
||
//保存状态
|
||
setCanvasSize(width, height);
|
||
ctx.save();
|
||
switch (rotate) {
|
||
case 0:
|
||
if (!this.full) {
|
||
ctx.drawImage(img, dx, dy, imgW, imgH);
|
||
} else {
|
||
// 输出原图比例截图
|
||
setCanvasSize(width / this.scale, height / this.scale);
|
||
ctx.drawImage(
|
||
img,
|
||
dx / this.scale,
|
||
dy / this.scale,
|
||
imgW / this.scale,
|
||
imgH / this.scale
|
||
);
|
||
}
|
||
break;
|
||
case 1:
|
||
case -3:
|
||
if (!this.full) {
|
||
// 换算图片旋转后的坐标弥补
|
||
dx = dx + (imgW - imgH) / 2;
|
||
dy = dy + (imgH - imgW) / 2;
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(img, dy, -dx - imgH, imgW, imgH);
|
||
} else {
|
||
setCanvasSize(width / this.scale, height / this.scale);
|
||
// 换算图片旋转后的坐标弥补
|
||
dx =
|
||
dx / this.scale + (imgW / this.scale - imgH / this.scale) / 2;
|
||
dy =
|
||
dy / this.scale + (imgH / this.scale - imgW / this.scale) / 2;
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(
|
||
img,
|
||
dy,
|
||
-dx - imgH / this.scale,
|
||
imgW / this.scale,
|
||
imgH / this.scale
|
||
);
|
||
}
|
||
break;
|
||
case 2:
|
||
case -2:
|
||
if (!this.full) {
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(img, -dx - imgW, -dy - imgH, imgW, imgH);
|
||
} else {
|
||
setCanvasSize(width / this.scale, height / this.scale);
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
dx = dx / this.scale;
|
||
dy = dy / this.scale;
|
||
ctx.drawImage(
|
||
img,
|
||
-dx - imgW / this.scale,
|
||
-dy - imgH / this.scale,
|
||
imgW / this.scale,
|
||
imgH / this.scale
|
||
);
|
||
}
|
||
break;
|
||
case 3:
|
||
case -1:
|
||
if (!this.full) {
|
||
// 换算图片旋转后的坐标弥补
|
||
dx = dx + (imgW - imgH) / 2;
|
||
dy = dy + (imgH - imgW) / 2;
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(img, -dy - imgW, dx, imgW, imgH);
|
||
} else {
|
||
setCanvasSize(width / this.scale, height / this.scale);
|
||
// 换算图片旋转后的坐标弥补
|
||
dx =
|
||
dx / this.scale + (imgW / this.scale - imgH / this.scale) / 2;
|
||
dy =
|
||
dy / this.scale + (imgH / this.scale - imgW / this.scale) / 2;
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(
|
||
img,
|
||
-dy - imgW / this.scale,
|
||
dx,
|
||
imgW / this.scale,
|
||
imgH / this.scale
|
||
);
|
||
}
|
||
break;
|
||
default:
|
||
if (!this.full) {
|
||
ctx.drawImage(img, dx, dy, imgW, imgH);
|
||
} else {
|
||
// 输出原图比例截图
|
||
setCanvasSize(width / this.scale, height / this.scale);
|
||
ctx.drawImage(
|
||
img,
|
||
dx / this.scale,
|
||
dy / this.scale,
|
||
imgW / this.scale,
|
||
imgH / this.scale
|
||
);
|
||
}
|
||
}
|
||
ctx.restore();
|
||
} else {
|
||
let width = trueWidth * this.scale;
|
||
let height = trueHeight * this.scale;
|
||
ctx.save();
|
||
switch (rotate) {
|
||
case 0:
|
||
setCanvasSize(width, height);
|
||
ctx.drawImage(img, 0, 0, width, height);
|
||
break;
|
||
case 1:
|
||
case -3:
|
||
// 旋转90度 或者-270度 宽度和高度对调
|
||
setCanvasSize(height, width);
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(img, 0, -height, width, height);
|
||
break;
|
||
case 2:
|
||
case -2:
|
||
setCanvasSize(width, height);
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(img, -width, -height, width, height);
|
||
break;
|
||
case 3:
|
||
case -1:
|
||
setCanvasSize(height, width);
|
||
ctx.rotate((rotate * 90 * Math.PI) / 180);
|
||
ctx.drawImage(img, -width, 0, width, height);
|
||
break;
|
||
default:
|
||
setCanvasSize(width, height);
|
||
ctx.drawImage(img, 0, 0, width, height);
|
||
}
|
||
ctx.restore();
|
||
}
|
||
cb(canvas);
|
||
};
|
||
// 判断图片是否是base64
|
||
var s = this.img.substr(0, 4);
|
||
if (s !== "data") {
|
||
img.crossOrigin = "Anonymous";
|
||
}
|
||
img.src = this.imgs;
|
||
const fillColor = this.fillColor;
|
||
function setCanvasSize(width, height) {
|
||
canvas.width = Math.round(width);
|
||
canvas.height = Math.round(height);
|
||
// 填充背景颜色
|
||
if (fillColor) {
|
||
ctx.fillStyle = fillColor;
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
}
|
||
}
|
||
},
|
||
|
||
// 获取转换成base64 的图片信息
|
||
getCropData(cb) {
|
||
this.getCropChecked(data => {
|
||
cb(data.toDataURL("image/" + this.outputType, this.outputSize));
|
||
});
|
||
},
|
||
|
||
//canvas获取为blob对象
|
||
getCropBlob(cb) {
|
||
this.getCropChecked(data => {
|
||
data.toBlob(
|
||
blob => cb(blob),
|
||
"image/" + this.outputType,
|
||
this.outputSize
|
||
);
|
||
});
|
||
},
|
||
|
||
// 自动预览函数
|
||
showPreview() {
|
||
// 优化不要多次触发
|
||
if (this.isCanShow) {
|
||
this.isCanShow = false;
|
||
setTimeout(() => {
|
||
this.isCanShow = true;
|
||
}, 16);
|
||
} else {
|
||
return false;
|
||
}
|
||
let w = this.cropW;
|
||
let h = this.cropH;
|
||
let scale = this.scale;
|
||
var obj = {};
|
||
obj.div = {
|
||
width: \`\${w}px\`,
|
||
height: \`\${h}px\`
|
||
};
|
||
let transformX = (this.x - this.cropOffsertX) / scale;
|
||
let transformY = (this.y - this.cropOffsertY) / scale;
|
||
let transformZ = 0;
|
||
obj.w = w;
|
||
obj.h = h;
|
||
obj.url = this.imgs;
|
||
obj.img = {
|
||
width: \`\${this.trueWidth}px\`,
|
||
height: \`\${this.trueHeight}px\`,
|
||
transform: \`scale(\${scale})translate3d(\${transformX}px, \${transformY}px, \${transformZ}px)rotateZ(\${this
|
||
.rotate * 90}deg)\`
|
||
};
|
||
obj.html = \`
|
||
<div class="show-preview" style="width: \${obj.w}px; height: \${
|
||
obj.h
|
||
}px; overflow: hidden">
|
||
<div style="width: \${w}px; height: \${h}px">
|
||
<img src=\${obj.url} style="width: \${this.trueWidth}px; height: \${
|
||
this.trueHeight
|
||
}px; transform:
|
||
scale(\${scale})translate3d(\${transformX}px, \${transformY}px, \${transformZ}px)rotateZ(\${this
|
||
.rotate * 90}deg)">
|
||
</div>
|
||
</div>\`;
|
||
this.$emit("realTime", obj);
|
||
this.$emit("real-time", obj);
|
||
},
|
||
// reload 图片布局函数
|
||
reload() {
|
||
let img = new Image();
|
||
img.onload = () => {
|
||
// 读取图片的信息原始信息， 解析是否需要旋转
|
||
// 读取图片的旋转信息
|
||
// 得到外层容器的宽度高度
|
||
this.w = parseFloat(window.getComputedStyle(this.$refs.cropper).width);
|
||
this.h = parseFloat(window.getComputedStyle(this.$refs.cropper).height);
|
||
|
||
// 存入图片真实高度
|
||
this.trueWidth = img.width;
|
||
this.trueHeight = img.height;
|
||
|
||
// 判断是否需要压缩大图
|
||
if (!this.original) {
|
||
// 判断布局方式 mode
|
||
this.scale = this.checkedMode();
|
||
} else {
|
||
this.scale = 1;
|
||
}
|
||
|
||
this.$nextTick(() => {
|
||
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;
|
||
// // 获取是否开启了自动截图
|
||
if (this.autoCrop) {
|
||
this.goAutoCrop();
|
||
}
|
||
// 图片加载成功的回调
|
||
this.$emit("img-load", "success");
|
||
this.$emit("imgLoad", "success");
|
||
setTimeout(() => {
|
||
this.showPreview();
|
||
}, 20);
|
||
});
|
||
};
|
||
img.onerror = () => {
|
||
this.$emit("imgLoad", "error");
|
||
this.$emit("img-load", "error");
|
||
};
|
||
img.src = this.imgs;
|
||
},
|
||
// 背景布局的函数
|
||
checkedMode() {
|
||
let scale = 1;
|
||
// 通过字符串分割
|
||
let imgW = this.trueWidth;
|
||
let imgH = this.trueHeight;
|
||
const arr = this.mode.split(" ");
|
||
switch (arr[0]) {
|
||
case "contain":
|
||
if (this.trueWidth > this.w) {
|
||
// 如果图片宽度大于容器宽度
|
||
scale = this.w / this.trueWidth;
|
||
}
|
||
|
||
if (this.trueHeight * scale > this.h) {
|
||
scale = this.h / this.trueHeight;
|
||
}
|
||
break;
|
||
case "cover":
|
||
// 扩展布局 默认填充满整个容器
|
||
// 图片宽度大于容器
|
||
imgW = this.w;
|
||
scale = imgW / this.trueWidth;
|
||
imgH = imgH * scale;
|
||
// 如果扩展之后高度小于容器的外层高度 继续扩展高度
|
||
if (imgH < this.h) {
|
||
imgH = this.h;
|
||
scale = imgH / this.trueHeight;
|
||
}
|
||
break;
|
||
default:
|
||
try {
|
||
let str = arr[0];
|
||
if (str.search("px") !== -1) {
|
||
str = str.replace("px", "");
|
||
imgW = parseFloat(str);
|
||
const scaleX = imgW / this.trueWidth;
|
||
let scaleY = 1;
|
||
let strH = arr[1];
|
||
if (strH.search("px") !== -1) {
|
||
strH = strH.replace("px", "");
|
||
imgH = parseFloat(strH);
|
||
scaleY = imgH / this.trueHeight;
|
||
}
|
||
scale = Math.min(scaleX,scaleY)
|
||
|
||
}
|
||
if (str.search("%") !== -1) {
|
||
str = str.replace("%", "");
|
||
imgW = (parseFloat(str) / 100) * this.w;
|
||
scale = imgW / this.trueWidth;
|
||
}
|
||
|
||
if (arr.length === 2 && str === "auto") {
|
||
let str2 = arr[1];
|
||
if (str2.search("px") !== -1) {
|
||
str2 = str2.replace("px", "");
|
||
imgH = parseFloat(str2);
|
||
scale = imgH / this.trueHeight;
|
||
}
|
||
if (str2.search("%") !== -1) {
|
||
str2 = str2.replace("%", "");
|
||
imgH = (parseFloat(str2) / 100) * this.h;
|
||
scale = imgH / this.trueHeight;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
scale = 1;
|
||
}
|
||
}
|
||
return scale;
|
||
},
|
||
// 自动截图函数
|
||
goAutoCrop(cw, ch) {
|
||
if (this.imgs === '' || this.imgs === null) return
|
||
this.clearCrop();
|
||
this.cropping = true;
|
||
let maxWidth = this.w;
|
||
let maxHeight = this.h;
|
||
if (this.centerBox) {
|
||
const switchWH = Math.abs(this.rotate) % 2 > 0
|
||
let imgW = (switchWH ? this.trueHeight : this.trueWidth) * this.scale;
|
||
let imgH = (switchWH ? this.trueWidth : this.trueHeight) * this.scale;
|
||
maxWidth = imgW < maxWidth ? imgW : maxWidth;
|
||
maxHeight = imgH < maxHeight ? imgH : maxHeight;
|
||
}
|
||
// 截图框默认大小
|
||
// 如果为0 那么计算容器大小 默认为80%
|
||
var w = cw ? cw : parseFloat(this.autoCropWidth);
|
||
var h = ch ? ch : parseFloat(this.autoCropHeight);
|
||
if (w === 0 || h === 0) {
|
||
w = maxWidth * 0.8;
|
||
h = maxHeight * 0.8;
|
||
}
|
||
w = w > maxWidth ? maxWidth : w;
|
||
h = h > maxHeight ? maxHeight : h;
|
||
if (this.fixed) {
|
||
h = (w / this.fixedNumber[0]) * this.fixedNumber[1];
|
||
}
|
||
// 如果比例之后 高度大于h
|
||
if (h > this.h) {
|
||
h = this.h;
|
||
w = (h / this.fixedNumber[1]) * this.fixedNumber[0];
|
||
}
|
||
this.changeCrop(w, h);
|
||
},
|
||
// 手动改变截图框大小函数
|
||
changeCrop(w, h) {
|
||
if (this.centerBox) {
|
||
// 修复初始化时候在centerBox=true情况下
|
||
let axis = this.getImgAxis();
|
||
if (w > axis.x2 - axis.x1) {
|
||
// 宽度超标
|
||
w = axis.x2 - axis.x1;
|
||
h = (w / this.fixedNumber[0]) * this.fixedNumber[1];
|
||
}
|
||
if (h > axis.y2 - axis.y1) {
|
||
// 高度超标
|
||
h = axis.y2 - axis.y1;
|
||
w = (h / this.fixedNumber[1]) * this.fixedNumber[0];
|
||
}
|
||
}
|
||
// 判断是否大于容器
|
||
this.cropW = w;
|
||
this.cropH = h;
|
||
this.checkCropLimitSize()
|
||
this.$nextTick(() => {
|
||
// 居中走一走
|
||
this.cropOffsertX = (this.w - this.cropW) / 2;
|
||
this.cropOffsertY = (this.h - this.cropH) / 2;
|
||
if (this.centerBox) {
|
||
this.moveCrop(null, true);
|
||
}
|
||
});
|
||
},
|
||
// 重置函数， 恢复组件置初始状态
|
||
refresh() {
|
||
let img = 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.clearCrop();
|
||
this.$nextTick(() => {
|
||
this.checkedImg();
|
||
});
|
||
},
|
||
|
||
// 向左边旋转
|
||
rotateLeft() {
|
||
this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;
|
||
},
|
||
|
||
// 向右边旋转
|
||
rotateRight() {
|
||
this.rotate = this.rotate >= 3 ? 0 : this.rotate + 1;
|
||
},
|
||
|
||
// 清除旋转
|
||
rotateClear() {
|
||
this.rotate = 0;
|
||
},
|
||
|
||
// 图片坐标点校验
|
||
checkoutImgAxis(x, y, scale) {
|
||
x = x || this.x;
|
||
y = y || this.y;
|
||
scale = scale || this.scale;
|
||
let canGo = true;
|
||
// 开始校验 如果说缩放之后的坐标在截图框外 则阻止缩放
|
||
if (this.centerBox) {
|
||
let axis = this.getImgAxis(x, y, scale);
|
||
let cropAxis = this.getCropAxis();
|
||
// 左边的横坐标 图片不能超过截图框
|
||
if (axis.x1 >= cropAxis.x1) {
|
||
canGo = false;
|
||
}
|
||
|
||
// 右边横坐标
|
||
if (axis.x2 <= cropAxis.x2) {
|
||
canGo = false;
|
||
}
|
||
|
||
// 纵坐标上面
|
||
if (axis.y1 >= cropAxis.y1) {
|
||
canGo = false;
|
||
}
|
||
|
||
// 纵坐标下面
|
||
if (axis.y2 <= cropAxis.y2) {
|
||
canGo = false;
|
||
}
|
||
if (!canGo) {
|
||
this.changeImgScale(axis, cropAxis, scale);
|
||
}
|
||
}
|
||
return canGo;
|
||
},
|
||
// 缩放图片，将图片坐标适配截图框坐标
|
||
changeImgScale(axis, cropAxis, scale) {
|
||
// 左右旋转90度时，长宽互换位置, 也就是 1 和 -1的时候
|
||
let trueWidth = this.trueWidth;
|
||
let trueHeight = this.trueHeight;
|
||
let imgW = trueWidth * scale;
|
||
let imgH = trueHeight * scale;
|
||
if (imgW >= this.cropW && imgH >= this.cropH) {
|
||
this.scale = scale;
|
||
} else {
|
||
const cropWScale = this.cropW / trueWidth;
|
||
const cropHScale = this.cropH / trueHeight;
|
||
const cropScale = this.cropH <= trueHeight * cropWScale ? cropWScale : cropHScale;
|
||
this.scale = cropScale;
|
||
imgW = trueWidth * cropScale;
|
||
imgH = trueHeight * cropScale;
|
||
}
|
||
// 用来做移动坐标判断
|
||
if (!this.imgIsQqualCrop) {
|
||
// 左边的横坐标 图片不能超过截图框
|
||
if (axis.x1 >= cropAxis.x1) {
|
||
if (this.isRotateRightOrLeft) {
|
||
this.x = cropAxis.x1 - (trueWidth - imgW) / 2 - (imgW - imgH) / 2;
|
||
} else {
|
||
this.x = cropAxis.x1 - (trueWidth - imgW) / 2;
|
||
}
|
||
}
|
||
// 右边横坐标
|
||
if (axis.x2 <= cropAxis.x2) {
|
||
if (this.isRotateRightOrLeft) {
|
||
this.x = cropAxis.x1 - (trueWidth - imgW) / 2 - (imgW - imgH) / 2 - imgH + this.cropW;
|
||
} else {
|
||
this.x = cropAxis.x2 - (trueWidth - imgW) / 2 - imgW;
|
||
}
|
||
}
|
||
// 纵坐标上面
|
||
if (axis.y1 >= cropAxis.y1) {
|
||
if (this.isRotateRightOrLeft) {
|
||
this.y = cropAxis.y1 - (trueHeight - imgH) / 2 - (imgH - imgW) / 2;
|
||
} else {
|
||
this.y = cropAxis.y1 - (trueHeight - imgH) / 2;
|
||
}
|
||
}
|
||
// 纵坐标下面
|
||
if (axis.y2 <= cropAxis.y2) {
|
||
if (this.isRotateRightOrLeft) {
|
||
this.y = cropAxis.y2 - (trueHeight - imgH)/2 - (imgH - imgW) / 2 - imgW;
|
||
} else {
|
||
this.y = cropAxis.y2 - (trueHeight - imgH)/2 - imgH;
|
||
}
|
||
}
|
||
}
|
||
if (imgW < this.cropW || imgH < this.cropH) {
|
||
this.imgIsQqualCrop = true;
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.support =
|
||
"onwheel" in document.createElement("div")
|
||
? "wheel"
|
||
: document.onmousewheel !== undefined
|
||
? "mousewheel"
|
||
: "DOMMouseScroll";
|
||
let that = this;
|
||
var u = navigator.userAgent;
|
||
this.isIOS = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||
// 兼容blob
|
||
if (!HTMLCanvasElement.prototype.toBlob) {
|
||
Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
|
||
value: function(callback, type, quality) {
|
||
var binStr = atob(this.toDataURL(type, quality).split(",")[1]),
|
||
len = binStr.length,
|
||
arr = new Uint8Array(len);
|
||
for (var i = 0; i < len; i++) {
|
||
arr[i] = binStr.charCodeAt(i);
|
||
}
|
||
callback(new Blob([arr], { type: that.type || "image/png" }));
|
||
}
|
||
});
|
||
}
|
||
this.showPreview();
|
||
this.checkedImg();
|
||
},
|
||
destroyed() {
|
||
window.removeEventListener("mousemove", this.moveCrop);
|
||
window.removeEventListener("mouseup", this.leaveCrop);
|
||
window.removeEventListener("touchmove", this.moveCrop);
|
||
window.removeEventListener("touchend", this.leaveCrop);
|
||
this.cancelScale()
|
||
}
|
||
};
|
||
<\/script>
|
||
|
||
<style scoped lang="css">
|
||
.vue-cropper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
direction: ltr;
|
||
touch-action: none;
|
||
text-align: left;
|
||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
|
||
}
|
||
|
||
.cropper-box,
|
||
.cropper-box-canvas,
|
||
.cropper-drag-box,
|
||
.cropper-crop-box,
|
||
.cropper-face {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
user-select: none;
|
||
}
|
||
|
||
.cropper-box-canvas img {
|
||
position: relative;
|
||
text-align: left;
|
||
user-select: none;
|
||
transform: none;
|
||
max-width: none;
|
||
max-height: none;
|
||
}
|
||
|
||
.cropper-box {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cropper-move {
|
||
cursor: move;
|
||
}
|
||
|
||
.cropper-crop {
|
||
cursor: crosshair;
|
||
}
|
||
|
||
.cropper-modal {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.cropper-crop-box {
|
||
/*border: 2px solid #39f;*/
|
||
}
|
||
|
||
.cropper-view-box {
|
||
display: block;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
outline: 1px solid #39f;
|
||
outline-color: rgba(51, 153, 255, 0.75);
|
||
user-select: none;
|
||
}
|
||
|
||
.cropper-view-box img {
|
||
user-select: none;
|
||
text-align: left;
|
||
max-width: none;
|
||
max-height: none;
|
||
}
|
||
|
||
.cropper-face {
|
||
top: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
opacity: 0.1;
|
||
}
|
||
|
||
.crop-info {
|
||
position: absolute;
|
||
left: 0px;
|
||
min-width: 65px;
|
||
text-align: center;
|
||
color: white;
|
||
line-height: 20px;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.crop-line {
|
||
position: absolute;
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0.1;
|
||
}
|
||
|
||
.line-w {
|
||
top: -3px;
|
||
left: 0;
|
||
height: 5px;
|
||
cursor: n-resize;
|
||
}
|
||
|
||
.line-a {
|
||
top: 0;
|
||
left: -3px;
|
||
width: 5px;
|
||
cursor: w-resize;
|
||
}
|
||
|
||
.line-s {
|
||
bottom: -3px;
|
||
left: 0;
|
||
height: 5px;
|
||
cursor: s-resize;
|
||
}
|
||
|
||
.line-d {
|
||
top: 0;
|
||
right: -3px;
|
||
width: 5px;
|
||
cursor: e-resize;
|
||
}
|
||
|
||
.crop-point {
|
||
position: absolute;
|
||
width: 8px;
|
||
height: 8px;
|
||
opacity: 0.75;
|
||
background-color: #39f;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.point1 {
|
||
top: -4px;
|
||
left: -4px;
|
||
cursor: nw-resize;
|
||
}
|
||
|
||
.point2 {
|
||
top: -5px;
|
||
left: 50%;
|
||
margin-left: -3px;
|
||
cursor: n-resize;
|
||
}
|
||
|
||
.point3 {
|
||
top: -4px;
|
||
right: -4px;
|
||
cursor: ne-resize;
|
||
}
|
||
|
||
.point4 {
|
||
top: 50%;
|
||
left: -4px;
|
||
margin-top: -3px;
|
||
cursor: w-resize;
|
||
}
|
||
|
||
.point5 {
|
||
top: 50%;
|
||
right: -4px;
|
||
margin-top: -3px;
|
||
cursor: e-resize;
|
||
}
|
||
|
||
.point6 {
|
||
bottom: -5px;
|
||
left: -4px;
|
||
cursor: sw-resize;
|
||
}
|
||
|
||
.point7 {
|
||
bottom: -5px;
|
||
left: 50%;
|
||
margin-left: -3px;
|
||
cursor: s-resize;
|
||
}
|
||
|
||
.point8 {
|
||
bottom: -5px;
|
||
right: -4px;
|
||
cursor: se-resize;
|
||
}
|
||
|
||
@media screen and (max-width: 500px) {
|
||
.crop-point {
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.45;
|
||
background-color: #39f;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.point1 {
|
||
top: -10px;
|
||
left: -10px;
|
||
}
|
||
|
||
.point2,
|
||
.point4,
|
||
.point5,
|
||
.point7 {
|
||
display: none;
|
||
}
|
||
|
||
.point3 {
|
||
top: -10px;
|
||
right: -10px;
|
||
}
|
||
|
||
.point4 {
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.point6 {
|
||
bottom: -10px;
|
||
left: -10px;
|
||
}
|
||
|
||
.point8 {
|
||
bottom: -10px;
|
||
right: -10px;
|
||
}
|
||
}
|
||
</style>
|
||
`],sourceRoot:""}]);const y=M},314:f=>{f.exports=function(p){var l=[];return l.toString=function(){return this.map(function(v){var W="",x=v[5]!==void 0;return v[4]&&(W+="@supports (".concat(v[4],") {")),v[2]&&(W+="@media ".concat(v[2]," {")),x&&(W+="@layer".concat(v[5].length>0?" ".concat(v[5]):""," {")),W+=p(v),x&&(W+="}"),v[2]&&(W+="}"),v[4]&&(W+="}"),W}).join("")},l.i=function(v,W,x,m,w){typeof v=="string"&&(v=[[null,v,void 0]]);var X={};if(x)for(var O=0;O<this.length;O++){var M=this[O][0];M!=null&&(X[M]=!0)}for(var z=0;z<v.length;z++){var y=[].concat(v[z]);x&&X[y[0]]||(w!==void 0&&(y[5]===void 0||(y[1]="@layer".concat(y[5].length>0?" ".concat(y[5]):""," {").concat(y[1],"}")),y[5]=w),W&&(y[2]&&(y[1]="@media ".concat(y[2]," {").concat(y[1],"}")),y[2]=W),m&&(y[4]?(y[1]="@supports (".concat(y[4],") {").concat(y[1],"}"),y[4]=m):y[4]="".concat(m)),l.push(y))}},l}},417:f=>{f.exports=function(p,l){return l||(l={}),p&&(p=String(p.__esModule?p.default:p),/^['"].*['"]$/.test(p)&&(p=p.slice(1,-1)),l.hash&&(p+=l.hash),/["'() \t\n]|(%20)/.test(p)||l.needQuotes?'"'.concat(p.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):p)}},354:f=>{f.exports=function(p){var l=p[1],v=p[3];if(!v)return l;if(typeof btoa=="function"){var W=btoa(unescape(encodeURIComponent(JSON.stringify(v)))),x="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(W),m="/*# ".concat(x," */");return[l].concat([m]).join(`
|
||
`)}return[l].join(`
|
||
`)}},72:f=>{var p=[];function l(x){for(var m=-1,w=0;w<p.length;w++)if(p[w].identifier===x){m=w;break}return m}function v(x,m){for(var w={},X=[],O=0;O<x.length;O++){var M=x[O],z=m.base?M[0]+m.base:M[0],y=w[z]||0,B="".concat(z," ").concat(y);w[z]=y+1;var $=l(B),T={css:M[1],media:M[2],sourceMap:M[3],supports:M[4],layer:M[5]};if($!==-1)p[$].references++,p[$].updater(T);else{var F=W(T,m);m.byIndex=O,p.splice(O,0,{identifier:B,updater:F,references:1})}X.push(B)}return X}function W(x,m){var w=m.domAPI(m);return w.update(x),function(X){if(X){if(X.css===x.css&&X.media===x.media&&X.sourceMap===x.sourceMap&&X.supports===x.supports&&X.layer===x.layer)return;w.update(x=X)}else w.remove()}}f.exports=function(x,m){var w=v(x=x||[],m=m||{});return function(X){X=X||[];for(var O=0;O<w.length;O++){var M=l(w[O]);p[M].references--}for(var z=v(X,m),y=0;y<w.length;y++){var B=l(w[y]);p[B].references===0&&(p[B].updater(),p.splice(B,1))}w=z}}},659:f=>{var p={};f.exports=function(l,v){var W=function(x){if(p[x]===void 0){var m=document.querySelector(x);if(window.HTMLIFrameElement&&m instanceof window.HTMLIFrameElement)try{m=m.contentDocument.head}catch{m=null}p[x]=m}return p[x]}(l);if(!W)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");W.appendChild(v)}},540:f=>{f.exports=function(p){var l=document.createElement("style");return p.setAttributes(l,p.attributes),p.insert(l,p.options),l}},56:(f,p,l)=>{f.exports=function(v){var W=l.nc;W&&v.setAttribute("nonce",W)}},825:f=>{f.exports=function(p){if(typeof document>"u")return{update:function(){},remove:function(){}};var l=p.insertStyleElement(p);return{update:function(v){(function(W,x,m){var w="";m.supports&&(w+="@supports (".concat(m.supports,") {")),m.media&&(w+="@media ".concat(m.media," {"));var X=m.layer!==void 0;X&&(w+="@layer".concat(m.layer.length>0?" ".concat(m.layer):""," {")),w+=m.css,X&&(w+="}"),m.media&&(w+="}"),m.supports&&(w+="}");var O=m.sourceMap;O&&typeof btoa<"u"&&(w+=`
|
||
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(O))))," */")),x.styleTagTransform(w,W,x.options)})(l,p,v)},remove:function(){(function(v){if(v.parentNode===null)return!1;v.parentNode.removeChild(v)})(l)}}}},113:f=>{f.exports=function(p,l){if(l.styleSheet)l.styleSheet.cssText=p;else{for(;l.firstChild;)l.removeChild(l.firstChild);l.appendChild(document.createTextNode(p))}}},107:f=>{f.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"}},N={};function E(f){var p=N[f];if(p!==void 0)return p.exports;var l=N[f]={id:f,exports:{}};return R[f](l,l.exports,E),l.exports}E.m=R,E.n=f=>{var p=f&&f.__esModule?()=>f.default:()=>f;return E.d(p,{a:p}),p},E.d=(f,p)=>{for(var l in p)E.o(p,l)&&!E.o(f,l)&&Object.defineProperty(f,l,{enumerable:!0,get:p[l]})},E.o=(f,p)=>Object.prototype.hasOwnProperty.call(f,p),E.r=f=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(f,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(f,"__esModule",{value:!0})},E.b=document.baseURI||self.location.href,E.nc=void 0;var U={};return(()=>{E.r(U),E.d(U,{VueCropper:()=>P,default:()=>q});var f=function(){var t=this,e=t._self._c;return e("div",{ref:"cropper",staticClass:"vue-cropper",on:{mouseover:t.scaleImg,mouseout:t.cancelScale}},[t.imgs?e("div",{staticClass:"cropper-box"},[e("div",{directives:[{name:"show",rawName:"v-show",value:!t.loading,expression:"!loading"}],staticClass:"cropper-box-canvas",style:{width:t.trueWidth+"px",height:t.trueHeight+"px",transform:"scale("+t.scale+","+t.scale+") translate3d("+t.x/t.scale+"px,"+t.y/t.scale+"px,0)rotateZ("+90*t.rotate+"deg)"}},[e("img",{ref:"cropperImg",attrs:{src:t.imgs,alt:"cropper-img"}})])]):t._e(),t._v(" "),e("div",{staticClass:"cropper-drag-box",class:{"cropper-move":t.move&&!t.crop,"cropper-crop":t.crop,"cropper-modal":t.cropping},on:{mousedown:t.startMove,touchstart:t.startMove}}),t._v(" "),e("div",{directives:[{name:"show",rawName:"v-show",value:t.cropping,expression:"cropping"}],staticClass:"cropper-crop-box",style:{width:t.cropW+"px",height:t.cropH+"px",transform:"translate3d("+t.cropOffsertX+"px,"+t.cropOffsertY+"px,0)"}},[e("span",{staticClass:"cropper-view-box"},[e("img",{style:{width:t.trueWidth+"px",height:t.trueHeight+"px",transform:"scale("+t.scale+","+t.scale+") translate3d("+(t.x-t.cropOffsertX)/t.scale+"px,"+(t.y-t.cropOffsertY)/t.scale+"px,0)rotateZ("+90*t.rotate+"deg)"},attrs:{src:t.imgs,alt:"cropper-img"}})]),t._v(" "),e("span",{staticClass:"cropper-face cropper-move",on:{mousedown:t.cropMove,touchstart:t.cropMove}}),t._v(" "),t.info?e("span",{staticClass:"crop-info",style:{top:t.cropInfo.top}},[t._v(t._s(t.cropInfo.width)+" × "+t._s(t.cropInfo.height))]):t._e(),t._v(" "),t.fixedBox?t._e():e("span",[e("span",{staticClass:"crop-line line-w",on:{mousedown:function(n){return t.changeCropSize(n,!1,!0,0,1)},touchstart:function(n){return t.changeCropSize(n,!1,!0,0,1)}}}),t._v(" "),e("span",{staticClass:"crop-line line-a",on:{mousedown:function(n){return t.changeCropSize(n,!0,!1,1,0)},touchstart:function(n){return t.changeCropSize(n,!0,!1,1,0)}}}),t._v(" "),e("span",{staticClass:"crop-line line-s",on:{mousedown:function(n){return t.changeCropSize(n,!1,!0,0,2)},touchstart:function(n){return t.changeCropSize(n,!1,!0,0,2)}}}),t._v(" "),e("span",{staticClass:"crop-line line-d",on:{mousedown:function(n){return t.changeCropSize(n,!0,!1,2,0)},touchstart:function(n){return t.changeCropSize(n,!0,!1,2,0)}}}),t._v(" "),e("span",{staticClass:"crop-point point1",on:{mousedown:function(n){return t.changeCropSize(n,!0,!0,1,1)},touchstart:function(n){return t.changeCropSize(n,!0,!0,1,1)}}}),t._v(" "),e("span",{staticClass:"crop-point point2",on:{mousedown:function(n){return t.changeCropSize(n,!1,!0,0,1)},touchstart:function(n){return t.changeCropSize(n,!1,!0,0,1)}}}),t._v(" "),e("span",{staticClass:"crop-point point3",on:{mousedown:function(n){return t.changeCropSize(n,!0,!0,2,1)},touchstart:function(n){return t.changeCropSize(n,!0,!0,2,1)}}}),t._v(" "),e("span",{staticClass:"crop-point point4",on:{mousedown:function(n){return t.changeCropSize(n,!0,!1,1,0)},touchstart:function(n){return t.changeCropSize(n,!0,!1,1,0)}}}),t._v(" "),e("span",{staticClass:"crop-point point5",on:{mousedown:function(n){return t.changeCropSize(n,!0,!1,2,0)},touchstart:function(n){return t.changeCropSize(n,!0,!1,2,0)}}}),t._v(" "),e("span",{staticClass:"crop-point point6",on:{mousedown:function(n){return t.changeCropSize(n,!0,!0,1,2)},touchstart:function(n){return t.changeCropSize(n,!0,!0,1,2)}}}),t._v(" "),e("span",{staticClass:"crop-point point7",on:{mousedown:function(n){return t.changeCropSize(n,!1,!0,0,2)},touchstart:function(n){return t.changeCropSize(n,!1,!0,0,2)}}}),t._v(" "),e("span",{staticClass:"crop-point point8",on:{mousedown:function(n){return t.changeCropSize(n,!0,!0,2,2)},touchstart:function(n){return t.changeCropSize(n,!0,!0,2,2)}}})])])])};function p(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function l(t,e){return function(n){if(Array.isArray(n))return n}(t)||function(n,i){var r=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(r!=null){var o,s,a,h,c=[],H=!0,C=!1;try{if(a=(r=r.call(n)).next,i===0){if(Object(r)!==r)return;H=!1}else for(;!(H=(o=a.call(r)).done)&&(c.push(o.value),c.length!==i);H=!0);}catch(g){C=!0,s=g}finally{try{if(!H&&r.return!=null&&(h=r.return(),Object(h)!==h))return}finally{if(C)throw s}}return c}}(t,e)||function(n,i){if(n){if(typeof n=="string")return p(n,i);var r=Object.prototype.toString.call(n).slice(8,-1);return r==="Object"&&n.constructor&&(r=n.constructor.name),r==="Map"||r==="Set"?Array.from(n):r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?p(n,i):void 0}}(t,e)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
|
||
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}f._withStripped=!0;var v={};v.getData=function(t){return new Promise(function(e,n){var i={};(function(r){var o=null;return new Promise(function(s,a){if(r.src)if(/^data\:/i.test(r.src))o=function(H,C){C=C||H.match(/^data\:([^\;]+)\;base64,/im)[1]||"",H=H.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var g=atob(H),d=g.length%2==0?g.length:g.length+1,A=new ArrayBuffer(d),u=new Uint16Array(A),b=0;b<d;b++)u[b]=g.charCodeAt(b);return A}(r.src),s(o);else if(/^blob\:/i.test(r.src)){var h=new FileReader;h.onload=function(H){o=H.target.result,s(o)},function(H,C){var g=new XMLHttpRequest;g.open("GET",H,!0),g.responseType="blob",g.onload=function(d){var A;this.status!=200&&this.status!==0||(A=this.response,h.readAsArrayBuffer(A))},g.send()}(r.src)}else{var c=new XMLHttpRequest;c.onload=function(){if(this.status!=200&&this.status!==0)throw"Could not load image";o=c.response,s(o),c=null},c.open("GET",r.src,!0),c.responseType="arraybuffer",c.send(null)}else a("img error")})})(t).then(function(r){i.arrayBuffer=r;try{i.orientation=function(o){var s,a,h,c,H,C,g,d,A,u=new DataView(o),b=u.byteLength;if(u.getUint8(0)===255&&u.getUint8(1)===216)for(d=2;d<b;){if(u.getUint8(d)===255&&u.getUint8(d+1)===225){C=d;break}d++}if(C&&(a=C+10,function(Y,S,L){var I,_="";for(I=S,L+=S;I<L;I++)_+=String.fromCharCode(Y.getUint8(I));return _}(u,C+4,4)==="Exif"&&((c=(H=u.getUint16(a))===18761)||H===19789)&&u.getUint16(a+2,c)===42&&(h=u.getUint32(a+4,c))>=8&&(g=a+h)),g){for(b=u.getUint16(g,c),A=0;A<b;A++)if(d=g+12*A+2,u.getUint16(d,c)===274){d+=8,s=u.getUint16(d,c);break}}return s}(r)}catch{i.orientation=-1}e(i)}).catch(function(r){n(r)})})};const W=v,x={data:function(){return{w:0,h:0,scale:1,x:0,y:0,loading:!0,trueWidth:0,trueHeight:0,move:!0,moveX:0,moveY:0,crop:!1,cropping:!1,cropW:0,cropH:0,cropOldW:0,cropOldH:0,canChangeX:!1,canChangeY:!1,changeCropTypeX:1,changeCropTypeY:1,cropX:0,cropY:0,cropChangeX:0,cropChangeY:0,cropOffsertX:0,cropOffsertY:0,support:"",touches:[],touchNow:!1,rotate:0,isIos:!1,orientation:0,imgs:"",coe:.2,scaling:!1,scalingSet:"",coeStatus:"",isCanShow:!0,imgIsQqualCrop:!1}},props:{img:{type:[String,Blob,null,File],default:""},outputSize:{type:Number,default:1},outputType:{type:String,default:"jpeg"},info:{type:Boolean,default:!0},canScale:{type:Boolean,default:!0},autoCrop:{type:Boolean,default:!1},autoCropWidth:{type:[Number,String],default:0},autoCropHeight:{type:[Number,String],default:0},fixed:{type:Boolean,default:!1},fixedNumber:{type:Array,default:function(){return[1,1]}},fixedBox:{type:Boolean,default:!1},full:{type:Boolean,default:!1},canMove:{type:Boolean,default:!0},canMoveBox:{type:Boolean,default:!0},original:{type:Boolean,default:!1},centerBox:{type:Boolean,default:!1},high:{type:Boolean,default:!0},infoTrue:{type:Boolean,default:!1},maxImgSize:{type:[Number,String],default:2e3},enlarge:{type:[Number,String],default:1},preW:{type:[Number,String],default:0},mode:{type:String,default:"contain"},limitMinSize:{type:[Number,Array,String],default:function(){return 10},validator:function(t){return Array.isArray(t)?Number(t[0])>=0&&Number(t[1])>=0:Number(t)>=0}},fillColor:{type:String,default:""}},computed:{cropInfo:function(){var t={};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){var e=1;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)}return t.width=t.width.toFixed(0),t.height=t.height.toFixed(0),t},isIE:function(){return!!window.ActiveXObject||"ActiveXObject"in window},passive:function(){return this.isIE?null:{passive:!1}}},watch:{img:function(){this.checkedImg()},imgs:function(t){t!==""&&this.reload()},cropW:function(){this.showPreview()},cropH:function(){this.showPreview()},cropOffsertX:function(){this.showPreview()},cropOffsertY:function(){this.showPreview()},scale:function(t,e){this.showPreview()},x:function(){this.showPreview()},y:function(){this.showPreview()},autoCrop:function(t){t&&this.goAutoCrop()},autoCropWidth:function(){this.autoCrop&&this.goAutoCrop()},autoCropHeight:function(){this.autoCrop&&this.goAutoCrop()},mode:function(){this.checkedImg()},rotate:function(){this.showPreview(),(this.autoCrop||this.cropW>0||this.cropH>0)&&this.goAutoCrop(this.cropW,this.cropH)}},methods:{getVersion:function(t){for(var e=navigator.userAgent.split(" "),n="",i=new RegExp(t,"i"),r=0;r<e.length;r++)i.test(e[r])&&(n=e[r]);return n?n.split("/")[1].split("."):["0","0","0"]},checkOrientationImage:function(t,e,n,i){var r=this;if(this.getVersion("chrome")[0]>=81)e=-1;else if(this.getVersion("safari")[0]>=605){var o=this.getVersion("version");o[0]>13&&o[1]>1&&(e=-1)}else{var s=navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);if(s){var a=s[1];((a=a.split("_"))[0]>13||a[0]>=13&&a[1]>=4)&&(e=-1)}}var h=document.createElement("canvas"),c=h.getContext("2d");switch(c.save(),e){case 2:h.width=n,h.height=i,c.translate(n,0),c.scale(-1,1);break;case 3:h.width=n,h.height=i,c.translate(n/2,i/2),c.rotate(180*Math.PI/180),c.translate(-n/2,-i/2);break;case 4:h.width=n,h.height=i,c.translate(0,i),c.scale(1,-1);break;case 5:h.height=n,h.width=i,c.rotate(.5*Math.PI),c.scale(1,-1);break;case 6:h.width=i,h.height=n,c.translate(i/2,n/2),c.rotate(90*Math.PI/180),c.translate(-n/2,-i/2);break;case 7:h.height=n,h.width=i,c.rotate(.5*Math.PI),c.translate(n,-i),c.scale(-1,1);break;case 8:h.height=n,h.width=i,c.translate(i/2,n/2),c.rotate(-90*Math.PI/180),c.translate(-n/2,-i/2);break;default:h.width=n,h.height=i}c.drawImage(t,0,0,n,i),c.restore(),h.toBlob(function(H){var C=URL.createObjectURL(H);URL.revokeObjectURL(r.imgs),r.imgs=C},"image/"+this.outputType,1)},checkedImg:function(){var t=this;if(this.img===null||this.img==="")return this.imgs="",void this.clearCrop();this.loading=!0,this.scale=1,this.rotate=0,this.clearCrop();var e=new Image;if(e.onload=function(){if(t.img==="")return t.$emit("imgLoad","error"),t.$emit("img-load","error"),t.$emit("img-load",new Error("图片不能为空")),!1;var i=e.width,r=e.height;W.getData(e).then(function(o){t.orientation=o.orientation||1;var s=Number(t.maxImgSize);!t.orientation&&i<s&r<s?t.imgs=t.img:(i>s&&(r=r/i*s,i=s),r>s&&(i=i/r*s,r=s),t.checkOrientationImage(e,t.orientation,i,r))}).catch(function(o){t.$emit("img-load","error"),t.$emit("img-load-error",o)})},e.onerror=function(){t.$emit("imgLoad","error"),t.$emit("img-load","error"),t.$emit("img-load-error",error)},this.img.substr(0,4)!=="data"&&(e.crossOrigin=""),this.isIE){var n=new XMLHttpRequest;n.onload=function(){var i=URL.createObjectURL(this.response);e.src=i},n.open("GET",this.img,!0),n.responseType="blob",n.send()}else e.src=this.img},startMove:function(t){if(t.preventDefault(),this.move&&!this.crop){if(!this.canMove)return!1;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("imgMoving",{moving:!0,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!0,axis:this.getImgAxis()})}else this.cropping=!0,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},touchScale:function(t){var e=this;t.preventDefault();var n=this.scale,i=this.touches[0].clientX,r=this.touches[0].clientY,o=t.touches[0].clientX,s=t.touches[0].clientY,a=this.touches[1].clientX,h=this.touches[1].clientY,c=t.touches[1].clientX,H=t.touches[1].clientY,C=Math.sqrt(Math.pow(i-a,2)+Math.pow(r-h,2)),g=Math.sqrt(Math.pow(o-c,2)+Math.pow(s-H,2))-C,d=1,A=(d=(d=d/this.trueWidth>d/this.trueHeight?d/this.trueHeight:d/this.trueWidth)>.1?.1:d)*g;if(!this.touchNow){if(this.touchNow=!0,g>0?n+=Math.abs(A):g<0&&n>Math.abs(A)&&(n-=Math.abs(A)),this.touches=t.touches,setTimeout(function(){e.touchNow=!1},8),!this.checkoutImgAxis(this.x,this.y,n))return!1;this.scale=n}},cancelTouchScale:function(t){window.removeEventListener("touchmove",this.touchScale)},moveImg:function(t){var e=this;if(t.preventDefault(),t.touches&&t.touches.length===2)return this.touches=t.touches,window.addEventListener("touchmove",this.touchScale),window.addEventListener("touchend",this.cancelTouchScale),window.removeEventListener("touchmove",this.moveImg),!1;var n,i,r="clientX"in t?t.clientX:t.touches[0].clientX,o="clientY"in t?t.clientY:t.touches[0].clientY;n=r-this.moveX,i=o-this.moveY,this.$nextTick(function(){if(e.centerBox){var s,a,h,c,H=e.getImgAxis(n,i,e.scale),C=e.getCropAxis(),g=e.trueHeight*e.scale,d=e.trueWidth*e.scale;switch(e.rotate){case 1:case-1:case 3:case-3:s=e.cropOffsertX-e.trueWidth*(1-e.scale)/2+(g-d)/2,a=e.cropOffsertY-e.trueHeight*(1-e.scale)/2+(d-g)/2,h=s-g+e.cropW,c=a-d+e.cropH;break;default:s=e.cropOffsertX-e.trueWidth*(1-e.scale)/2,a=e.cropOffsertY-e.trueHeight*(1-e.scale)/2,h=s-d+e.cropW,c=a-g+e.cropH}H.x1>=C.x1&&(n=s),H.y1>=C.y1&&(i=a),H.x2<=C.x2&&(n=h),H.y2<=C.y2&&(i=c)}e.x=n,e.y=i,e.$emit("imgMoving",{moving:!0,axis:e.getImgAxis()}),e.$emit("img-moving",{moving:!0,axis:e.getImgAxis()})})},leaveImg:function(t){window.removeEventListener("mousemove",this.moveImg),window.removeEventListener("touchmove",this.moveImg),window.removeEventListener("mouseup",this.leaveImg),window.removeEventListener("touchend",this.leaveImg),this.$emit("imgMoving",{moving:!1,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!1,axis:this.getImgAxis()})},scaleImg:function(){this.canScale&&window.addEventListener(this.support,this.changeSize,this.passive)},cancelScale:function(){this.canScale&&window.removeEventListener(this.support,this.changeSize)},changeSize:function(t){var e=this;t.preventDefault();var n=this.scale,i=t.deltaY||t.wheelDelta;i=navigator.userAgent.indexOf("Firefox")>0?30*i:i,this.isIE&&(i=-i);var r=this.coe,o=(r=r/this.trueWidth>r/this.trueHeight?r/this.trueHeight:r/this.trueWidth)*i;o<0?n+=Math.abs(o):n>Math.abs(o)&&(n-=Math.abs(o));var s=o<0?"add":"reduce";if(s!==this.coeStatus&&(this.coeStatus=s,this.coe=.2),this.scaling||(this.scalingSet=setTimeout(function(){e.scaling=!1,e.coe=e.coe+=.01},50)),this.scaling=!0,!this.checkoutImgAxis(this.x,this.y,n))return!1;this.scale=n},changeScale:function(t){var e=this.scale;t=t||1;var n=20;if((t*=n=n/this.trueWidth>n/this.trueHeight?n/this.trueHeight:n/this.trueWidth)>0?e+=Math.abs(t):e>Math.abs(t)&&(e-=Math.abs(t)),!this.checkoutImgAxis(this.x,this.y,e))return!1;this.scale=e},createCrop:function(t){var e=this;t.preventDefault();var n="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;this.$nextTick(function(){var r=n-e.cropX,o=i-e.cropY;if(r>0?(e.cropW=r+e.cropChangeX>e.w?e.w-e.cropChangeX:r,e.cropOffsertX=e.cropChangeX):(e.cropW=e.w-e.cropChangeX+Math.abs(r)>e.w?e.cropChangeX:Math.abs(r),e.cropOffsertX=e.cropChangeX+r>0?e.cropChangeX+r:0),e.fixed){var s=e.cropW/e.fixedNumber[0]*e.fixedNumber[1];s+e.cropOffsertY>e.h?(e.cropH=e.h-e.cropOffsertY,e.cropW=e.cropH/e.fixedNumber[1]*e.fixedNumber[0],e.cropOffsertX=r>0?e.cropChangeX:e.cropChangeX-e.cropW):e.cropH=s,e.cropOffsertY=e.cropOffsertY}else o>0?(e.cropH=o+e.cropChangeY>e.h?e.h-e.cropChangeY:o,e.cropOffsertY=e.cropChangeY):(e.cropH=e.h-e.cropChangeY+Math.abs(o)>e.h?e.cropChangeY:Math.abs(o),e.cropOffsertY=e.cropChangeY+o>0?e.cropChangeY+o:0)})},changeCropSize:function(t,e,n,i,r){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=n,this.changeCropTypeX=i,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("changeCropSize",{width:this.cropW,height:this.cropH}),this.$emit("change-crop-size",{width:this.cropW,height:this.cropH})},changeCropNow:function(t){var e=this;t.preventDefault();var n="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,r=this.w,o=this.h,s=0,a=0;if(this.centerBox){var h=this.getImgAxis(),c=h.x2,H=h.y2;s=h.x1>0?h.x1:0,a=h.y1>0?h.y1:0,r>c&&(r=c),o>H&&(o=H)}var C=l(this.checkCropLimitSize(),2),g=C[0],d=C[1];this.$nextTick(function(){var A=n-e.cropX,u=i-e.cropY;if(e.canChangeX&&(e.changeCropTypeX===1?e.cropOldW-A<g?(e.cropW=g,e.cropOffsertX=e.cropOldW+e.cropChangeX-s-g):e.cropOldW-A>0?(e.cropW=r-e.cropChangeX-A<=r-s?e.cropOldW-A:e.cropOldW+e.cropChangeX-s,e.cropOffsertX=r-e.cropChangeX-A<=r-s?e.cropChangeX+A:s):(e.cropW=Math.abs(A)+e.cropChangeX<=r?Math.abs(A)-e.cropOldW:r-e.cropOldW-e.cropChangeX,e.cropOffsertX=e.cropChangeX+e.cropOldW):e.changeCropTypeX===2&&(e.cropOldW+A<g?e.cropW=g:e.cropOldW+A>0?(e.cropW=e.cropOldW+A+e.cropOffsertX<=r?e.cropOldW+A:r-e.cropOffsertX,e.cropOffsertX=e.cropChangeX):(e.cropW=r-e.cropChangeX+Math.abs(A+e.cropOldW)<=r-s?Math.abs(A+e.cropOldW):e.cropChangeX-s,e.cropOffsertX=r-e.cropChangeX+Math.abs(A+e.cropOldW)<=r-s?e.cropChangeX-Math.abs(A+e.cropOldW):s))),e.canChangeY&&(e.changeCropTypeY===1?e.cropOldH-u<d?(e.cropH=d,e.cropOffsertY=e.cropOldH+e.cropChangeY-a-d):e.cropOldH-u>0?(e.cropH=o-e.cropChangeY-u<=o-a?e.cropOldH-u:e.cropOldH+e.cropChangeY-a,e.cropOffsertY=o-e.cropChangeY-u<=o-a?e.cropChangeY+u:a):(e.cropH=Math.abs(u)+e.cropChangeY<=o?Math.abs(u)-e.cropOldH:o-e.cropOldH-e.cropChangeY,e.cropOffsertY=e.cropChangeY+e.cropOldH):e.changeCropTypeY===2&&(e.cropOldH+u<d?e.cropH=d:e.cropOldH+u>0?(e.cropH=e.cropOldH+u+e.cropOffsertY<=o?e.cropOldH+u:o-e.cropOffsertY,e.cropOffsertY=e.cropChangeY):(e.cropH=o-e.cropChangeY+Math.abs(u+e.cropOldH)<=o-a?Math.abs(u+e.cropOldH):e.cropChangeY-a,e.cropOffsertY=o-e.cropChangeY+Math.abs(u+e.cropOldH)<=o-a?e.cropChangeY-Math.abs(u+e.cropOldH):a))),e.canChangeX&&e.fixed){var b=e.cropW/e.fixedNumber[0]*e.fixedNumber[1];b<d?(e.cropH=d,e.cropW=e.fixedNumber[0]*d/e.fixedNumber[1],e.changeCropTypeX===1&&(e.cropOffsertX=e.cropChangeX+(e.cropOldW-e.cropW))):b+e.cropOffsertY>o?(e.cropH=o-e.cropOffsertY,e.cropW=e.cropH/e.fixedNumber[1]*e.fixedNumber[0],e.changeCropTypeX===1&&(e.cropOffsertX=e.cropChangeX+(e.cropOldW-e.cropW))):e.cropH=b}if(e.canChangeY&&e.fixed){var Y=e.cropH/e.fixedNumber[1]*e.fixedNumber[0];Y<g?(e.cropW=g,e.cropH=e.fixedNumber[1]*g/e.fixedNumber[0]):Y+e.cropOffsertX>r?(e.cropW=r-e.cropOffsertX,e.cropH=e.cropW/e.fixedNumber[0]*e.fixedNumber[1]):e.cropW=Y}e.$emit("cropSizing",{cropW:e.cropW,cropH:e.cropH}),e.$emit("crop-sizing",{cropW:e.cropW,cropH:e.cropH})})},checkCropLimitSize:function(){this.cropW,this.cropH;var t=this.limitMinSize,e=new Array;return e=Array.isArray(t)?t:[t,t],[parseFloat(e[0]),parseFloat(e[1])]},changeCropEnd:function(t){window.removeEventListener("mousemove",this.changeCropNow),window.removeEventListener("mouseup",this.changeCropEnd),window.removeEventListener("touchmove",this.changeCropNow),window.removeEventListener("touchend",this.changeCropEnd)},calculateSize:function(t,e,n,i,r,o){var s=t/e,a=r,h=o;return a<n&&(a=n,h=Math.ceil(a/s)),h<i&&(h=i,(a=Math.ceil(h*s))<n&&(a=n,h=Math.ceil(a/s))),a<r&&(a=r,h=Math.ceil(a/s)),h<o&&(h=o,a=Math.ceil(h*s)),{width:a,height:h}},endCrop:function(){this.cropW===0&&this.cropH===0&&(this.cropping=!1);var t=l(this.checkCropLimitSize(),2),e=t[0],n=t[1],i=this.fixed?this.calculateSize(this.fixedNumber[0],this.fixedNumber[1],e,n,this.cropW,this.cropH):{width:e,height:n},r=i.width,o=i.height;r>this.cropW&&(this.cropW=r,this.cropOffsertX+r>this.w&&(this.cropOffsertX=this.w-r)),o>this.cropH&&(this.cropH=o,this.cropOffsertY+o>this.h&&(this.cropOffsertY=this.h-o)),window.removeEventListener("mousemove",this.createCrop),window.removeEventListener("mouseup",this.endCrop),window.removeEventListener("touchmove",this.createCrop),window.removeEventListener("touchend",this.endCrop)},startCrop:function(){this.crop=!0},stopCrop:function(){this.crop=!1},clearCrop:function(){this.cropping=!1,this.cropW=0,this.cropH=0},cropMove:function(t){if(t.preventDefault(),!this.canMoveBox)return this.crop=!1,this.startMove(t),!1;if(t.touches&&t.touches.length===2)return this.crop=!1,this.startMove(t),this.leaveCrop(),!1;window.addEventListener("mousemove",this.moveCrop),window.addEventListener("mouseup",this.leaveCrop),window.addEventListener("touchmove",this.moveCrop),window.addEventListener("touchend",this.leaveCrop);var e,n,i="clientX"in t?t.clientX:t.touches[0].clientX,r="clientY"in t?t.clientY:t.touches[0].clientY;e=i-this.cropOffsertX,n=r-this.cropOffsertY,this.cropX=e,this.cropY=n,this.$emit("cropMoving",{moving:!0,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!0,axis:this.getCropAxis()})},moveCrop:function(t,e){var n=this,i=0,r=0;t&&(t.preventDefault(),i="clientX"in t?t.clientX:t.touches[0].clientX,r="clientY"in t?t.clientY:t.touches[0].clientY),this.$nextTick(function(){var o,s,a=i-n.cropX,h=r-n.cropY;if(e&&(a=n.cropOffsertX,h=n.cropOffsertY),o=a<=0?0:a+n.cropW>n.w?n.w-n.cropW:a,s=h<=0?0:h+n.cropH>n.h?n.h-n.cropH:h,n.centerBox){var c=n.getImgAxis();o<=c.x1&&(o=c.x1),o+n.cropW>c.x2&&(o=c.x2-n.cropW),s<=c.y1&&(s=c.y1),s+n.cropH>c.y2&&(s=c.y2-n.cropH)}n.cropOffsertX=o,n.cropOffsertY=s,n.$emit("cropMoving",{moving:!0,axis:n.getCropAxis()}),n.$emit("crop-moving",{moving:!0,axis:n.getCropAxis()})})},getImgAxis:function(t,e,n){t=t||this.x,e=e||this.y,n=n||this.scale;var i={x1:0,x2:0,y1:0,y2:0},r=this.trueWidth*n,o=this.trueHeight*n;switch(this.rotate){case 0:i.x1=t+this.trueWidth*(1-n)/2,i.x2=i.x1+this.trueWidth*n,i.y1=e+this.trueHeight*(1-n)/2,i.y2=i.y1+this.trueHeight*n;break;case 1:case-1:case 3:case-3:i.x1=t+this.trueWidth*(1-n)/2+(r-o)/2,i.x2=i.x1+this.trueHeight*n,i.y1=e+this.trueHeight*(1-n)/2+(o-r)/2,i.y2=i.y1+this.trueWidth*n;break;default:i.x1=t+this.trueWidth*(1-n)/2,i.x2=i.x1+this.trueWidth*n,i.y1=e+this.trueHeight*(1-n)/2,i.y2=i.y1+this.trueHeight*n}return i},getCropAxis:function(){var t={x1:0,x2:0,y1:0,y2:0};return t.x1=this.cropOffsertX,t.x2=t.x1+this.cropW,t.y1=this.cropOffsertY,t.y2=t.y1+this.cropH,t},leaveCrop:function(t){window.removeEventListener("mousemove",this.moveCrop),window.removeEventListener("mouseup",this.leaveCrop),window.removeEventListener("touchmove",this.moveCrop),window.removeEventListener("touchend",this.leaveCrop),this.$emit("cropMoving",{moving:!1,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!1,axis:this.getCropAxis()})},getCropChecked:function(t){var e=this,n=document.createElement("canvas"),i=n.getContext("2d"),r=new Image,o=this.rotate,s=this.trueWidth,a=this.trueHeight,h=this.cropOffsertX,c=this.cropOffsertY;r.onload=function(){if(e.cropW!==0){var g=1;e.high&!e.full&&(g=window.devicePixelRatio),e.enlarge!==1&!e.full&&(g=Math.abs(Number(e.enlarge)));var d=e.cropW*g,A=e.cropH*g,u=s*e.scale*g,b=a*e.scale*g,Y=(e.x-h+e.trueWidth*(1-e.scale)/2)*g,S=(e.y-c+e.trueHeight*(1-e.scale)/2)*g;switch(C(d,A),i.save(),o){case 0:e.full?(C(d/e.scale,A/e.scale),i.drawImage(r,Y/e.scale,S/e.scale,u/e.scale,b/e.scale)):i.drawImage(r,Y,S,u,b);break;case 1:case-3:e.full?(C(d/e.scale,A/e.scale),Y=Y/e.scale+(u/e.scale-b/e.scale)/2,S=S/e.scale+(b/e.scale-u/e.scale)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,S,-Y-b/e.scale,u/e.scale,b/e.scale)):(Y+=(u-b)/2,S+=(b-u)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,S,-Y-b,u,b));break;case 2:case-2:e.full?(C(d/e.scale,A/e.scale),i.rotate(90*o*Math.PI/180),Y/=e.scale,S/=e.scale,i.drawImage(r,-Y-u/e.scale,-S-b/e.scale,u/e.scale,b/e.scale)):(i.rotate(90*o*Math.PI/180),i.drawImage(r,-Y-u,-S-b,u,b));break;case 3:case-1:e.full?(C(d/e.scale,A/e.scale),Y=Y/e.scale+(u/e.scale-b/e.scale)/2,S=S/e.scale+(b/e.scale-u/e.scale)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,-S-u/e.scale,Y,u/e.scale,b/e.scale)):(Y+=(u-b)/2,S+=(b-u)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,-S-u,Y,u,b));break;default:e.full?(C(d/e.scale,A/e.scale),i.drawImage(r,Y/e.scale,S/e.scale,u/e.scale,b/e.scale)):i.drawImage(r,Y,S,u,b)}i.restore()}else{var L=s*e.scale,I=a*e.scale;switch(i.save(),o){case 0:C(L,I),i.drawImage(r,0,0,L,I);break;case 1:case-3:C(I,L),i.rotate(90*o*Math.PI/180),i.drawImage(r,0,-I,L,I);break;case 2:case-2:C(L,I),i.rotate(90*o*Math.PI/180),i.drawImage(r,-L,-I,L,I);break;case 3:case-1:C(I,L),i.rotate(90*o*Math.PI/180),i.drawImage(r,-L,0,L,I);break;default:C(L,I),i.drawImage(r,0,0,L,I)}i.restore()}t(n)},this.img.substr(0,4)!=="data"&&(r.crossOrigin="Anonymous"),r.src=this.imgs;var H=this.fillColor;function C(g,d){n.width=Math.round(g),n.height=Math.round(d),H&&(i.fillStyle=H,i.fillRect(0,0,n.width,n.height))}},getCropData:function(t){var e=this;this.getCropChecked(function(n){t(n.toDataURL("image/"+e.outputType,e.outputSize))})},getCropBlob:function(t){var e=this;this.getCropChecked(function(n){n.toBlob(function(i){return t(i)},"image/"+e.outputType,e.outputSize)})},showPreview:function(){var t=this;if(!this.isCanShow)return!1;this.isCanShow=!1,setTimeout(function(){t.isCanShow=!0},16);var e=this.cropW,n=this.cropH,i=this.scale,r={};r.div={width:"".concat(e,"px"),height:"".concat(n,"px")};var o=(this.x-this.cropOffsertX)/i,s=(this.y-this.cropOffsertY)/i;r.w=e,r.h=n,r.url=this.imgs,r.img={width:"".concat(this.trueWidth,"px"),height:"".concat(this.trueHeight,"px"),transform:"scale(".concat(i,")translate3d(").concat(o,"px, ").concat(s,"px, ").concat(0,"px)rotateZ(").concat(90*this.rotate,"deg)")},r.html=`
|
||
<div class="show-preview" style="width: `.concat(r.w,"px; height: ").concat(r.h,`px; overflow: hidden">
|
||
<div style="width: `).concat(e,"px; height: ").concat(n,`px">
|
||
<img src=`).concat(r.url,' style="width: ').concat(this.trueWidth,"px; height: ").concat(this.trueHeight,`px; transform:
|
||
scale(`).concat(i,")translate3d(").concat(o,"px, ").concat(s,"px, ").concat(0,"px)rotateZ(").concat(90*this.rotate,`deg)">
|
||
</div>
|
||
</div>`),this.$emit("realTime",r),this.$emit("real-time",r)},reload:function(){var t=this,e=new Image;e.onload=function(){t.w=parseFloat(window.getComputedStyle(t.$refs.cropper).width),t.h=parseFloat(window.getComputedStyle(t.$refs.cropper).height),t.trueWidth=e.width,t.trueHeight=e.height,t.original?t.scale=1:t.scale=t.checkedMode(),t.$nextTick(function(){t.x=-(t.trueWidth-t.trueWidth*t.scale)/2+(t.w-t.trueWidth*t.scale)/2,t.y=-(t.trueHeight-t.trueHeight*t.scale)/2+(t.h-t.trueHeight*t.scale)/2,t.loading=!1,t.autoCrop&&t.goAutoCrop(),t.$emit("img-load","success"),t.$emit("imgLoad","success"),setTimeout(function(){t.showPreview()},20)})},e.onerror=function(){t.$emit("imgLoad","error"),t.$emit("img-load","error")},e.src=this.imgs},checkedMode:function(){var t=1,e=(this.trueWidth,this.trueHeight),n=this.mode.split(" ");switch(n[0]){case"contain":this.trueWidth>this.w&&(t=this.w/this.trueWidth),this.trueHeight*t>this.h&&(t=this.h/this.trueHeight);break;case"cover":(e*=t=this.w/this.trueWidth)<this.h&&(t=(e=this.h)/this.trueHeight);break;default:try{var i=n[0];if(i.search("px")!==-1){i=i.replace("px","");var r=parseFloat(i)/this.trueWidth,o=1,s=n[1];s.search("px")!==-1&&(s=s.replace("px",""),o=(e=parseFloat(s))/this.trueHeight),t=Math.min(r,o)}if(i.search("%")!==-1&&(i=i.replace("%",""),t=parseFloat(i)/100*this.w/this.trueWidth),n.length===2&&i==="auto"){var a=n[1];a.search("px")!==-1&&(a=a.replace("px",""),t=(e=parseFloat(a))/this.trueHeight),a.search("%")!==-1&&(a=a.replace("%",""),t=(e=parseFloat(a)/100*this.h)/this.trueHeight)}}catch{t=1}}return t},goAutoCrop:function(t,e){if(this.imgs!==""&&this.imgs!==null){this.clearCrop(),this.cropping=!0;var n=this.w,i=this.h;if(this.centerBox){var r=Math.abs(this.rotate)%2>0,o=(r?this.trueHeight:this.trueWidth)*this.scale,s=(r?this.trueWidth:this.trueHeight)*this.scale;n=o<n?o:n,i=s<i?s:i}var a=t||parseFloat(this.autoCropWidth),h=e||parseFloat(this.autoCropHeight);a!==0&&h!==0||(a=.8*n,h=.8*i),a=a>n?n:a,h=h>i?i:h,this.fixed&&(h=a/this.fixedNumber[0]*this.fixedNumber[1]),h>this.h&&(a=(h=this.h)/this.fixedNumber[1]*this.fixedNumber[0]),this.changeCrop(a,h)}},changeCrop:function(t,e){var n=this;if(this.centerBox){var i=this.getImgAxis();t>i.x2-i.x1&&(e=(t=i.x2-i.x1)/this.fixedNumber[0]*this.fixedNumber[1]),e>i.y2-i.y1&&(t=(e=i.y2-i.y1)/this.fixedNumber[1]*this.fixedNumber[0])}this.cropW=t,this.cropH=e,this.checkCropLimitSize(),this.$nextTick(function(){n.cropOffsertX=(n.w-n.cropW)/2,n.cropOffsertY=(n.h-n.cropH)/2,n.centerBox&&n.moveCrop(null,!0)})},refresh:function(){var t=this;this.img,this.imgs="",this.scale=1,this.crop=!1,this.rotate=0,this.w=0,this.h=0,this.trueWidth=0,this.trueHeight=0,this.clearCrop(),this.$nextTick(function(){t.checkedImg()})},rotateLeft:function(){this.rotate=this.rotate<=-3?0:this.rotate-1},rotateRight:function(){this.rotate=this.rotate>=3?0:this.rotate+1},rotateClear:function(){this.rotate=0},checkoutImgAxis:function(t,e,n){t=t||this.x,e=e||this.y,n=n||this.scale;var i=!0;if(this.centerBox){var r=this.getImgAxis(t,e,n),o=this.getCropAxis();r.x1>=o.x1&&(i=!1),r.x2<=o.x2&&(i=!1),r.y1>=o.y1&&(i=!1),r.y2<=o.y2&&(i=!1),i||this.changeImgScale(r,o,n)}return i},changeImgScale:function(t,e,n){var i=this.trueWidth,r=this.trueHeight,o=i*n,s=r*n;if(o>=this.cropW&&s>=this.cropH)this.scale=n;else{var a=this.cropW/i,h=this.cropH/r,c=this.cropH<=r*a?a:h;this.scale=c,o=i*c,s=r*c}this.imgIsQqualCrop||(t.x1>=e.x1&&(this.isRotateRightOrLeft?this.x=e.x1-(i-o)/2-(o-s)/2:this.x=e.x1-(i-o)/2),t.x2<=e.x2&&(this.isRotateRightOrLeft?this.x=e.x1-(i-o)/2-(o-s)/2-s+this.cropW:this.x=e.x2-(i-o)/2-o),t.y1>=e.y1&&(this.isRotateRightOrLeft?this.y=e.y1-(r-s)/2-(s-o)/2:this.y=e.y1-(r-s)/2),t.y2<=e.y2&&(this.isRotateRightOrLeft?this.y=e.y2-(r-s)/2-(s-o)/2-o:this.y=e.y2-(r-s)/2-s)),(o<this.cropW||s<this.cropH)&&(this.imgIsQqualCrop=!0)}},mounted:function(){this.support="onwheel"in document.createElement("div")?"wheel":document.onmousewheel!==void 0?"mousewheel":"DOMMouseScroll";var t=this,e=navigator.userAgent;this.isIOS=!!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(n,i,r){for(var o=atob(this.toDataURL(i,r).split(",")[1]),s=o.length,a=new Uint8Array(s),h=0;h<s;h++)a[h]=o.charCodeAt(h);n(new Blob([a],{type:t.type||"image/png"}))}}),this.showPreview(),this.checkedImg()},destroyed:function(){window.removeEventListener("mousemove",this.moveCrop),window.removeEventListener("mouseup",this.leaveCrop),window.removeEventListener("touchmove",this.moveCrop),window.removeEventListener("touchend",this.leaveCrop),this.cancelScale()}};var m=E(72),w=E.n(m),X=E(825),O=E.n(X),M=E(659),z=E.n(M),y=E(56),B=E.n(y),$=E(540),T=E.n($),F=E(113),G=E.n(F),j=E(750),k={};k.styleTagTransform=G(),k.setAttributes=B(),k.insert=z().bind(null,"head"),k.domAPI=O(),k.insertStyleElement=T(),w()(j.A,k),j.A&&j.A.locals&&j.A.locals;var Z=function(t,e,n,i,r,o,s,a){var h,c=typeof t=="function"?t.options:t;return e&&(c.render=e,c.staticRenderFns=[],c._compiled=!0),o&&(c._scopeId="data-v-"+o),{exports:t,options:c}}(x,f,0,0,0,"01ee97ad");const P=Z.exports;var D=function(t){t.component("VueCropper",P)};typeof window<"u"&&window.Vue&&D(window.Vue);const q={version:"0.6.5",install:D,VueCropper:P,vueCropper:P}})(),U})())})(V);var K=V.exports;export{K as d};
|