主要js文件已经附上,其他的vue相关文件在github上都可自行找到,本文中link引入一些php语法,可自行去掉
这是效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="no-referrer" />
<meta name="referrer" content="never">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no" />
<title>会议</title>
<link rel="stylesheet" href="<?php echo $view['assets']->getCdnHost(); ?>assets/v2/css/element-ui.css">
</head>
<body></body>
<div id="upload">
<div>
<h2> test-upload</h2>
<div>
<el-form :model="dataFormList" ref="dataFormList" label-width="140px" class="demo-dataFormList">
<el-form-item v-show="!isonSiteMap" label="封面图" required>
<div class='el-select' @click.stop style=" margin-right: 65px">
<el-upload
ref="uploader"
class="avatar-uploader upload-resource"
id="avatar-uploader"
:accept="my_accept"
list-type='picture'
data-sdfsd="nihao"
:show-file-list="false"
:http-request="customUpload"
>
<img v-if="dataFormList.article_image" :src="dataFormList.article_image" class="avatar">
<i v-else-if="imageLoading" v-loading="imageLoading" class="my-el-icon-plus el-icon-plus avatar-uploader-icon"></i>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<span v-if="dataFormList.article_image" class="el-upload-list__item-actions">
<span class="upload-icon" @click.stop.prevent>
<span class="el-uploads-span" style="margin-right: 16px;margin-left: 8px;" @click.sotp="oploadImgPre('we_share_img')">
<i class="el-icon-zoom-in"></i>
</span>
<span class="el-upload-span" @click.stop="oploadImgDel">
<i class="el-icon-delete"></i>
</span>
</span>
</span>
<el-dialog :visible.sync="imgdialogVisible" append-to-body title="预览图片">
<img width="100%" :src="dataFormList.article_image" alt="">
</el-dialog>
</el-upload>
<p class="tips">{{tips}}</p>
</div>
</el-form-item>
</el-form>
<el-dialog title="裁剪图片" width="1000px" :visible.sync="dialogFormVisible_two_img">
<div style="height:500px" v-loading="loading">
<vue-cropper
ref="cropper2"
:img="example2.img"
:output-size="example2.size"
:output-type="example2.outputType"
:info="example2.info"
:can-move='example2.canMove'
:fixed-box="example2.fixedBox"
:center-box="example2.centerBox"
:can-scale="example2.canScale"
:auto-crop="example2.autoCrop"
:auto-crop-width="example2.autoCropWidth"
:auto-crop-height="example2.autoCropHeight"
:fixed="example2.fixed"
:fixed-number="example2.fixedNumber"
></vue-cropper>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible_two_img = false">取 消</el-button>
<el-button type="primary" @click="getCropper">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</body>
</html>
<script src="/assets/v2/vue/vue.min.js"></script>
<script src="/assets/v2/axios/axios.min.js"></script>
<script src="/assets/v2/element-js/index.js"></script>
<script src="/assets/v2/element-js/dialog-drag.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script>
<script>
Vue.use(window['vue-cropper'].default.VueCropper)
new Vue({
el: '#upload',
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
isonSiteMap:'',
option:'',
dataFormList: {
article_image: "",
},
dialogFormVisible_two_img:false, //截图弹框控制
example2: {
img: "", // 裁剪图片的地址 可选值:url 地址 || base64 || blob
info: true, // 裁剪框的大小信息 可选值:true || false
size: 1, // 裁剪生成图片的质量 可选值:0.1 - 1
outputType:'png', // 裁剪生成图片的格式 可选值:jpeg || png || webp
canScale: false, // 图片是否允许滚轮缩放 可选值:true || false
autoCrop: true, // 是否默认生成截图框
canMove:true, // 上传图片是否可以移动 可选值:true | false
fixedBox:true, // 固定截图框大小 不允许改变 可选值:true | false
centerBox:false, // 截图框是否被限制在图片里面
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 300, //截图框宽度
autoCropHeight: 300, //截图框高度
fixed: false, // 开启宽度和高度比例
fixedNumber: [1, 1]
},
loading:false,
imgdialogVisible:false,
tips:"建议上传尺寸宽度为750px,高度不超过2500px的图片。 仅支持上传JPG、JPEG、PNG文件,且小于5M。",
imageLoading:'',
curName:'',
limit_size:'5',
my_accept:'image/png,image/jpg,image/jpeg',
requestUrl:'/s/ajax?action=plugin:wechat:upload_file ',
requestMockUrl:'/s/ajax?action=plugin:wechat:upload_file ',
};
},
mounted() {
},
filters: {},
computed: {},
watch: {
},
methods: {
oploadImgPre(type){
this.imgdialogVisible = true;
},
oploadImgDel(type){
this.dataFormList.article_image = '';
// document.querySelector(".el-upload").click()
this.$refs.uploader.$el.childNodes[0].click();
console.log('gl---',this.$refs.uploader);
},
before_img(){},
customUpload(res){
console.log("上传",res)
let that = this
var reader = new FileReader();
this.curName = res.file.name;
reader.readAsArrayBuffer(res.file);
reader.onload=function(e){
var bf = this.result;
var blob = new Blob([bf],{type:"text/plain"});
var str = URL.createObjectURL(blob);
that.dialogFormVisible_two_img = true
that.example2.img = str
};
},
getCropper(){
let that = this
this.loading = true;
this.$refs.cropper2.getCropData(data => {
// do something
// console.log('gl---base64-data',data)
})
this.$refs.cropper2.getCropBlob(res=>{
console.log('gl---Blob-res',res);
let formData = new FormData(); // 项目整体格式上传采用form数据上传
var fileOfBlob = new File([res], this.curName);
formData.append("file", fileOfBlob);
console.log('gl---formData',formData);
axios({
method: 'post',
url: this.requestUrl,
mockurl: this.requestMockUrl,
data: formData
}).then((res)=>{
this.loading = false;
console.log('gl----upload_file',res);
if(res.data.code == 200){
this.dataFormList.article_image = res.data.data.url;
this.dialogFormVisible_two_img = false;
this.imageLoading = false;
this.$message({
type:'success',
message:'上传成功!',
})
}else{
this.imageLoading = false;
this.$message.error(res.data.msg);
}
}).catch((res) => {
this.loading = false;
console.log(res);
});
})
},
},
})
</script>
<style>
.avatar-uploader{
display: flex;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 150px;
display: block;
}
.my-el-icon-plus:before{
content: '';
}
</style>
这是dialog-drag.js
var dialogDrag = {
bind(el) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cssText += ';cursor:move;';
// 获取原有属性 ie dom 元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
const w = document.documentElement.clientWidth;
const h = document.documentElement.clientHeight;
const headerWidth = dialogHeaderEl.offsetWidth;
const headerHeight = dialogHeaderEl.offsetHeight;
const domHeight = dragDom.offsetHeight;
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
const cursor2left = e.clientX - dialogHeaderEl.getBoundingClientRect().left;
const cursor2right = headerWidth - cursor2left;
const cursor2top = e.clientY - dragDom.getBoundingClientRect().top;
const cursor2bottom = domHeight - cursor2top;
// 获取到的值带 px 正则匹配替换
let styL, styT;
// 注意在 ie 中 第一次获取到的值为组件自带 50% 移动之后赋值为 px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
} else {
styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, '');
}
document.onmousemove = function(e) {
// 通过事件委托,计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
if (e.clientX < headerWidth) {
// 命中左侧极端值区域,l 取极小值
l = l + cursor2left - e.clientX;
}
if (e.clientX + cursor2right > w) {
// 命中右侧极端值区域,l 取极大值
l = l - (e.clientX + cursor2right - w);
}
if (e.clientY < headerHeight) {
// 命中上侧极端值区域, t 取极小值
t = t + cursor2top - e.clientY;
}
if (e.clientY + cursor2bottom > h) {
// 命中下侧极端值区域, t 取极大值
t = t - (e.clientY + cursor2bottom - h);
}
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
Vue.directive('el-dialog-drag', dialogDrag)
这是vue-cropper@0.4.9/dist/index.js
!function(t, e) {
"object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define("vue-cropper", [], e) : "object" == typeof exports ? exports["vue-cropper"] = e() : t["vue-cropper"] = e()
}(window, function() {
return function(t) {
var e = {};
function o(n) {
if (e[n])
return e[n].exports;
var r = e[n] = {
i: n,
l: !1,
exports: {}
};
return t[n].call(r.exports, r, r.exports, o),
r.l = !0,
r.exports
}
return o.m = t,
o.c = e,
o.d = function(t, e, n) {
o.o(t, e) || Object.defineProperty(t, e, {
enumerable: !0,
get: n
})
}
,
o.r = function(t) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {
value: "Module"
}),
Object.defineProperty(t, "__esModule", {
value: !0
})
}
,
o.t = function(t, e) {
if (1 & e && (t = o(t)),
8 & e)
return t;
if (4 & e && "object" == typeof t && t && t.__esModule)
return t;
var n = Object.create(null);
if (o.r(n),
Object.defineProperty(n, "default", {
enumerable: !0,
value: t
}),
2 & e && "string" != typeof t)
for (var r in t)
o.d(n, r, function(e) {
return t[e]
}
.bind(null, r));
return n
}
,
o.n = function(t) {
var e = t && t.__esModule ? function() {
return t.default
}
: function() {
return t
}
;
return o.d(e, "a", e),
e
}
,
o.o = function(t, e) {
return Object.prototype.hasOwnProperty.call(t, e)
}
,
o.p = "",
o(o.s = 6)
}([function(t, e, o) {
var n = o(2);
"string" == typeof n && (n = [[t.i, n, ""]]);
var r = {
hmr: !0,
transform: void 0,
insertInto: void 0
};
o(4)(n, r);
n.locals && (t.exports = n.locals)
}
, function(t, e, o) {
"use strict";
var n = o(0);
o.n(n).a
}
, function(t, e, o) {
(t.exports = o(3)(!1)).push([t.i, '\n.vue-cropper[data-v-6dae58fd] {\n position: relative;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n direction: ltr;\n touch-action: none;\n text-align: left;\n background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");\n}\n.cropper-box[data-v-6dae58fd],\n.cropper-box-canvas[data-v-6dae58fd],\n.cropper-drag-box[data-v-6dae58fd],\n.cropper-crop-box[data-v-6dae58fd],\n.cropper-face[data-v-6dae58fd] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n user-select: none;\n}\n.cropper-box-canvas img[data-v-6dae58fd] {\n position: relative;\n text-align: left;\n user-select: none;\n transform: none;\n max-width: none;\n max-height: none;\n}\n.cropper-box[data-v-6dae58fd] {\n overflow: hidden;\n}\n.cropper-move[data-v-6dae58fd] {\n cursor: move;\n}\n.cropper-crop[data-v-6dae58fd] {\n cursor: crosshair;\n}\n.cropper-modal[data-v-6dae58fd] {\n background: rgba(0, 0, 0, 0.5);\n}\n.cropper-crop-box[data-v-6dae58fd] {\n /*border: 2px solid #39f;*/\n}\n.cropper-view-box[data-v-6dae58fd] {\n display: block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n outline: 1px solid #39f;\n outline-color: rgba(51, 153, 255, 0.75);\n user-select: none;\n}\n.cropper-view-box img[data-v-6dae58fd] {\n user-select: none;\n text-align: left;\n max-width: none;\n max-height: none;\n}\n.cropper-face[data-v-6dae58fd] {\n top: 0;\n left: 0;\n background-color: #fff;\n opacity: 0.1;\n}\n.crop-info[data-v-6dae58fd] {\n position: absolute;\n left: 0px;\n min-width: 65px;\n text-align: center;\n color: white;\n line-height: 20px;\n background-color: rgba(0, 0, 0, 0.8);\n font-size: 12px;\n}\n.crop-line[data-v-6dae58fd] {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n opacity: 0.1;\n}\n.line-w[data-v-6dae58fd] {\n top: -3px;\n left: 0;\n height: 5px;\n cursor: n-resize;\n}\n.line-a[data-v-6dae58fd] {\n top: 0;\n left: -3px;\n width: 5px;\n cursor: w-resize;\n}\n.line-s[data-v-6dae58fd] {\n bottom: -3px;\n left: 0;\n height: 5px;\n cursor: s-resize;\n}\n.line-d[data-v-6dae58fd] {\n top: 0;\n right: -3px;\n width: 5px;\n cursor: e-resize;\n}\n.crop-point[data-v-6dae58fd] {\n position: absolute;\n width: 8px;\n height: 8px;\n opacity: 0.75;\n background-color: #39f;\n border-radius: 100%;\n}\n.point1[data-v-6dae58fd] {\n top: -4px;\n left: -4px;\n cursor: nw-resize;\n}\n.point2[data-v-6dae58fd] {\n top: -5px;\n left: 50%;\n margin-left: -3px;\n cursor: n-resize;\n}\n.point3[data-v-6dae58fd] {\n top: -4px;\n right: -4px;\n cursor: ne-resize;\n}\n.point4[data-v-6dae58fd] {\n top: 50%;\n left: -4px;\n margin-top: -3px;\n cursor: w-resize;\n}\n.point5[data-v-6dae58fd] {\n top: 50%;\n right: -4px;\n margin-top: -3px;\n cursor: e-resize;\n}\n.point6[data-v-6dae58fd] {\n bottom: -5px;\n left: -4px;\n cursor: sw-resize;\n}\n.point7[data-v-6dae58fd] {\n bottom: -5px;\n left: 50%;\n margin-left: -3px;\n cursor: s-resize;\n}\n.point8[data-v-6dae58fd] {\n bottom: -5px;\n right: -4px;\n cursor: se-resize;\n}\n@media screen and (max-width: 500px) {\n.crop-point[data-v-6dae58fd] {\n position: absolute;\n width: 20px;\n height: 20px;\n opacity: 0.45;\n background-color: #39f;\n border-radius: 100%;\n}\n.point1[data-v-6dae58fd] {\n top: -10px;\n left: -10px;\n}\n.point2[data-v-6dae58fd],\n .point4[data-v-6dae58fd],\n .point5[data-v-6dae58fd],\n .point7[data-v-6dae58fd] {\n display: none;\n}\n.point3[data-v-6dae58fd] {\n top: -10px;\n right: -10px;\n}\n.point4[data-v-6dae58fd] {\n top: 0;\n left: 0;\n}\n.point6[data-v-6dae58fd] {\n bottom: -10px;\n left: -10px;\n}\n.point8[data-v-6dae58fd] {\n bottom: -10px;\n right: -10px;\n}\n}\n', ""])
}
, function(t, e) {
t.exports = function(t) {
var e = [];
return e.toString = function() {
return this.map(function(e) {
var o = function(t, e) {
var o = t[1] || ""
, n = t[3];
if (!n)
return o;
if (e && "function" == typeof btoa) {
var r = function(t) {
return "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(t)))) + " */"
}(n)
, i = n.sources.map(function(t) {
return "/*# sourceURL=" + n.sourceRoot + t + " */"
});
return [o].concat(i).concat([r]).join("\n")
}
return [o].join("\n")
}(e, t);
return e[2] ? "@media " + e[2] + "{" + o + "}" : o
}).join("")
}
,
e.i = function(t, o) {
"string" == typeof t && (t = [[null, t, ""]]);
for (var n = {}, r = 0; r < this.length; r++) {
var i = this[r][0];
"number" == typeof i && (n[i] = !0)
}
for (r = 0; r < t.length; r++) {
var s = t[r];
"number" == typeof s[0] && n[s[0]] || (o && !s[2] ? s[2] = o : o && (s[2] = "(" + s[2] + ") and (" + o + ")"),
e.push(s))
}
}
,
e
}
}
, function(t, e, o) {
var n = {}
, r = function(t) {
var e;
return function() {
return void 0 === e && (e = t.apply(this, arguments)),
e
}
}(function() {
return window && document && document.all && !window.atob
})
, i = function(t) {
var e = {};
return function(t, o) {
if ("function" == typeof t)
return t();
if (void 0 === e[t]) {
var n = function(t, e) {
return e ? e.querySelector(t) : document.querySelector(t)
}
.call(this, t, o);
if (window.HTMLIFrameElement && n instanceof window.HTMLIFrameElement)
try {
n = n.contentDocument.head
} catch (t) {
n = null
}
e[t] = n
}
return e[t]
}
}()
, s = null
, a = 0
, c = []
, h = o(5);
function p(t, e) {
for (var o = 0; o < t.length; o++) {
var r = t[o]
, i = n[r.id];
if (i) {
i.refs++;
for (var s = 0; s < i.parts.length; s++)
i.parts[s](r.parts[s]);
for (; s < r.parts.length; s++)
i.parts.push(v(r.parts[s], e))
} else {
var a = [];
for (s = 0; s < r.parts.length; s++)
a.push(v(r.parts[s], e));
n[r.id] = {
id: r.id,
refs: 1,
parts: a
}
}
}
}
function u(t, e) {
for (var o = [], n = {}, r = 0; r < t.length; r++) {
var i = t[r]
, s = e.base ? i[0] + e.base : i[0]
, a = {
css: i[1],
media: i[2],
sourceMap: i[3]
};
n[s] ? n[s].parts.push(a) : o.push(n[s] = {
id: s,
parts: [a]
})
}
return o
}
function d(t, e) {
var o = i(t.insertInto);
if (!o)
throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
var n = c[c.length - 1];
if ("top" === t.insertAt)
n ? n.nextSibling ? o.insertBefore(e, n.nextSibling) : o.appendChild(e) : o.insertBefore(e, o.firstChild),
c.push(e);
else if ("bottom" === t.insertAt)
o.appendChild(e);
else {
if ("object" != typeof t.insertAt || !t.insertAt.before)
throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
var r = i(t.insertAt.before, o);
o.insertBefore(e, r)
}
}
function l(t) {
if (null === t.parentNode)
return !1;
t.parentNode.removeChild(t);
var e = c.indexOf(t);
e >= 0 && c.splice(e, 1)
}
function f(t) {
var e = document.createElement("style");
if (void 0 === t.attrs.type && (t.attrs.type = "text/css"),
void 0 === t.attrs.nonce) {
var n = function() {
0;
return o.nc
}();
n && (t.attrs.nonce = n)
}
return g(e, t.attrs),
d(t, e),
e
}
function g(t, e) {
Object.keys(e).forEach(function(o) {
t.setAttribute(o, e[o])
})
}
function v(t, e) {
var o, n, r, i;
if (e.transform && t.css) {
if (!(i = "function" == typeof e.transform ? e.transform(t.css) : e.transform.default(t.css)))
return function() {}
;
t.css = i
}
if (e.singleton) {
var c = a++;
o = s || (s = f(e)),
n = w.bind(null, o, c, !1),
r = w.bind(null, o, c, !0)
} else
t.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (o = function(t) {
var e = document.createElement("link");
return void 0 === t.attrs.type && (t.attrs.type = "text/css"),
t.attrs.rel = "stylesheet",
g(e, t.attrs),
d(t, e),
e
}(e),
n = function(t, e, o) {
var n = o.css
, r = o.sourceMap
, i = void 0 === e.convertToAbsoluteUrls && r;
(e.convertToAbsoluteUrls || i) && (n = h(n));
r && (n += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(r)))) + " */");
var s = new Blob([n],{
type: "text/css"
})
, a = t.href;
t.href = URL.createObjectURL(s),
a && URL.revokeObjectURL(a)
}
.bind(null, o, e),
r = function() {
l(o),
o.href && URL.revokeObjectURL(o.href)
}
) : (o = f(e),
n = function(t, e) {
var o = e.css
, n = e.media;
n && t.setAttribute("media", n);
if (t.styleSheet)
t.styleSheet.cssText = o;
else {
for (; t.firstChild; )
t.removeChild(t.firstChild);
t.appendChild(document.createTextNode(o))
}
}
.bind(null, o),
r = function() {
l(o)
}
);
return n(t),
function(e) {
if (e) {
if (e.css === t.css && e.media === t.media && e.sourceMap === t.sourceMap)
return;
n(t = e)
} else
r()
}
}
t.exports = function(t, e) {
if ("undefined" != typeof DEBUG && DEBUG && "object" != typeof document)
throw new Error("The style-loader cannot be used in a non-browser environment");
(e = e || {}).attrs = "object" == typeof e.attrs ? e.attrs : {},
e.singleton || "boolean" == typeof e.singleton || (e.singleton = r()),
e.insertInto || (e.insertInto = "head"),
e.insertAt || (e.insertAt = "bottom");
var o = u(t, e);
return p(o, e),
function(t) {
for (var r = [], i = 0; i < o.length; i++) {
var s = o[i];
(a = n[s.id]).refs--,
r.push(a)
}
t && p(u(t, e), e);
for (i = 0; i < r.length; i++) {
var a;
if (0 === (a = r[i]).refs) {
for (var c = 0; c < a.parts.length; c++)
a.parts[c]();
delete n[a.id]
}
}
}
}
;
var m = function() {
var t = [];
return function(e, o) {
return t[e] = o,
t.filter(Boolean).join("\n")
}
}();
function w(t, e, o, n) {
var r = o ? "" : n.css;
if (t.styleSheet)
t.styleSheet.cssText = m(e, r);
else {
var i = document.createTextNode(r)
, s = t.childNodes;
s[e] && t.removeChild(s[e]),
s.length ? t.insertBefore(i, s[e]) : t.appendChild(i)
}
}
}
, function(t, e) {
t.exports = function(t) {
var e = "undefined" != typeof window && window.location;
if (!e)
throw new Error("fixUrls requires window.location");
if (!t || "string" != typeof t)
return t;
var o = e.protocol + "//" + e.host
, n = o + e.pathname.replace(/\/[^\/]*$/, "/");
return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(t, e) {
var r, i = e.trim().replace(/^"(.*)"$/, function(t, e) {
return e
}).replace(/^'(.*)'$/, function(t, e) {
return e
});
return /^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i) ? t : (r = 0 === i.indexOf("//") ? i : 0 === i.indexOf("/") ? o + i : n + i.replace(/^\.\//, ""),
"url(" + JSON.stringify(r) + ")")
})
}
}
, function(t, e, o) {
"use strict";
o.r(e);
var n = function() {
var t = this
, e = t.$createElement
, o = t._self._c || e;
return o("div", {
ref: "cropper",
staticClass: "vue-cropper",
on: {
mouseover: t.scaleImg,
mouseout: t.cancelScale
}
}, [o("div", {
staticClass: "cropper-box"
}, [o("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)"
}
}, [o("img", {
ref: "cropperImg",
attrs: {
src: t.imgs,
alt: "cropper-img"
}
})])]), t._v(" "), o("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(" "), o("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)"
}
}, [o("span", {
staticClass: "cropper-view-box"
}, [o("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(" "), o("span", {
staticClass: "cropper-face cropper-move",
on: {
mousedown: t.cropMove,
touchstart: t.cropMove
}
}), t._v(" "), t.info ? o("span", {
staticClass: "crop-info",
style: {
top: t.cropInfo.top
}
}, [t._v(t._s(this.cropInfo.width) + " × " + t._s(this.cropInfo.height))]) : t._e(), t._v(" "), t.fixedBox ? t._e() : o("span", [o("span", {
staticClass: "crop-line line-w",
on: {
mousedown: function(e) {
t.changeCropSize(e, !1, !0, 0, 1)
},
touchstart: function(e) {
t.changeCropSize(e, !1, !0, 0, 1)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-line line-a",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !1, 1, 0)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !1, 1, 0)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-line line-s",
on: {
mousedown: function(e) {
t.changeCropSize(e, !1, !0, 0, 2)
},
touchstart: function(e) {
t.changeCropSize(e, !1, !0, 0, 2)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-line line-d",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !1, 2, 0)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !1, 2, 0)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point1",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !0, 1, 1)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !0, 1, 1)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point2",
on: {
mousedown: function(e) {
t.changeCropSize(e, !1, !0, 0, 1)
},
touchstart: function(e) {
t.changeCropSize(e, !1, !0, 0, 1)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point3",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !0, 2, 1)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !0, 2, 1)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point4",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !1, 1, 0)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !1, 1, 0)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point5",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !1, 2, 0)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !1, 2, 0)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point6",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !0, 1, 2)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !0, 1, 2)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point7",
on: {
mousedown: function(e) {
t.changeCropSize(e, !1, !0, 0, 2)
},
touchstart: function(e) {
t.changeCropSize(e, !1, !0, 0, 2)
}
}
}), t._v(" "), o("span", {
staticClass: "crop-point point8",
on: {
mousedown: function(e) {
t.changeCropSize(e, !0, !0, 2, 2)
},
touchstart: function(e) {
t.changeCropSize(e, !0, !0, 2, 2)
}
}
})])])])
};
n._withStripped = !0;
var r = {};
r.getData = function(t) {
return new Promise(function(e, o) {
var n = {};
(function(t) {
var e = null;
return new Promise(function(o, n) {
if (t.src)
if (/^data\:/i.test(t.src))
e = function(t) {
t = t.replace(/^data\:([^\;]+)\;base64,/gim, "");
for (var e = atob(t), o = e.length, n = new ArrayBuffer(o), r = new Uint8Array(n), i = 0; i < o; i++)
r[i] = e.charCodeAt(i);
return n
}(t.src),
o(e);
else if (/^blob\:/i.test(t.src)) {
var r = new FileReader;
r.onload = function(t) {
e = t.target.result,
o(e)
}
,
function(t, e) {
var o = new XMLHttpRequest;
o.open("GET", t, !0),
o.responseType = "blob",
o.onload = function(t) {
200 != this.status && 0 !== this.status || e(this.response)
}
,
o.send()
}(t.src, function(t) {
r.readAsArrayBuffer(t)
})
} else {
var i = new XMLHttpRequest;
i.onload = function() {
if (200 != this.status && 0 !== this.status)
throw "Could not load image";
e = i.response,
o(e),
i = null
}
,
i.open("GET", t.src, !0),
i.responseType = "arraybuffer",
i.send(null)
}
else
n("img error")
}
)
}
)(t).then(function(t) {
n.arrayBuffer = t,
n.orientation = function(t) {
var e, o, n, r, i, s, a, c, h, p = new DataView(t), u = p.byteLength;
if (255 === p.getUint8(0) && 216 === p.getUint8(1))
for (c = 2; c < u; ) {
if (255 === p.getUint8(c) && 225 === p.getUint8(c + 1)) {
s = c;
break
}
c++
}
s && (o = s + 10,
"Exif" === function(t, e, o) {
var n, r = "";
for (n = e,
o += e; n < o; n++)
r += String.fromCharCode(t.getUint8(n));
return r
}(p, s + 4, 4) && (i = p.getUint16(o),
((r = 18761 === i) || 19789 === i) && 42 === p.getUint16(o + 2, r) && (n = p.getUint32(o + 4, r)) >= 8 && (a = o + n)));
if (a)
for (u = p.getUint16(a, r),
h = 0; h < u; h++)
if (c = a + 12 * h + 2,
274 === p.getUint16(c, r)) {
c += 8,
e = p.getUint16(c, r);
break
}
return e
}(t),
e(n)
}).catch(function(t) {
o(t)
})
}
)
}
;
var i = r
, s = {
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
}
},
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,
default: 2e3
},
enlarge: {
type: [Number, String],
default: 1
},
preW: {
type: [Number, String],
default: 0
},
mode: {
type: String,
default: "contain"
}
},
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),
1 !== this.enlarge & !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() {
var t = navigator.userAgent
, e = t.indexOf("compatible") > -1 && t.indexOf("MSIE") > -1;
return e
}
},
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.goAutoCrop(this.cropW, this.cropH) : (this.cropW > 0 || this.cropH > 0) && this.goAutoCrop(this.cropW, this.cropH)
}
},
methods: {
checkOrientationImage: function(t, e, o, n) {
var r = this
, i = document.createElement("canvas")
, s = i.getContext("2d");
switch (s.save(),
e) {
case 2:
i.width = o,
i.height = n,
s.translate(o, 0),
s.scale(-1, 1);
break;
case 3:
i.width = o,
i.height = n,
s.translate(o / 2, n / 2),
s.rotate(180 * Math.PI / 180),
s.translate(-o / 2, -n / 2);
break;
case 4:
i.width = o,
i.height = n,
s.translate(0, n),
s.scale(1, -1);
break;
case 5:
i.height = o,
i.width = n,
s.rotate(.5 * Math.PI),
s.scale(1, -1);
break;
case 6:
i.width = n,
i.height = o,
s.translate(n / 2, o / 2),
s.rotate(90 * Math.PI / 180),
s.translate(-o / 2, -n / 2);
break;
case 7:
i.height = o,
i.width = n,
s.rotate(.5 * Math.PI),
s.translate(o, -n),
s.scale(-1, 1);
break;
case 8:
i.height = o,
i.width = n,
s.translate(n / 2, o / 2),
s.rotate(-90 * Math.PI / 180),
s.translate(-o / 2, -n / 2);
break;
default:
i.width = o,
i.height = n
}
s.drawImage(t, 0, 0, o, n),
s.restore(),
i.toBlob(function(t) {
var e = URL.createObjectURL(t);
r.imgs = e
}, "image/" + this.outputType, 1)
},
checkedImg: function() {
var t = this;
if ("" !== this.img) {
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"),
!1;
var o = e.width
, n = e.height;
i.getData(e).then(function(r) {
t.orientation = r.orientation || 1;
var i = t.maxImgSize;
!t.orientation && o < i & n < i ? t.imgs = t.img : (o > i && (n = n / o * i,
o = i),
n > i && (o = o / n * i,
n = i),
t.checkOrientationImage(e, t.orientation, o, n))
})
}
,
e.onerror = function() {
t.$emit("imgLoad", "error"),
t.$emit("img-load", "error")
}
,
"data" !== this.img.substr(0, 4) && (e.crossOrigin = ""),
this.isIE) {
var o = new XMLHttpRequest;
o.onload = function() {
var t = URL.createObjectURL(this.response);
e.src = t
}
,
o.open("GET", this.img, !0),
o.responseType = "blob",
o.send()
} else
e.src = this.img
}
},
startMove: function(t) {
if (t.preventDefault(),
this.move && !this.crop) {
if (!this.canMove)
return !1;
this.moveX = (t.clientX ? t.clientX : t.touches[0].clientX) - this.x,
this.moveY = (t.clientY ? t.clientY : t.touches[0].clientY) - this.y,
t.touches ? (window.addEventListener("touchmove", this.moveImg),
window.addEventListener("touchend", this.leaveImg),
2 == t.touches.length && (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 = t.clientX ? t.clientX : t.touches[0].clientX,
this.cropY = t.clientY ? 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 o = this.scale
, n = this.touches[0].clientX
, r = this.touches[0].clientY
, i = t.touches[0].clientX
, s = t.touches[0].clientY
, a = this.touches[1].clientX
, c = this.touches[1].clientY
, h = t.touches[1].clientX
, p = t.touches[1].clientY
, u = Math.sqrt(Math.pow(n - a, 2) + Math.pow(r - c, 2))
, d = Math.sqrt(Math.pow(i - h, 2) + Math.pow(s - p, 2)) - u
, l = 1
, f = (l = (l = l / this.trueWidth > l / this.trueHeight ? l / this.trueHeight : l / this.trueWidth) > .1 ? .1 : l) * d;
if (!this.touchNow) {
if (this.touchNow = !0,
d > 0 ? o += Math.abs(f) : d < 0 && o > Math.abs(f) && (o -= Math.abs(f)),
this.touches = t.touches,
setTimeout(function() {
e.touchNow = !1
}, 8),
!this.checkoutImgAxis(this.x, this.y, o))
return !1;
this.scale = o
}
},
cancelTouchScale: function(t) {
window.removeEventListener("touchmove", this.touchScale)
},
moveImg: function(t) {
var e = this;
if (t.preventDefault(),
t.touches && 2 === t.touches.length)
return this.touches = t.touches,
window.addEventListener("touchmove", this.touchScale),
window.addEventListener("touchend", this.cancelTouchScale),
window.removeEventListener("touchmove", this.moveImg),
!1;
var o, n, r = t.clientX ? t.clientX : t.touches[0].clientX, i = t.clientY ? t.clientY : t.touches[0].clientY;
o = r - this.moveX,
n = i - this.moveY,
this.$nextTick(function() {
if (e.centerBox) {
var t, r, i, s, a = e.getImgAxis(o, n, e.scale), c = e.getCropAxis(), h = e.trueHeight * e.scale, p = e.trueWidth * e.scale;
switch (e.rotate) {
case 1:
case -1:
case 3:
case -3:
t = e.cropOffsertX - e.trueWidth * (1 - e.scale) / 2 + (h - p) / 2,
r = e.cropOffsertY - e.trueHeight * (1 - e.scale) / 2 + (p - h) / 2,
i = t - h + e.cropW,
s = r - p + e.cropH;
break;
default:
t = e.cropOffsertX - e.trueWidth * (1 - e.scale) / 2,
r = e.cropOffsertY - e.trueHeight * (1 - e.scale) / 2,
i = t - p + e.cropW,
s = r - h + e.cropH
}
a.x1 >= c.x1 && (o = t),
a.y1 >= c.y1 && (n = r),
a.x2 <= c.x2 && (o = i),
a.y2 <= c.y2 && (n = s)
}
e.x = o,
e.y = n,
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, {
passive: !1
})
},
cancelScale: function() {
this.canScale && window.removeEventListener(this.support, this.changeSize)
},
changeSize: function(t) {
var e = this;
t.preventDefault();
var o = this.scale
, n = t.deltaY || t.wheelDelta;
n = navigator.userAgent.indexOf("Firefox") > 0 ? 30 * n : n,
this.isIE && (n = -n);
var r = this.coe
, i = (r = r / this.trueWidth > r / this.trueHeight ? r / this.trueHeight : r / this.trueWidth) * n;
i < 0 ? o += Math.abs(i) : o > Math.abs(i) && (o -= Math.abs(i));
var s = i < 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, o))
return !1;
this.scale = o
},
changeScale: function(t) {
var e = this.scale;
t = t || 1;
var o = 20;
if ((t *= o = o / this.trueWidth > o / this.trueHeight ? o / this.trueHeight : o / 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 o = t.clientX ? t.clientX : t.touches ? t.touches[0].clientX : 0
, n = t.clientY ? t.clientY : t.touches ? t.touches[0].clientY : 0;
this.$nextTick(function() {
var t = o - e.cropX
, r = n - e.cropY;
if (t > 0 ? (e.cropW = t + e.cropChangeX > e.w ? e.w - e.cropChangeX : t,
e.cropOffsertX = e.cropChangeX) : (e.cropW = e.w - e.cropChangeX + Math.abs(t) > e.w ? e.cropChangeX : Math.abs(t),
e.cropOffsertX = e.cropChangeX + t > 0 ? e.cropChangeX + t : 0),
e.fixed) {
var i = e.cropW / e.fixedNumber[0] * e.fixedNumber[1];
i + e.cropOffsertY > e.h ? (e.cropH = e.h - e.cropOffsertY,
e.cropW = e.cropH / e.fixedNumber[1] * e.fixedNumber[0],
e.cropOffsertX = t > 0 ? e.cropChangeX : e.cropChangeX - e.cropW) : e.cropH = i,
e.cropOffsertY = e.cropOffsertY
} else
r > 0 ? (e.cropH = r + e.cropChangeY > e.h ? e.h - e.cropChangeY : r,
e.cropOffsertY = e.cropChangeY) : (e.cropH = e.h - e.cropChangeY + Math.abs(r) > e.h ? e.cropChangeY : Math.abs(r),
e.cropOffsertY = e.cropChangeY + r > 0 ? e.cropChangeY + r : 0)
})
},
changeCropSize: function(t, e, o, n, 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 = o,
this.changeCropTypeX = n,
this.changeCropTypeY = r,
this.cropX = t.clientX ? t.clientX : t.touches[0].clientX,
this.cropY = t.clientY ? 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)
},
changeCropNow: function(t) {
var e = this;
t.preventDefault();
var o = t.clientX ? t.clientX : t.touches ? t.touches[0].clientX : 0
, n = t.clientY ? t.clientY : t.touches ? t.touches[0].clientY : 0
, r = this.w
, i = this.h
, s = 0
, a = 0;
if (this.centerBox) {
var c = this.getImgAxis()
, h = c.x2
, p = c.y2;
s = c.x1 > 0 ? c.x1 : 0,
a = c.y1 > 0 ? c.y1 : 0,
r > h && (r = h),
i > p && (i = p)
}
this.$nextTick(function() {
var t = o - e.cropX
, c = n - e.cropY;
if (e.canChangeX && (1 === e.changeCropTypeX ? e.cropOldW - t > 0 ? (e.cropW = r - e.cropChangeX - t <= r - s ? e.cropOldW - t : e.cropOldW + e.cropChangeX - s,
e.cropOffsertX = r - e.cropChangeX - t <= r - s ? e.cropChangeX + t : s) : (e.cropW = Math.abs(t) + e.cropChangeX <= r ? Math.abs(t) - e.cropOldW : r - e.cropOldW - e.cropChangeX,
e.cropOffsertX = e.cropChangeX + e.cropOldW) : 2 === e.changeCropTypeX && (e.cropOldW + t > 0 ? (e.cropW = e.cropOldW + t + e.cropOffsertX <= r ? e.cropOldW + t : r - e.cropOffsertX,
e.cropOffsertX = e.cropChangeX) : (e.cropW = r - e.cropChangeX + Math.abs(t + e.cropOldW) <= r - s ? Math.abs(t + e.cropOldW) : e.cropChangeX - s,
e.cropOffsertX = r - e.cropChangeX + Math.abs(t + e.cropOldW) <= r - s ? e.cropChangeX - Math.abs(t + e.cropOldW) : s))),
e.canChangeY && (1 === e.changeCropTypeY ? e.cropOldH - c > 0 ? (e.cropH = i - e.cropChangeY - c <= i - a ? e.cropOldH - c : e.cropOldH + e.cropChangeY - a,
e.cropOffsertY = i - e.cropChangeY - c <= i - a ? e.cropChangeY + c : a) : (e.cropH = Math.abs(c) + e.cropChangeY <= i ? Math.abs(c) - e.cropOldH : i - e.cropOldH - e.cropChangeY,
e.cropOffsertY = e.cropChangeY + e.cropOldH) : 2 === e.changeCropTypeY && (e.cropOldH + c > 0 ? (e.cropH = e.cropOldH + c + e.cropOffsertY <= i ? e.cropOldH + c : i - e.cropOffsertY,
e.cropOffsertY = e.cropChangeY) : (e.cropH = i - e.cropChangeY + Math.abs(c + e.cropOldH) <= i - a ? Math.abs(c + e.cropOldH) : e.cropChangeY - a,
e.cropOffsertY = i - e.cropChangeY + Math.abs(c + e.cropOldH) <= i - a ? e.cropChangeY - Math.abs(c + e.cropOldH) : a))),
e.canChangeX && e.fixed) {
var h = e.cropW / e.fixedNumber[0] * e.fixedNumber[1];
h + e.cropOffsertY > i ? (e.cropH = i - e.cropOffsertY,
e.cropW = e.cropH / e.fixedNumber[1] * e.fixedNumber[0]) : e.cropH = h
}
if (e.canChangeY && e.fixed) {
var p = e.cropH / e.fixedNumber[1] * e.fixedNumber[0];
p + e.cropOffsertX > r ? (e.cropW = r - e.cropOffsertX,
e.cropH = e.cropW / e.fixedNumber[0] * e.fixedNumber[1]) : e.cropW = p
}
})
},
changeCropEnd: function(t) {
window.removeEventListener("mousemove", this.changeCropNow),
window.removeEventListener("mouseup", this.changeCropEnd),
window.removeEventListener("touchmove", this.changeCropNow),
window.removeEventListener("touchend", this.changeCropEnd)
},
endCrop: function() {
0 === this.cropW && 0 === this.cropH && (this.cropping = !1),
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 && 2 === t.touches.length)
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, o, n = t.clientX ? t.clientX : t.touches[0].clientX, r = t.clientY ? t.clientY : t.touches[0].clientY;
e = n - this.cropOffsertX,
o = r - this.cropOffsertY,
this.cropX = e,
this.cropY = o,
this.$emit("cropMoving", {
moving: !0,
axis: this.getCropAxis()
}),
this.$emit("crop-moving", {
moving: !0,
axis: this.getCropAxis()
})
},
moveCrop: function(t, e) {
var o = this
, n = 0
, r = 0;
t && (t.preventDefault(),
n = t.clientX ? t.clientX : t.touches[0].clientX,
r = t.clientY ? t.clientY : t.touches[0].clientY),
this.$nextTick(function() {
var t, i, s = n - o.cropX, a = r - o.cropY;
if (e && (s = o.cropOffsertX,
a = o.cropOffsertY),
t = s <= 0 ? 0 : s + o.cropW > o.w ? o.w - o.cropW : s,
i = a <= 0 ? 0 : a + o.cropH > o.h ? o.h - o.cropH : a,
o.centerBox) {
var c = o.getImgAxis();
t <= c.x1 && (t = c.x1),
t + o.cropW > c.x2 && (t = c.x2 - o.cropW),
i <= c.y1 && (i = c.y1),
i + o.cropH > c.y2 && (i = c.y2 - o.cropH)
}
o.cropOffsertX = t,
o.cropOffsertY = i,
o.$emit("cropMoving", {
moving: !0,
axis: o.getCropAxis()
}),
o.$emit("crop-moving", {
moving: !0,
axis: o.getCropAxis()
})
})
},
getImgAxis: function(t, e, o) {
t = t || this.x,
e = e || this.y,
o = o || this.scale;
var n = {
x1: 0,
x2: 0,
y1: 0,
y2: 0
}
, r = this.trueWidth * o
, i = this.trueHeight * o;
switch (this.rotate) {
case 0:
n.x1 = t + this.trueWidth * (1 - o) / 2,
n.x2 = n.x1 + this.trueWidth * o,
n.y1 = e + this.trueHeight * (1 - o) / 2,
n.y2 = n.y1 + this.trueHeight * o;
break;
case 1:
case -1:
case 3:
case -3:
n.x1 = t + this.trueWidth * (1 - o) / 2 + (r - i) / 2,
n.x2 = n.x1 + this.trueHeight * o,
n.y1 = e + this.trueHeight * (1 - o) / 2 + (i - r) / 2,
n.y2 = n.y1 + this.trueWidth * o;
break;
default:
n.x1 = t + this.trueWidth * (1 - o) / 2,
n.x2 = n.x1 + this.trueWidth * o,
n.y1 = e + this.trueHeight * (1 - o) / 2,
n.y2 = n.y1 + this.trueHeight * o
}
return n
},
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
, o = document.createElement("canvas")
, n = new Image
, r = this.rotate
, i = this.trueWidth
, s = this.trueHeight
, a = this.cropOffsertX
, c = this.cropOffsertY;
function h(t, e) {
o.width = Math.round(t),
o.height = Math.round(e)
}
n.onload = function() {
if (0 !== e.cropW) {
var p = o.getContext("2d")
, u = 1;
e.high & !e.full && (u = window.devicePixelRatio),
1 !== e.enlarge & !e.full && (u = Math.abs(Number(e.enlarge)),
console.log(u));
var d = e.cropW * u
, l = e.cropH * u
, f = i * e.scale * u
, g = s * e.scale * u
, v = (e.x - a + e.trueWidth * (1 - e.scale) / 2) * u
, m = (e.y - c + e.trueHeight * (1 - e.scale) / 2) * u;
switch (h(d, l),
p.save(),
r) {
case 0:
e.full ? (h(d / e.scale, l / e.scale),
p.drawImage(n, v / e.scale, m / e.scale, f / e.scale, g / e.scale)) : p.drawImage(n, v, m, f, g);
break;
case 1:
case -3:
e.full ? (h(d / e.scale, l / e.scale),
v = v / e.scale + (f / e.scale - g / e.scale) / 2,
m = m / e.scale + (g / e.scale - f / e.scale) / 2,
p.rotate(90 * r * Math.PI / 180),
p.drawImage(n, m, -v - g / e.scale, f / e.scale, g / e.scale)) : (v += (f - g) / 2,
m += (g - f) / 2,
p.rotate(90 * r * Math.PI / 180),
p.drawImage(n, m, -v - g, f, g));
break;
case 2:
case -2:
e.full ? (h(d / e.scale, l / e.scale),
p.rotate(90 * r * Math.PI / 180),
v /= e.scale,
m /= e.scale,
p.drawImage(n, -v - f / e.scale, -m - g / e.scale, f / e.scale, g / e.scale)) : (p.rotate(90 * r * Math.PI / 180),
p.drawImage(n, -v - f, -m - g, f, g));
break;
case 3:
case -1:
e.full ? (h(d / e.scale, l / e.scale),
v = v / e.scale + (f / e.scale - g / e.scale) / 2,
m = m / e.scale + (g / e.scale - f / e.scale) / 2,
p.rotate(90 * r * Math.PI / 180),
p.drawImage(n, -m - f / e.scale, v, f / e.scale, g / e.scale)) : (v += (f - g) / 2,
m += (g - f) / 2,
p.rotate(90 * r * Math.PI / 180),
p.drawImage(n, -m - f, v, f, g));
break;
default:
e.full ? (h(d / e.scale, l / e.scale),
p.drawImage(n, v / e.scale, m / e.scale, f / e.scale, g / e.scale)) : p.drawImage(n, v, m, f, g)
}
p.restore()
} else {
var w = i * e.scale
, x = s * e.scale
, C = o.getContext("2d");
switch (C.save(),
r) {
case 0:
h(w, x),
C.drawImage(n, 0, 0, w, x);
break;
case 1:
case -3:
h(x, w),
C.rotate(90 * r * Math.PI / 180),
C.drawImage(n, 0, -x, w, x);
break;
case 2:
case -2:
h(w, x),
C.rotate(90 * r * Math.PI / 180),
C.drawImage(n, -w, -x, w, x);
break;
case 3:
case -1:
h(x, w),
C.rotate(90 * r * Math.PI / 180),
C.drawImage(n, -w, 0, w, x);
break;
default:
h(w, x),
C.drawImage(n, 0, 0, w, x)
}
C.restore()
}
t(o)
}
,
"data" !== this.img.substr(0, 4) && (n.crossOrigin = "Anonymous"),
n.src = this.imgs
},
getCropData: function(t) {
var e = this;
this.getCropChecked(function(o) {
t(o.toDataURL("image/" + e.outputType, e.outputSize))
})
},
getCropBlob: function(t) {
var e = this;
this.getCropChecked(function(o) {
o.toBlob(function(e) {
return t(e)
}, "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
, o = this.cropH
, n = this.scale
, r = {};
r.div = {
width: "".concat(e, "px"),
height: "".concat(o, "px")
};
var i = (this.x - this.cropOffsertX) / n
, s = (this.y - this.cropOffsertY) / n;
r.w = e,
r.h = o,
r.url = this.imgs,
r.img = {
width: "".concat(this.trueWidth, "px"),
height: "".concat(this.trueHeight, "px"),
transform: "scale(".concat(n, ")translate3d(").concat(i, "px, ").concat(s, "px, ").concat(0, "px)rotateZ(").concat(90 * this.rotate, "deg)")
},
r.html = '\n <div class="show-preview" style="width: '.concat(r.w, "px; height: ").concat(r.h, 'px,; overflow: hidden">\n <div style="width: ').concat(e, "px; height: ").concat(o, 'px">\n <img src=').concat(r.url, ' style="width: ').concat(this.trueWidth, "px; height: ").concat(this.trueHeight, "px; transform:\n scale(").concat(n, ")translate3d(").concat(i, "px, ").concat(s, "px, ").concat(0, "px)rotateZ(").concat(90 * this.rotate, 'deg)">\n </div>\n </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)
, o = this.mode.split(" ");
switch (o[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 n = o[0];
if (-1 !== n.search("px") && (n = n.replace("px", ""),
t = parseFloat(n) / this.trueWidth),
-1 !== n.search("%") && (n = n.replace("%", ""),
t = parseFloat(n) / 100 * this.w / this.trueWidth),
2 === o.length && "auto" === n) {
var r = o[1];
-1 !== r.search("px") && (r = r.replace("px", ""),
t = (e = parseFloat(r)) / this.trueHeight),
-1 !== r.search("%") && (r = r.replace("%", ""),
t = (e = parseFloat(r) / 100 * this.h) / this.trueHeight)
}
} catch (e) {
t = 1
}
}
return t
},
goAutoCrop: function(t, e) {
this.clearCrop(),
this.cropping = !0;
var o = this.w
, n = this.h;
if (this.centerBox) {
var r = this.trueWidth * this.scale
, i = this.trueHeight * this.scale;
o = r < o ? r : o,
n = i < n ? i : n
}
var s = t || parseFloat(this.autoCropWidth)
, a = e || parseFloat(this.autoCropHeight);
0 !== s && 0 !== a || (s = .8 * o,
a = .8 * n),
s = s > o ? o : s,
a = a > n ? n : a,
this.fixed && (a = s / this.fixedNumber[0] * this.fixedNumber[1]),
a > this.h && (s = (a = this.h) / this.fixedNumber[1] * this.fixedNumber[0]),
this.changeCrop(s, a)
},
changeCrop: function(t, e) {
var o = this;
if (this.centerBox) {
var n = this.getImgAxis();
t > n.x2 - n.x1 && (e = (t = n.x2 - n.x1) / this.fixedNumber[0] * this.fixedNumber[1]),
e > n.y2 - n.y1 && (t = (e = n.y2 - n.y1) / this.fixedNumber[1] * this.fixedNumber[0])
}
this.cropW = t,
this.cropH = e,
this.cropOffsertX = (this.w - t) / 2,
this.cropOffsertY = (this.h - e) / 2,
this.centerBox && this.$nextTick(function() {
o.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, o) {
t = t || this.x,
e = e || this.y,
o = o || this.scale;
var n = !0;
if (this.centerBox) {
var r = this.getImgAxis(t, e, o)
, i = this.getCropAxis();
r.x1 >= i.x1 && (n = !1),
r.x2 <= i.x2 && (n = !1),
r.y1 >= i.y1 && (n = !1),
r.y2 <= i.y2 && (n = !1)
}
return n
}
},
mounted: function() {
this.support = "onwheel"in document.createElement("div") ? "wheel" : void 0 !== document.onmousewheel ? "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(e, o, n) {
for (var r = atob(this.toDataURL(o, n).split(",")[1]), i = r.length, s = new Uint8Array(i), a = 0; a < i; a++)
s[a] = r.charCodeAt(a);
e(new Blob([s],{
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)
}
};
o(1);
var a = function(t, e, o, n, r, i, s, a) {
var c, h = "function" == typeof t ? t.options : t;
if (e && (h.render = e,
h.staticRenderFns = o,
h._compiled = !0),
n && (h.functional = !0),
i && (h._scopeId = "data-v-" + i),
s ? (c = function(t) {
(t = t || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) || "undefined" == typeof __VUE_SSR_CONTEXT__ || (t = __VUE_SSR_CONTEXT__),
r && r.call(this, t),
t && t._registeredComponents && t._registeredComponents.add(s)
}
,
h._ssrRegister = c) : r && (c = a ? function() {
r.call(this, this.$root.$options.shadowRoot)
}
: r),
c)
if (h.functional) {
h._injectStyles = c;
var p = h.render;
h.render = function(t, e) {
return c.call(e),
p(t, e)
}
} else {
var u = h.beforeCreate;
h.beforeCreate = u ? [].concat(u, c) : [c]
}
return {
exports: t,
options: h
}
}(s, n, [], !1, null, "6dae58fd", null);
a.options.__file = "src/vue-cropper.vue";
var c = a.exports;
o.d(e, "VueCropper", function() {
return c
});
var h = function(t) {
t.component("VueCropper", c)
};
"undefined" != typeof window && window.Vue && h(window.Vue);
e.default = {
version: "0.4.8",
install: h,
VueCropper: c,
vueCropper: c
}
}
])
});
//# sourceMappingURL=index.js.map