高神龙拒绝做个菜鸟

vue图片裁切 cdn方式就可引入

主要js文件已经附上，其他的vue相关文件在github上都可自行找到，本文中link引入一些php语法，可自行去掉

这是效果图：





    
    
    
    
    
    
    会议
    



    
        test-upload
       
        
            
                
                    
                 
                        
                            
                            
                            
                            
                                
                                    
                                        
                                    
                                    
                                        
                                    
                                
                            
                            
                                
                            
                        
                        {{tips}}
                    
                    
                
                
                    
                        
                    
                    
                        取 消
                        确 定

这是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)

这是[email protected]/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      \n        \n          \n        
\n      '),
                    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

你可能感兴趣的:(vue,vue兄弟组件通信,html,javascript,前端,图片裁切)

想家爆米花机
也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动李蕾1229
为促进我校教师专业发展，发挥骨干教师的引领带头作用，11月6日下午，我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动。图片发自App会议由教师发展处李蕾主任主持，首先，由范校长宣读新老教师结对名单及双方承担职责。随后，两位新调入教师陈玉萍、莫正杰分别和他们的师傅鲍元美、刘召彬老师签订了师徒结对协议书。图片发自App图片发自App师徒拥抱、握手。有了师傅就有了目标有了方向，相信两位新教师在师
向内而求陈陈_19b4
10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
开心蒋泳频
从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
《小满细雨轻湿尘》快乐的人ZZM
图片发自App《小满细雨轻湿尘》文/快乐的人zzm小满细雨轻湿尘石榴花开落纷纷落红不是无情物坠入泥土育养根2018-5-23
感赏日志133 马姐读书
图片发自App感赏自己今天买个扫地机，以后可以解放出来多看点书，让这个智能小机器人替我工作了。感赏孩子最近进步很大，每天按时上学，认真听课，认真背书，主动认真完成老师布置的作业。感赏自己明白自己容易受到某人的影响，心情不好，每当此刻我就会舒缓，感赏，让自己尽快抽离，想好的一面。感赏儿子今天在我提醒他事情时，告诉我谢谢妈妈对我的提醒我明白了，而不是说我啰嗦，管事情，孩子更懂事了，懂得感恩了。投射父母
今又重阳芮峻
今又重阳图片发自App白露成霜菊花黄，岁岁重阳，今又重阳。登高远望，君不见，那来时路上少年，青丝已染雪霜。落日一点一点西坠，谁有力量，托住使其回往。转眼缺了大半，又能怎样？江天两茫茫。给我一壶烈酒，我要敬那斜阳，看谁先醉？笑指西天红了一片，借点酒力，老夫聊发一次少年狂。老严.2019年重阳节.杭州
蘩漪：新女性？利己主义者赮_红雨
蘩漪是曹禺《雷雨》笔下的女性形象。对于她的喜爱，曹禺在之前的访谈中，就已经表达得很清楚了，蘩漪是他所倾心的女子的“代替者”。在这个女性身上有着曹禺最精心的描写，但同时她的身上又存在着一些时代的问题。图片发自App首先，繁漪是追求自由和幸福的新女性形象。她是精神悲剧的核心人物，她对周朴园的反抗，具有典型意义。她是位资产阶级家庭出身的小姐，受过五四新思潮的影响，她任性、傲慢，追求人格独立、个性自由和爱
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
【目标检测数据集】卡车数据集1073张VOC+YOLO格式熬夜写代码的平头哥∰ 目标检测 YOLO 人工智能
数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：1073标注数量(xml文件个数)：1073标注数量(txt文件个数)：1073标注类别数：1标注类别名称:["truck"]每个类别标注的框数：truck框数=1120总框数：1120使用标注工具：labelImg标注
其二十八尾喵
你知道吗？图片发自App我今天知道了你有喜欢的人，不是我。心空空的，整个人都不是我的了。可，怎么办？还是要好好的活着，毕竟你喜欢的人，我不能杀，可是我可以杀其他喜欢你的人呀！也罢，此生无缘，来世再见。鱼干
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
番茄西红柿叶子病害分类数据集12882张11类别 futureflsl 数据集分类数据挖掘人工智能
数据集类型：图像分类用，不可用于目标检测无标注文件数据集格式：仅仅包含jpg图片，每个类别文件夹下面存放着对应图片图片数量(jpg文件个数)：12882分类类别数：11类别名称:["Bacterial_Spot_Bacteria","Early_Blight_Fungus","Healthy","Late_Blight_Water_Mold","Leaf_Mold_Fungus","Powdery
钢筋长度超限检测检数据集VOC+YOLO格式215张1类别 futureflsl 数据集 YOLO 深度学习机器学习
数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：215标注数量(xml文件个数)：215标注数量(txt文件个数)：215标注类别数：1标注类别名称:["iron"]每个类别标注的框数：iron框数=215总框数：215使用标注工具：labelImg标注规则：对类别进
Python 实现图片裁剪（附代码） | Python工具剑客阿良_ALiang
前言本文提供将图片按照自定义尺寸进行裁剪的工具方法，一如既往的实用主义。环境依赖ffmpeg环境安装，可以参考我的另一篇文章：windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg，而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装：pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了，上代码
赠晶晶在平凡中重新出发
逐伊衫望伊泪伊人雨中别离去莫再想莫再追莫要寸断再回味十六年六十年弹指挥间青鬓颜且浅行且珍惜待到山花烂漫时图片发自App
2019-05-13 王健_100a
【撒下18:2】大卫打发军兵出战，分为三队：一队在约押手下，一队在洗鲁雅的儿子约押兄弟亚比筛手下，一队在迦特人以太手下。大卫对军兵说：“我必与你们一同出战。”解释：大卫检阅部队，将它分成三队，每队由一位元帅统领；约押与兄弟亚比筛，并迦特人以太共同指挥。大卫想与他们一同出战！应用：作为领袖与军兵一起出战是很重要。领袖在事奉中与信徒一起，领袖在任何的环境里与信徒一起走过。我们要同心协力为主而战。祷告：
这个世界为何对女性这么苛刻遇见知见
图片发自App当今社会的女性，简直用金刚侠来形容都不为过。虽然早已过了男尊女卑的时代，但是这个世界并没有平等的对待女性。新时代的女性标准：上得了厅堂，下得了厨房，杀得了木马，翻得了围墙，开得起好车，买得起新房，斗得过二奶，打得过流氓，生得了孩子，养得了家庭。这个社会对女性有太多的不公平，既要求女性经济独立，又要求女性贤良淑德。所有的女性的在成长过程中没有任何一项是因为你是女性而给你开绿灯的。图片发
2019-08-16 希望在东方
《春游荣华山》春游荣华山，乍暖还寒。青苔路，石阶险。山路弯上弯！为寻古寺往幽探。细雨已润江南岸，初春芳草现。老树新芽冒枝端，人间又过到新年。今游荣华山，树茂参天，古寺悠闲。细雨飘落发端！三眼井旁，投币许心愿，并祷一世安然。更喜大女明事端，应心安，放开颜。修竹静默，雨中吐心愿。待得春风浩吹时，春笋节节攀。图片发自App图片发自App图片发自App
第九十章真情溪境
图片发自App图片发自App和雏田在一起的日子真的很开心。姐姐永远是最亲的最真的。佐助总来捣乱。小樱准备一盆水泼佐助。想到恋爱通告亦菲被泼水不免高兴。亦菲是最美的。没想到她也会有这种遭遇。也许不需要赚那么多钱。和家人在一起的日子真好。却轻易破碎。雏田的话语温软，依稀在耳边。她的微笑纯美温柔。喜欢温柔的哥哥，雏田就是这样啊。不知道雏田是喜欢男生还是女生。我都支持。过去门当户对。现在自由恋爱。想永远和
强大的销售团队背后竟然是大数据分析的身影蓝儿唯美数据分析
Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
Haproxy+Keepalived高可用双机单活 bylijinnan 负载均衡 keepalived haproxy 高可用
我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过服务器资源 10.7
eclipse编辑器中文乱码问题解决 0624chenhong eclipse乱码
使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g
基础篇--resources资源不懂事的小屁孩 android
最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml 字符串资源涉及国际化问题 http://www.2cto.com/kf/201302/190394.html string-array
接上篇补上window平台自动上传证书文件的批处理问卷酷的飞上天空 window
@echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s
企业物联网大潮涌动：如何做好准备？蓝儿唯美企业
物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全
spring学习——数据库（mybatis持久化框架配置） a-john mybatis
Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba
Java静态代理、动态代理实例 aijuans Java静态代理
采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。按照代理类的创建时期，可以分为：静态代理和动态代理。所谓静态代理：　指程序员创建好代理类，编译时直接生成代理类的字节码文件。所谓动态代理：　在程序运行时，通过反射机制动态生成代理类。一、静态代理类实例： 1、Serivce.ja
Struts1与Struts2的12点区别 asia007 Struts1与Struts2
1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P
初学者要多看看帮助文档不要用js来写Jquery的代码百合不是茶 jquery js
解析json数据的时候需要将解析的数据写到文本框中, 出现了用js来写Jquery代码的问题; 1, JQuery的赋值有问题代码如下: data.username 表示的是: 网易 $("#use
经理怎么和员工搞好关系和信任 bijian1013 团队项目管理管理
产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通
如何为rich:tree不同类型节点设置右键菜单 sunjing contextMenu tree Richfaces
组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu
【Redis二】Redis2.8.17搭建主从复制环境 bit1129 redis
开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。 Ubuntu上安装Red
JSONObject转换JSON--将Date转换为指定格式白糖_ JSONObject
项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式： {"nanos":0,"time":-27076233600000,
JavaScript语言精粹读书笔记 braveCS JavaScript
【经典用法】： //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对
编程之美-找符合条件的整数用字符串来表示大整数避免溢出 bylijinnan 编程之美
import java.util.LinkedList; public class FindInteger { /** * 编程之美找符合条件的整数用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数
读书笔记 chengxuyuancsdn 读书笔记
1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
[通讯与电力]光网城市建设的一些问题 comsci 问题
信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........
oracle 空间RESUMABLE daizj oracle 空间不足 RESUMABLE 错误挂起
空间RESUMABLE操作转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。这一篇简单介绍空间RESUMABLE的例子。第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D
重构第一次写的线程池 dieslrae 线程池 python
最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*-
C语言学习六指针 dcj3sjt126com c
初识指针，简单示例程序： /* 指针就是地址，地址就是指针地址就是内存单元的编号指针变量是存放地址的变量指针和指针变量是两个不同的概念但是要注意：通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int *
yii2 beforeSave afterSave beforeDelete dcj3sjt126com delete
public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } }
timertask shuizhaosi888 timertask
java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new
Spring Security（13）——session管理 234390216 session Spring Security 攻击保护超时
session管理目录 1.1 检测session超时 1.2 concurrency-control 1.3 session 固定攻击保护
公司项目NODEJS实践0.3[ mongo / session ...] 逐行分析JS源代码 mongodb session nodejs
http://www.upopen.cn 一、前言书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /
pojo.vo.po.domain区别 LiaoJuncai java VO POJO javabean domain
　　POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。　　　　即POJO是一个简单的普通的Java对象，它包含业务逻辑
Windows Error Code OhMyCC windows
0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系
在storm集群环境下发布Topology roadrunners 集群 storm topology spout bolt
storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。 1、打包打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.
为什么不允许代码里出现“魔数” tomcat_oracle java
　　在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。　　迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。　　很多开发者在这个检查方面都有问题，这可以从结果
zoj 3511 Cake Robbery(线段树) 阿尔萨斯线段树
题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&