vue3-image-cropper-next
Version:
A Vue 3 image cropper component for Vite
1,001 lines • 67.3 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.fade-enter-active[data-v-df19c325],.fade-leave-active[data-v-df19c325]{transition:opacity .3s}.fade-enter[data-v-df19c325],.fade-leave-to[data-v-df19c325]{opacity:0}.fade-in-enter[data-v-df19c325]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.fade-out-enter[data-v-df19c325],.fade-in-active[data-v-df19c325]{transition:margin-top .2s,opacity .2s}.fade-out-active[data-v-df19c325]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.image-cropper .mask[data-v-df19c325]{background:rgba(0,0,0,.6);position:fixed;overflow-y:scroll;overflow-x:hidden;top:0;left:0;width:100%;height:100%;z-index:999}.image-cropper .dialog-box[data-v-df19c325]{clear:both}.image-cropper .dialog-box-modal[data-v-df19c325]{position:relative;padding-top:100px;padding-bottom:100px;clear:both}.image-cropper .dialog-main-modal[data-v-df19c325]{line-height:125%;font-size:16px;position:absolute;top:100px;left:50%;margin-bottom:100px;transform:translate(-50%);border:1px solid rgba(0,0,0,.8);border-radius:3px;box-sizing:border-box;padding:15px 15px 0;background:#fff;z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;animation:dialogShow-df19c325 .3s}.image-cropper .dialog-main[data-v-df19c325]{line-height:125%;font-size:16px;box-sizing:border-box;background:#fff;z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .i-dialog-footer[data-v-df19c325]{display:block;width:100%;height:40px;margin-top:15px;margin-bottom:15px}.image-cropper .i-dialog-footer .choose[data-v-df19c325]{display:inline-flex}.image-cropper .i-dialog-footer .btn-group[data-v-df19c325]{display:inline-flex;float:right}.image-cropper .tool-main[data-v-df19c325]{box-sizing:border-box}.image-cropper .tool-main .tool-title[data-v-df19c325]{margin-bottom:15px;font-size:20px;color:#333}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]{float:right;cursor:pointer;display:block;color:#000;width:22px;height:22px;line-height:22px;border-radius:50%;margin:0;padding:0;transition:transform .5s;position:relative}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:after,.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:before{content:\"\";position:absolute;top:50%;left:50%;width:18px;height:2px;background:#666}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:after{transform:translate(-50%,-50%) rotate(45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:before{transform:translate(-50%,-50%) rotate(-45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:hover{transform:scale(1.2)}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:hover:after,.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:hover:before{background:#333}@keyframes dialogShow-df19c325{0%{margin-top:-50px;opacity:0}to{margin-top:0;opacity:1}}.image-cropper .tool-box[data-v-df19c325]{border:1px solid #dedede;background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);background-color:#eee;background-size:30px 30px;background-position:0 0,15px 15px;position:relative}.image-cropper .tool-box .tips[data-v-df19c325]{position:absolute;top:50%;left:50%;z-index:101;transform:translate(-50%,-50%)}.image-cropper .canvas[data-v-df19c325]{position:absolute;top:0;left:0;z-index:98}.image-cropper .canvas-select-box[data-v-df19c325]{position:absolute;top:0;left:0;z-index:99}@keyframes zi-antBorder-df19c325{0%{background-position:0px 0px}50%{background-position:0px 5px}to{background-position:0px 10px}}.image-cropper .tool-box-control[data-v-df19c325]{background:rgba(255,255,255,0);position:absolute;z-index:101;box-sizing:border-box}.image-cropper .tool-box-control-box[data-v-df19c325]{width:100%;height:100%;position:relative;background:transparent;z-index:103;pointer-events:none}.image-cropper .tool-box-control .control-box[data-v-df19c325]{width:100%;height:100%;position:absolute;cursor:move;z-index:1;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line[data-v-df19c325]{position:absolute;z-index:1;background-size:10px 10px;background-image:linear-gradient(-45deg,var(--image-cropper-primary-color, #409eff) 25%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 50%,var(--image-cropper-primary-color, #409eff) 50%,var(--image-cropper-primary-color, #409eff) 75%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));-ms-animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;-moz-animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;-webkit-animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line-top[data-v-df19c325]{height:1px;width:100%;top:-1px}.image-cropper .tool-box-control .control-box-inner-line-bottom[data-v-df19c325]{height:1px;width:100%;bottom:-1px}.image-cropper .tool-box-control .control-box-inner-line-right[data-v-df19c325]{height:100%;width:1px;right:-1px;top:0}.image-cropper .tool-box-control .control-box-inner-line-left[data-v-df19c325]{height:100%;width:1px;left:-1px;top:0}.image-cropper .tool-box-control .select-area[data-v-df19c325]{display:block;width:260px;text-align:right;color:#fff;position:absolute;top:-20px;right:0;font-size:10px}.image-cropper .tool-box-control-line[data-v-df19c325]{position:absolute;z-index:1;background:transparent;box-sizing:border-box;border-width:0;border-style:dashed;border-color:var(--image-cropper-primary-color, #409eff)}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(2){top:33%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(3){top:66%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(4){left:33%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(5){left:66%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control .control-btn[data-v-df19c325]{border:1px solid rgba(255,255,255,.5);box-sizing:border-box;width:6px;height:6px;background:var(--image-cropper-primary-color, #409eff);position:absolute;border-radius:50%;z-index:999;pointer-events:auto!important}.image-cropper .tool-box-control .control-btn.left-up[data-v-df19c325]{top:0;left:0;margin-left:-3px;margin-top:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.left-down[data-v-df19c325]{bottom:0;left:0;margin-left:-3px;margin-bottom:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-up[data-v-df19c325]{top:0;right:0;margin-right:-3px;margin-top:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-down[data-v-df19c325]{bottom:0;right:0;margin-right:-3px;margin-bottom:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.top-center[data-v-df19c325]{top:0;right:50%;margin-right:-3px;margin-top:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.down-center[data-v-df19c325]{bottom:0;right:50%;margin-right:-3px;margin-bottom:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.left-center[data-v-df19c325]{top:50%;left:0;margin-left:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .tool-box-control .control-btn.right-center[data-v-df19c325]{top:50%;right:0;margin-right:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .btn[data-v-df19c325]{display:inline-block;text-align:center;background:#dedede;height:32px;line-height:1;padding:8px 15px;box-sizing:border-box;border-radius:4px;cursor:pointer;border:1px solid;font-size:14px;transition:background .3s,color .3s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .btn[disabled][data-v-df19c325]{opacity:.6}.image-cropper .btn[disabled][data-v-df19c325]:hover{opacity:.6;color:#333!important;border-color:#dedede!important;background-color:#fff!important}.image-cropper .btn.btn-default[data-v-df19c325]{color:#333;border-color:#dcdfe6;background-color:#fff;transition:background .3s,color .3s}.image-cropper .btn.btn-default[data-v-df19c325]:hover{color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff}.image-cropper .btn.btn-primary[data-v-df19c325]{color:#fff;background-color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff);transition:background .3s,color .3s}.image-cropper .btn.btn-primary[data-v-df19c325]:hover{background:var(--image-cropper-primary-color-hover, #66b1ff);border-color:var(--image-cropper-primary-color-hover, #66b1ff);color:#fff}.image-cropper .btn.btn-warning[data-v-df19c325]{color:#fff;background-color:var(--image-cropper-warning-color, #e6a23c);border-color:var(--image-cropper-warning-color, #e6a23c)}.image-cropper .btn.btn-warning[data-v-df19c325]:hover{color:#fff;background-color:var(--image-cropper-warning-color-hover, #ebb563);border-color:var(--image-cropper-warning-color-hover, #ebb563);transition:background .3s,color .3s}.image-cropper .btn.btn-primary-plain[data-v-df19c325]{color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff;transition:background .3s,color .3s}.image-cropper .btn.btn-primary-plain[data-v-df19c325]:hover{background:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff);color:#fff}.image-cropper .btn.btn-xs[data-v-df19c325]{height:26px;line-height:26px;padding:0 10px;font-size:12px}.image-cropper .file-input[data-v-df19c325]{width:1px;height:1px;border:none;opacity:0}.image-cropper .dock-main[data-v-df19c325]{position:absolute;z-index:1002;bottom:5px;left:5px;opacity:.5;transition:opacity .5s;box-sizing:border-box;padding:5px;border-radius:5px}.image-cropper .dock-main[data-v-df19c325]:hover{opacity:1}.image-cropper .dock-main .dock-btn[data-v-df19c325]{font-size:10px;cursor:pointer;display:inline-block;margin-right:4px;color:var(--image-cropper-primary-color, #409eff);border:1px solid var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff;padding:1px 4px;border-radius:3px;height:20px;line-height:20px;transition:background .2s,color .2s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .dock-main .dock-btn[data-v-df19c325]:hover{color:#fff;background-color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff)}.image-cropper .dock-main .dock-btn-scroll-bar[data-v-df19c325]{display:inline-block;margin-right:4px;margin-left:10px;background:var(--image-cropper-primary-color, #409eff);width:200px;height:10px;border-radius:5px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .dock-main .scroll-bar-control[data-v-df19c325]{position:absolute;cursor:pointer;background:#fff;border:2px solid var(--image-cropper-primary-color, #409eff);box-sizing:border-box;border-radius:50%;width:20px;height:20px;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 3px #1f5184}.image-cropper .dock-main .scroll-bar-text[data-v-df19c325]{position:absolute;cursor:pointer;background:rgba(0,0,0,.7);color:#fff;top:-16px;height:16px;line-height:16px;text-align:center;font-size:10px;white-space:nowrap;min-width:50px;border-radius:3px;transform:translate(-50%,-50%)}\n@charset \"UTF-8\";.fade-enter-active[data-v-df19c325],.fade-leave-active[data-v-df19c325]{transition:opacity .3s}.fade-enter[data-v-df19c325],.fade-leave-to[data-v-df19c325]{opacity:0}.fade-in-enter[data-v-df19c325]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.fade-out-enter[data-v-df19c325],.fade-in-active[data-v-df19c325]{transition:margin-top .2s,opacity .2s}.fade-out-active[data-v-df19c325]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.image-cropper .mask[data-v-df19c325]{background:rgba(0,0,0,.6);position:fixed;overflow-y:scroll;overflow-x:hidden;top:0;left:0;width:100%;height:100%;z-index:999}.image-cropper .dialog-box[data-v-df19c325]{clear:both}.image-cropper .dialog-box-modal[data-v-df19c325]{position:relative;padding-top:100px;padding-bottom:100px;clear:both}.image-cropper .dialog-main-modal[data-v-df19c325]{line-height:125%;font-size:16px;position:absolute;top:100px;left:50%;margin-bottom:100px;transform:translate(-50%);border:1px solid rgba(0,0,0,.8);border-radius:3px;box-sizing:border-box;padding:15px 15px 0;background:#fff;z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;animation:dialogShow-df19c325 .3s}.image-cropper .dialog-main[data-v-df19c325]{line-height:125%;font-size:16px;box-sizing:border-box;background:#fff;z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .i-dialog-footer[data-v-df19c325]{display:block;width:100%;height:40px;margin-top:15px;margin-bottom:15px}.image-cropper .i-dialog-footer .choose[data-v-df19c325]{display:inline-flex}.image-cropper .i-dialog-footer .btn-group[data-v-df19c325]{display:inline-flex;float:right}.image-cropper .tool-main[data-v-df19c325]{box-sizing:border-box}.image-cropper .tool-main .tool-title[data-v-df19c325]{margin-bottom:15px;font-size:20px;color:#333}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]{float:right;cursor:pointer;display:block;color:#000;width:22px;height:22px;line-height:22px;border-radius:50%;margin:0;padding:0;transition:transform .5s;position:relative}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:after,.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:before{content:\"\";position:absolute;top:50%;left:50%;width:18px;height:2px;background:#666}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:after{transform:translate(-50%,-50%) rotate(45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:before{transform:translate(-50%,-50%) rotate(-45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:hover{transform:scale(1.2)}.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:hover:after,.image-cropper .tool-main .tool-title .close-icon[data-v-df19c325]:hover:before{background:#333}@keyframes dialogShow-df19c325{0%{margin-top:-50px;opacity:0}to{margin-top:0;opacity:1}}.image-cropper .tool-box[data-v-df19c325]{border:1px solid #dedede;background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);background-color:#eee;background-size:30px 30px;background-position:0 0,15px 15px;position:relative}.image-cropper .tool-box .tips[data-v-df19c325]{position:absolute;top:50%;left:50%;z-index:101;transform:translate(-50%,-50%)}.image-cropper .canvas[data-v-df19c325]{position:absolute;top:0;left:0;z-index:98}.image-cropper .canvas-select-box[data-v-df19c325]{position:absolute;top:0;left:0;z-index:99}@keyframes zi-antBorder-df19c325{0%{background-position:0px 0px}50%{background-position:0px 5px}to{background-position:0px 10px}}.image-cropper .tool-box-control[data-v-df19c325]{background:rgba(255,255,255,0);position:absolute;z-index:101;box-sizing:border-box}.image-cropper .tool-box-control-box[data-v-df19c325]{width:100%;height:100%;position:relative;background:transparent;z-index:103;pointer-events:none}.image-cropper .tool-box-control .control-box[data-v-df19c325]{width:100%;height:100%;position:absolute;cursor:move;z-index:1;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line[data-v-df19c325]{position:absolute;z-index:1;background-size:10px 10px;background-image:linear-gradient(-45deg,var(--image-cropper-primary-color, #409eff) 25%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 50%,var(--image-cropper-primary-color, #409eff) 50%,var(--image-cropper-primary-color, #409eff) 75%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));-ms-animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;-moz-animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;-webkit-animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;animation:zi-antBorder-df19c325 .8s linear 0s infinite normal;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line-top[data-v-df19c325]{height:1px;width:100%;top:-1px}.image-cropper .tool-box-control .control-box-inner-line-bottom[data-v-df19c325]{height:1px;width:100%;bottom:-1px}.image-cropper .tool-box-control .control-box-inner-line-right[data-v-df19c325]{height:100%;width:1px;right:-1px;top:0}.image-cropper .tool-box-control .control-box-inner-line-left[data-v-df19c325]{height:100%;width:1px;left:-1px;top:0}.image-cropper .tool-box-control .select-area[data-v-df19c325]{display:block;width:260px;text-align:right;color:#fff;position:absolute;top:-20px;right:0;font-size:10px}.image-cropper .tool-box-control-line[data-v-df19c325]{position:absolute;z-index:1;background:transparent;box-sizing:border-box;border-width:0;border-style:dashed;border-color:var(--image-cropper-primary-color, #409eff)}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(2){top:33%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(3){top:66%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(4){left:33%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control-line[data-v-df19c325]:nth-child(5){left:66%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control .control-btn[data-v-df19c325]{border:1px solid rgba(255,255,255,.5);box-sizing:border-box;width:6px;height:6px;background:var(--image-cropper-primary-color, #409eff);position:absolute;border-radius:50%;z-index:999;pointer-events:auto!important}.image-cropper .tool-box-control .control-btn.left-up[data-v-df19c325]{top:0;left:0;margin-left:-3px;margin-top:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.left-down[data-v-df19c325]{bottom:0;left:0;margin-left:-3px;margin-bottom:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-up[data-v-df19c325]{top:0;right:0;margin-right:-3px;margin-top:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-down[data-v-df19c325]{bottom:0;right:0;margin-right:-3px;margin-bottom:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.top-center[data-v-df19c325]{top:0;right:50%;margin-right:-3px;margin-top:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.down-center[data-v-df19c325]{bottom:0;right:50%;margin-right:-3px;margin-bottom:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.left-center[data-v-df19c325]{top:50%;left:0;margin-left:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .tool-box-control .control-btn.right-center[data-v-df19c325]{top:50%;right:0;margin-right:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .btn[data-v-df19c325]{display:inline-block;text-align:center;background:#dedede;height:32px;line-height:1;padding:8px 15px;box-sizing:border-box;border-radius:4px;cursor:pointer;border:1px solid;font-size:14px;transition:background .3s,color .3s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .btn[disabled][data-v-df19c325]{opacity:.6}.image-cropper .btn[disabled][data-v-df19c325]:hover{opacity:.6;color:#333!important;border-color:#dedede!important;background-color:#fff!important}.image-cropper .btn.btn-default[data-v-df19c325]{color:#333;border-color:#dcdfe6;background-color:#fff;transition:background .3s,color .3s}.image-cropper .btn.btn-default[data-v-df19c325]:hover{color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff}.image-cropper .btn.btn-primary[data-v-df19c325]{color:#fff;background-color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff);transition:background .3s,color .3s}.image-cropper .btn.btn-primary[data-v-df19c325]:hover{background:var(--image-cropper-primary-color-hover, #66b1ff);border-color:var(--image-cropper-primary-color-hover, #66b1ff);color:#fff}.image-cropper .btn.btn-warning[data-v-df19c325]{color:#fff;background-color:var(--image-cropper-warning-color, #e6a23c);border-color:var(--image-cropper-warning-color, #e6a23c)}.image-cropper .btn.btn-warning[data-v-df19c325]:hover{color:#fff;background-color:var(--image-cropper-warning-color-hover, #ebb563);border-color:var(--image-cropper-warning-color-hover, #ebb563);transition:background .3s,color .3s}.image-cropper .btn.btn-primary-plain[data-v-df19c325]{color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff;transition:background .3s,color .3s}.image-cropper .btn.btn-primary-plain[data-v-df19c325]:hover{background:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff);color:#fff}.image-cropper .btn.btn-xs[data-v-df19c325]{height:26px;line-height:26px;padding:0 10px;font-size:12px}.image-cropper .file-input[data-v-df19c325]{width:1px;height:1px;border:none;opacity:0}.image-cropper .dock-main[data-v-df19c325]{position:absolute;z-index:1002;bottom:5px;left:5px;opacity:.5;transition:opacity .5s;box-sizing:border-box;padding:5px;border-radius:5px}.image-cropper .dock-main[data-v-df19c325]:hover{opacity:1}.image-cropper .dock-main .dock-btn[data-v-df19c325]{font-size:10px;cursor:pointer;display:inline-block;margin-right:4px;color:var(--image-cropper-primary-color, #409eff);border:1px solid var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff;padding:1px 4px;border-radius:3px;height:20px;line-height:20px;transition:background .2s,color .2s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .dock-main .dock-btn[data-v-df19c325]:hover{color:#fff;background-color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff)}.image-cropper .dock-main .dock-btn-scroll-bar[data-v-df19c325]{display:inline-block;margin-right:4px;margin-left:10px;background:var(--image-cropper-primary-color, #409eff);width:200px;height:10px;border-radius:5px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .dock-main .scroll-bar-control[data-v-df19c325]{position:absolute;cursor:pointer;background:#fff;border:2px solid var(--image-cropper-primary-color, #409eff);box-sizing:border-box;border-radius:50%;width:20px;height:20px;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 3px #1f5184}.image-cropper .dock-main .scroll-bar-text[data-v-df19c325]{position:absolute;cursor:pointer;background:rgba(0,0,0,.7);color:#fff;top:-16px;height:16px;line-height:16px;text-align:center;font-size:10px;white-space:nowrap;min-width:50px;border-radius:3px;transform:translate(-50%,-50%)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { defineComponent as Lt, ref as R, reactive as Vt, computed as W, toRefs as Gt, onMounted as Kt, nextTick as E, openBlock as f, createElementBlock as p, renderSlot as I, createCommentVNode as x, toDisplayString as k, createVNode as vt, Transition as yt, withCtx as bt, unref as v, normalizeClass as lt, createElementVNode as g, normalizeStyle as A, createTextVNode as C, withDirectives as rt, vShow as st, pushScopeId as Jt, popScopeId as Qt } from "vue";
const Zt = "vue3-image-cropper-next", _t = "0.0.10", te = "A Vue 3 image cropper component for Vite", ee = "dist/index.js", oe = "dist/index.mjs", ie = "dist/style.css", le = "module", re = "dist/types/index.d.ts", se = [
"vue3-image-cropper-next",
"image-cropper",
"vue3",
"typescript",
"vite",
"vue",
"cropper",
"wisdoms",
"marvin"
], ae = {
dev: "vite",
clean: "rimraf ./dist",
build: "pnpm clean && pnpm dts && vite build && pnpm generate:types",
dts: "rimraf ./tsc/type && vue-tsc --declaration --emitDeclarationOnly -p ./tsconfig.declaration.json",
"generate:types": "rimraf ./dist/types && node scripts/generate-types.cjs",
preview: "vite preview"
}, ne = {
access: "public",
registry: "https://registry.npmjs.org/"
}, de = {
type: "git",
url: "git+https://github.com/aykahs/vue-image-cropper.git",
directory: "packages/ImageCropper"
}, ge = {
url: "https://github.com/aykahs/vue-image-cropper/issues"
}, ce = "MIT", me = [
"dist",
"package.json",
"README.md"
], ue = {
name: "Marvin",
email: "454846659@qq.com"
}, he = {
"fs-extra": "^11.1.1",
"markdown-it": "^13.0.2",
vue: "^3.3.4"
}, fe = {
"@types/node": "^20.8.7",
"@vitejs/plugin-vue": "^4.2.3",
rimraf: "^5.0.5",
sass: "^1.69.4",
typescript: "^5.0.2",
vite: "^4.4.5",
"vue-tsc": "^1.8.5"
}, pe = {
name: Zt,
private: !1,
version: _t,
description: te,
main: ee,
module: oe,
style: ie,
type: le,
typings: re,
"web-types": "dist/smartips/web-types.json",
keywords: se,
scripts: ae,
publishConfig: ne,
repository: de,
bugs: ge,
license: ce,
files: me,
author: ue,
dependencies: he,
devDependencies: fe
}, xe = {
crossOrigin: {
type: Boolean,
default: !1,
required: !1
},
crossOriginHeader: {
type: String,
default: "*",
required: !1
},
label: {
type: String,
default: "选择图片",
required: !1
},
isModal: {
type: Boolean,
default: !0,
required: !1
},
lockScroll: {
type: Boolean,
default: !0,
required: !1
},
showChooseBtn: {
type: Boolean,
default: !0,
required: !1
},
boxWidth: {
type: Number,
default: 800,
required: !1
},
boxHeight: {
type: Number,
default: 400,
required: !1
},
cutWidth: {
type: Number,
default: 200,
required: !1
},
cutHeight: {
type: Number,
default: 200,
required: !1
},
rate: {
type: String,
default: null,
required: !1
},
tool: {
type: Boolean,
default: !0,
required: !1
},
footer: {
type: Boolean,
default: !0,
required: !1
},
toolBg: {
type: String,
default: "#fff",
required: !1
},
imgMove: {
type: Boolean,
default: !0,
required: !1
},
sizeChange: {
type: Boolean,
default: !0,
required: !1
},
originalGraph: {
type: Boolean,
default: !1,
required: !1
},
moveAble: {
type: Boolean,
default: !0,
required: !1
},
previewMode: {
type: Boolean,
default: !0,
required: !1
},
watermarkText: {
type: String,
default: "",
required: !1
},
watermarkTextFont: {
type: String,
default: "12px Sans-serif",
required: !1
},
watermarkTextColor: {
type: String,
default: "#fff",
required: !1
},
watermarkTextX: {
type: Number,
default: 0.95,
required: !1
},
watermarkTextY: {
type: Number,
default: 0.95,
required: !1
},
smallToUpload: {
type: Boolean,
default: !1,
required: !1
},
saveCutPosition: {
type: Boolean,
default: !1,
required: !1
},
scaleAble: {
type: Boolean,
default: !0,
required: !1
},
fileType: {
type: String,
default: "png",
required: !1
},
toolBoxOverflow: {
type: Boolean,
default: !0,
required: !1
},
quality: {
type: Number,
default: 1,
required: !1
},
isFinishClose: {
type: Boolean,
default: !0,
required: !1
}
}, H = (M) => (Jt("data-v-df19c325"), M = M(), Qt(), M), we = { class: "image-cropper" }, Be = { class: "tool-main" }, ve = {
key: 0,
class: "tool-title"
}, ye = { class: "tips" }, be = {
key: 0,
class: "dock-btn"
}, Ie = {
key: 4,
class: "dock-btn-scroll-bar"
}, Ce = { class: "tool-box-control-box" }, Me = { class: "control-box" }, Te = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-top" }, null, -1)), ke = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-bottom" }, null, -1)), He = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-left" }, null, -1)), qe = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-right" }, null, -1)), Se = { class: "select-area" }, Re = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), $e = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), Fe = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), Ne = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), Oe = ["width", "height"], We = ["width", "height"], Ae = {
key: 0,
class: "i-dialog-footer"
}, De = {
key: 0,
class: "btn btn-primary btn-primary-plain"
}, Ye = { class: "btn-group" }, ze = /* @__PURE__ */ H(() => /* @__PURE__ */ g("button", {
type: "button",
class: "btn btn-default"
}, "取消", -1)), Ue = ["disabled"], je = /* @__PURE__ */ H(() => /* @__PURE__ */ g("div", { style: { clear: "both" } }, null, -1)), Xe = /* @__PURE__ */ Lt({
name: "ImageCropper",
__name: "index",
props: xe,
emits: ["realTime", "error", "clearAll", "confirm"],
setup(M, { expose: P, emit: z }) {
const l = M, U = {
img: void 0,
sx: 0,
sy: 0,
swidth: 0,
sheight: 0,
x: 0,
y: 0,
width: 0,
height: 0
}, $ = R(), at = R(), nt = R(), j = R(), L = R(), V = R(), G = R(), Ct = R(), t = Vt({
visible: !1,
fileName: "",
cutImageObj: null,
printImageTimmer: null,
toolBoxPosition: {
x: 0,
y: 0
},
drawImg: { ...U },
toolBox: {
disable: !0,
width: l.boxWidth / 2,
height: l.boxHeight / 2,
x: 0,
y: 0,
boxMove: {
start: {
x: 0,
y: 0
},
moveTo: {
x: 0,
y: 0
}
}
},
dropImg: {
active: !1,
pageX: 0,
pageY: 0,
params: {}
},
// 旋转
rotateImg: {
angle: 0
},
rotateControl: {
active: !1,
start: {
position: 0,
x: 0,
y: 0
},
position: 100
},
// 缩放
scaleImg: {
rate: 0,
params: {}
},
controlBox: {
disable: !0,
btnName: "",
start: {
x: 0,
y: 0,
width: 0,
height: 0
}
},
selectBox: !1,
selectBoxColor: "rgba(0,0,0,0.6)",
// 是否水平翻转
isFlipHorizontal: !1,
// 是否垂直翻转
isFlipVertically: !1
}), D = W(() => {
const { fileName: e } = t, { fileType: o } = l, i = e.lastIndexOf(".");
return e.substr(0, i + 1) + (o === "jpeg" ? "jpg" : o);
}), Mt = W(() => {
let e;
return l.originalGraph ? e = t.toolBox.width / (t.drawImg.width / t.drawImg.swidth) : e = t.toolBox.width, Number(e).toFixed(0);
}), Tt = W(() => {
let e;
return l.originalGraph ? e = t.toolBox.height / (t.drawImg.width / t.drawImg.swidth) : e = t.toolBox.height, Number(e).toFixed(0);
}), kt = W(() => {
let e;
return e = t.toolBoxPosition.x, Number(e).toFixed(0);
}), Ht = W(() => {
let e;
return e = t.toolBoxPosition.y, Number(e).toFixed(0);
}), b = W(() => {
let e = 1;
if (l.rate) {
const o = l.rate.split(":");
e = Number(o[0]) / Number(o[1]);
}
return e;
}), { visible: dt, drawImg: F, toolBox: Y, dropImg: qt, rotateImg: St, rotateControl: K, controlBox: Rt } = Gt(t), q = z, J = (e) => {
const o = (i) => {
var r;
if ($.value && ($.value.onmousewheel = X, (r = $.value) == null || r.addEventListener("DOMMouseScroll", X)), l.isModal) {
l.lockScroll && (document.body.style.overflowY = "hidden");
const s = at.value.offsetHeight + 200, n = window.innerHeight;
let a = nt.value;
s > n ? a.style.overflowY = "scroll" : a.style.overflowY = "hidden";
}
i && typeof i == "function" && i();
};
if (e && typeof e == "object" && e.src) {
let i = new Image();
l.crossOrigin && (i.crossOrigin = l.crossOriginHeader), i.name = e.name, i.setAttribute("name", e.name), i.style.position = "fixed", i.style.top = "-5000px", i.style.opacity = "0", i.onerror = (r) => {
console.error("图片加载失败"), q("error", {
event: r,
msg: "图片加载失败"
}), mt();
}, i.onload = () => {
if (i.complete)
t.visible = !0, E(() => {
o(() => {
$t(i);
});
});
else
throw new Error("图片加载失败");
}, i.src = e.src, t.cutImageObj = i, document.body.appendChild(i);
} else
t.visible = !0, E(() => {
o();
});
}, O = () => {
Ot(), l.isModal && (l.lockScroll && (document.body.style.overflowY = "scroll"), E(() => {
t.visible = !1;
}));
}, Q = () => {
var e;
(e = G.value) == null || e.click();
}, $t = (e) => {
const o = e.height, i = e.width, { boxWidth: r, boxHeight: s } = l;
let n, a = { ...t.drawImg };
t.fileName = e.name, a.img = e, t.scaleImg.rate = i / o, o < s && i < r ? (n = 1, a.x = (r - i) / 2, a.y = (s - o) / 2) : i / o <= r / s ? (n = s / o, a.x = (r - i * n) / 2) : (n = r / i, a.y = (s - o * n) / 2), a.swidth = i, a.sheight = o, a.width = i * n, a.height = o * n, a.x = (r - a.width) / 2, a.y = (s - a.height) / 2, t.drawImg = a, T(), gt();
}, Ft = (e) => {
const o = e.target;
let i;
if (o != null && o.files)
i = o.files[0] || null;
else
return console.error("IE9及以下需要自己传入image对象"), !1;
if (i) {
t.fileName = i.name;
const r = new FileReader();
r.readAsDataURL(i), r.onload = (s) => {
var u;
const n = (u = s.target) == null ? void 0 : u.result, a = document.createElement("img");
a.src = n;
let c = setInterval(() => {
if (r.readyState === 2) {
if (clearInterval(c), !l.sizeChange && l.smallToUpload && a.width <= l.cutWidth && a.height <= l.cutHeight) {
l.isFinishClose && O(), q("confirm", {
fileName: D.value,
file: i
});
return;
}
const m = a.height, d = a.width, { boxWidth: B, boxHeight: w } = l;
let y, h = { ...t.drawImg };
h.img = a, t.scaleImg.rate = d / m, m < w && d < B ? (y = 1, h.x = (B - d) / 2, h.y = (w - m) / 2) : d / m <= B / w ? (y = w / m, h.x = (B - d * y) / 2) : (y = B / d, h.y = (w - m * y) / 2), h.swidth = d, h.sheight = m, h.width = d * y, h.height = m * y, h.x = (B - h.width) / 2, h.y = (w - h.height) / 2, t.drawImg = h, T(), gt();
}
}, 200);
};
}
}, gt = () => {
(t.toolBox.width === l.boxWidth / 2 || t.toolBox.height === l.boxHeight / 2 || l.saveCutPosition === !1) && (t.toolBox.width = l.cutWidth > l.boxWidth ? l.boxWidth : l.cutWidth, t.toolBox.height = l.cutHeight > l.boxHeight ? l.boxHeight : l.cutHeight), (t.toolBox.x === 0 && t.toolBox.y === 0 || l.saveCutPosition === !1) && (t.toolBox.x = l.boxWidth / 2 - t.toolBox.width / 2, t.toolBox.y = l.boxHeight / 2 - t.toolBox.height / 2), ut().then(() => {
T();
}), Z(t.toolBox.width, t.toolBox.height, t.toolBox.x, t.toolBox.y);
}, Nt = () => !!(window.File && window.FileList && window.FileReader && window.Blob && navigator.userAgent.indexOf("Edge") === -1 && navigator.userAgent.indexOf("MSIE") === -1 && navigator.userAgent.indexOf("Trident") === -1), ct = (e, o) => {
let i = e.split(","), r = i[0].match(/:(.*?);/)[1], s = atob(i[1]), n = s.length, a = new Uint8Array(n);
for (; n--; )
a[n] = s.charCodeAt(n);
if (Nt())
return new File([a], o, { type: r });
throw "不支持File对象";
}, Ot = () => {
const e = j.value;
e.getContext("2d").clearRect(0, 0, e.width, e.height);
const i = L.value;
i.getContext("2d").clearRect(0, 0, i.width, i.height);
const { sx: s, sy: n } = t.drawImg;
t.drawImg = { ...U, sx: s, sy: n }, t.isFlipHorizontal = !1, t.isFlipVertically = !1, G.value.value = "", t.rotateImg.angle = 0, it(), mt(), q("clearAll");
}, mt = () => {
t.cutImageObj !== null && t.cutImageObj !== void 0 && typeof t.cutImageObj.remove == "function" && t.cutImageObj.remove(), t.cutImageObj = null;
}, Z = (e, o, i, r) => {
const { boxWidth: s, boxHeight: n } = l, { width: a, height: c, x: u, y: m } = t.drawImg;
l.toolBoxOverflow || (e < 1 && (e = 1), o < 1 && (o = 1), e > a && (e = a), o > c && (o = c), i < t.drawImg.x && (i = t.drawImg.x), r < m && (r = m), i > u + a - e && (i = u + a - e), r > m + c - o && (r = m + c - o)), e > s && (e = s), o > n && (o = n), i < 0 && (i = 0), r < 0 && (r = 0);
const d = V.value, B = L.value, w = B.getContext("2d");
w.fillStyle = t.selectBoxColor, w.clearRect(0, 0, B.width, B.height), w.fillRect(0, 0, B.width, B.height);
let y, h;
l.rate && l.rate !== "" ? b.value >= 1 ? (y = e, h = e / b.value, h + r > m + c && (h = m + c - r, y = h * b.value)) : (y = o * b.value, h = o) : (y = e, h = o), t.toolBox.width = Math.abs(y), t.toolBox.height = Math.abs(h), d.style.width = Math.abs(y) + "px", d.style.height = Math.abs(h) + "px", t.toolBox.boxMove.moveTo.x = i, t.toolBox.boxMove.moveTo.y = r, y < 0 && (i = i + y), h < 0 && (r = r + h), i + t.toolBox.width > s && (i = s - t.toolBox.width), i < 0 && (i = 0), r + t.toolBox.height > n && (r = n - t.toolBox.height), r < 0 && (r = 0), t.toolBoxPosition.x = i, t.toolBoxPosition.y = r, d.style.left = i + "px", d.style.top = r + "px", w.clearRect(i, r, Math.abs(y), Math.abs(h)), t.printImageTimmer && clearTimeout(t.printImageTimmer), t.printImageTimmer = setTimeout(() => {
N(!0);
}, 100);
}, ut = () => new Promise((e) => {
if (!l.toolBoxOverflow) {
const { width: o, height: i, x: r, y: s } = t.toolBox, { width: n, height: a, x: c, y: u } = t.drawImg;
if (n < o || a < i) {
const m = n / a;
n < o && (t.drawImg.width = o, t.drawImg.height = o / m), t.drawImg.height < i && (t.drawImg.height = i, t.drawImg.width = a * m), t.drawImg.x = (l.boxWidth - n) / 2, t.drawImg.y = (l.boxHeight - a) / 2;
}
console.log("state.drawImg.y > state.toolBox.y", u + a, s + i), c > r && (t.drawImg.x = r), c + n < r + o && (t.drawImg.x = r + o - n), u > s && (t.drawImg.y = s), u + a < s + i && (t.drawImg.y = s + i - a);
}
e();
}), X = (e) => {
if (t.drawImg.img && l.scaleAble) {
let o = 1;
const i = e || window.event;
i.deltaY ? o = -(i.deltaY / 40) : i.detail && (o = i.detail);
const { width: r, x: s, y: n } = t.drawImg;
let a = 50;
t.drawImg.x = t.drawImg.width - o * 9 > a ? s + o * 3 : s, t.drawImg.y = t.drawImg.width - o * 9 > a ? n + o * 3 : n, t.drawImg.width = t.drawImg.width - o * 9 > a ? r - o * 9 : a, t.drawImg.height = r / t.scaleImg.rate, ut().then(() => {
T(), t.printImageTimmer && clearTimeout(t.printImageTimmer), t.printImageTimmer = setTimeout(() => {
N(!0);
}, 100);
});
}
return e.preventDefault(), !1;
}, _ = () => {
const { width: e, height: o, x: i, y: r } = t.toolBox;
e < 0 && (t.toolBox.boxMove.moveTo.x = i - e), t.toolBox.height < 0 && (t.toolBox.boxMove.moveTo.y = r - o), t.toolBox.width = Math.abs(e), t.toolBox.height = Math.abs(o);
}, Wt = (e) => {
const o = V.value;
t.toolBox.x = parseInt(o.style.left.split("px")[0]), t.toolBox.y = parseInt(o.style.top.split("px")[0]), t.toolBox.disable = !1, t.dropImg.active = !1, t.toolBox.boxMove.start = {
x: e.pageX,
y: e.pageY
};
}, At = (e) => {
if (t.dropImg.active && ft(e), !t.toolBox.disable && l.moveAble) {
const o = e.pageX - t.toolBox.boxMove.start.x, i = e.pageY - t.toolBox.boxMove.start.y, r = t.toolBox.x + o, s = t.toolBox.y + i;
Z(t.toolBox.width, t.toolBox.height, r, s);
}
}, Dt = () => {
t.toolBox.disable = !0, t.printImageTimmer && clearTimeout(t.printImageTimmer), t.printImageTimmer = setTimeout(() => {
N(!0);
}, 100), _();
}, ht = () => {
const { x: e, y: o } = t.toolBoxPosition;
t.toolBox.x = e, t.toolBox.y = o, t.toolBox.disable = !0, t.dropImg.active = !1, _();
}, T = () => {
if (t.drawImg.img) {
const e = j.value, o = e.getContext("2d");
o.font = "18px bold 黑体", o.fillStyle = "#ff0", o.textAlign = "center", o.textBaseline = "middle", o.save(), o.clearRect(0, 0, e.width, e.height), o.translate(t.drawImg.x + t.drawImg.width / 2, t.drawImg.y + t.drawImg.height / 2), o.rotate(t.rotateImg.angle * Math.PI / 180), o.translate(-(t.drawImg.x + t.drawImg.width / 2), -(t.drawImg.y + t.drawImg.height / 2)), o.translate(t.drawImg.x, t.drawImg.y), o.scale(t.isFlipHorizontal ? -1 : 1, t.isFlipVertically ? -1 : 1), o.drawImage(
t.drawImg.img,
t.drawImg.sx,
t.drawImg.sy,
t.drawImg.swidth,
t.drawImg.sheight,
t.isFlipHorizontal ? -t.drawImg.width : 0,
t.isFlipVertically ? -t.drawImg.height : 0,
t.drawImg.width,
t.drawImg.height
), o.translate(-t.drawImg.x, t.drawImg.y), o.restore(), t.printImageTimmer && clearTimeout(t.printImageTimmer), t.printImageTimmer = setTimeout(() => {
N(!0);
}, 100);
}
}, Yt = (e) => {
l.imgMove && (t.dropImg.active = !0, t.dropImg.params = { ...t.drawImg }, t.dropImg.pageX = e.pageX, t.dropImg.pageY = e.pageY);
}, tt = () => {
t.dropImg.active = !1, t.printImageTimmer && clearTimeout(t.printImageTimmer), t.printImageTimmer = setTimeout(() => {
N(!0);
}, 100);
}, ft = (e) => {
if (t.dropImg.active && t.drawImg.img) {
let o = { ...t.drawImg };
o.x = t.dropImg.params.x - (t.dropImg.pageX - e.pageX), o.y = t.dropImg.params.y - (t.dropImg.pageY - e.pageY), l.toolBoxOverflow || (o.x > t.toolBox.x && (o.x = t.toolBox.x), o.x < t.toolBox.x + t.toolBox.width - o.width && (o.x = t.toolBox.x + t.toolBox.width - o.width), o.y > t.toolBox.y && (o.y = t.toolBox.y), o.y < t.toolBox.y + t.toolBox.height - o.height && (o.y = t.toolBox.y + t.toolBox.height - o.height)), t.drawImg = o, T(), e.stopPropagation();
}
}, pt = () => {
t.drawImg.width = t.drawImg.swidth, t.drawImg.height = t.drawImg.sheight, T();
}, et = (e = "horizontal") => {
t.drawImg.img && (e === "horizontal" ? t.isFlipHorizontal = !t.isFlipHorizontal : t.isFlipVertically = !t.isFlipVertically, T());
}, ot = (e) => {
const i = t.rotateImg.angle + e;
i >= -180 && i <= 180 && (t.rotateImg.angle = i, t.rotateControl.position = i / 180 * 100 + 100, T());
}, it = () => {
t.rotateImg.angle = 0, t.rotateControl.position = 100, T();
}, S = (e, o) => {
t.controlBox.disable = !1, t.controlBox.btnName = o, t.controlBox.start.x = e.clientX, t.controlBox.start.y = e.clientY, t.controlBox.start.width = t.toolBox.width, t.controlBox.start.height = t.toolBox.height, e.stopPropagation();
}, xt = (e) => {
t.controlBox.disable = !0, tt(), _(), ht(), e.stopPropagation();
}, zt = (e) => {
if (t.controlBox.disable === !1) {
const o = e.clientX - t.controlBox.start.x, i = e.clientY - t.controlBox.start.y;
let r = 0, s = 0;
t.controlBox.btnName == "leftUp" && (l.rate ? b.value >= 1 ? (r = t.toolBox.x + o, s = t.toolBox.y + o / b.value) : (r = t.toolBox.x + i * b.value, s = t.toolBox.y + i) : (r = t.toolBox.x + o, s = t.toolBox.y + i), t.toolBox.width = t.controlBox.start.width - o, t.toolBox.height = t.controlBox.start.height - i), t.controlBox.btnName == "rightUp" && (l.rate && b.value >= 1 ? (r = t.toolBox.x, s = t.toolBox.y - o / b.value) : (r = t.toolBox.x, s = t.toolBox.y + i), t.toolBox.width = t.controlBox.start.width + o, t.toolBox.height = t.controlBox.start.height - i), t.controlBox.btnName == "rightDown" && (r = t.toolBox.x, s = t.toolBox.y, t.toolBox.width = t.controlBox.start.width + o, t.toolBox.height = t.controlBox.start.height + i), t.controlBox.btnName == "leftDown" && (l.rate ? b.value >= 1 ? (r = t.toolBox.x + o, s = t.toolBox.y) : (r = t.toolBox.x + -i * b.value, s = t.toolBox.y) : (r = t.toolBox.x + o, s = t.toolBox.y), t.toolBox.width = t.controlBox.start.width - o, t.toolBox.height = t.controlBox.start.height + i), t.controlBox.btnName == "topCenter" && (r = t.toolBox.x, s = t.toolBox.y + i, t.toolBox.width = t.controlBox.start.width, t.toolBox.height = t.controlBox.start.height - i), t.controlBox.btnName == "downCenter" && (r = t.toolBox.x, s = t.toolBox.y, t.toolBox.width = t.controlBox.start.width, t.toolBox.height = t.controlBox.start.height + i), t.controlBox.btnName == "leftCenter" && (r = t.toolBox.x + o, s = t.toolBox.y, t.toolBox.width = t.controlBox.start.width - o, t.toolBox.height = t.controlBox.start.height), t.controlBox.btnName == "rightCenter" && (r = t.toolBox.x, s = t.toolBox.y, t.toolBox.width = t.controlBox.start.width + o, t.toolBox.height = t.controlBox.start.height), Z(t.toolBox.width, t.toolBox.height, r, s);
}
e.stopPropagation();
}, wt = (e) => e.toDataURL(`image/${l.fileType}`, l.quality), Ut = (e) => {
HTMLCanvasElement.prototype.toBlob || Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
value: (o, i, r) => {
window.atob ? setTimeout(() => {
const s = atob(e.toDataURL(i, r).split(",")[1]), n = s.length, a = new Uint8Array(n);
let c;
for (let u = 0; u < n; u++)
a[u] = s.charCodeAt(u);
try {
c = new Blob([a], {
type: `image/${l.fileType}`
}), o(c);
} catch (u) {
if (window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder, u.name == "TypeError" && window.BlobBuilder) {
const m = window.BlobBuilder, d = new m();
d.append(a.buffer), c = d.getBlob(`image/${l.fileType}`), o(c);
}
u.name == "InvalidStateError" && (c = new Blob([a.buffer], { type: `image/${l.fileType}` }), o(c));
}
}, 200) : o(!1, {
type: `image/${l.fileType}`
});
}
});
}, N = (e, o) => {
if (t.drawImg.img) {
const i = j.value;
if (l.watermarkText && !e) {
const s = i.getContext("2d");
s.font = l.watermarkTextFont, s.fillStyle = l.watermarkTextColor, s.textAlign = "right", s.textBaseline = "bottom", s.fillText(
l.watermarkText,
t.toolBox.x + t.toolBox.width * l.watermarkTextX,
t.toolBox.y + t.toolBox.height * l.watermarkTextY
);
}
const r = new Image();
l.crossOrigin && (r.crossOrigin = l.crossOriginHeader), r.src = i.toDataURL(`image/${l.fileType}`, l.quality), Ut(i), i.toBlob((s) => {
if (s) {
const n = new FileReader();
n.readAsDataURL(s), n.onload = () => {
const a = setInterval(() => {
var c;
if (n.readyState == 2) {
clearInterval(a);
const u = document.createElement("canvas"), m = u.getContext("2d");
if (l.originalGraph == !0) {
const d = t.drawImg.width / t.drawImg.swidth, B = t.toolBox.width / d, w = t.toolBox.height / d;
u.width = B, u.height = w;
const y = (t.toolBox.x - t.drawImg.x) / d, h = (t.toolBox.y - t.drawImg.y) / d, Et = t.drawImg.swidth, Pt = t.drawImg.sheight;
m.translate(-y, -h), m.drawImage(t.drawImg.img, 0, 0, Et, Pt);
} else {
u.width = t.toolBox.width, u.height = t.toolBox.height;
const d = t.toolBox, [B = 1, w = 1] = ((c = l.rate) == null ? void 0 : c.split(":")) || [];
m.drawImage(
r,
d.x,
d.y,
d.width,
B >= w ? d.width * b.value : d.width / b.value,
0,
0,
d.width,
B >= w ? d.width * b.value : d.width / b.value
);
}
u.toBlob(
(d) => {
const B = wt(u), w = {
fileName: D.value,
blob: d,
file: ct(B, D.value),
dataURL: B
};
e ? l.previewMode && (q("realTime", w), o && o(w)) : (l.isFinishClose && O(), q("confirm", w), o && o(w));
},
`image/${l.fileType}`,
l.quality
);
}
}, 200);
};
} else {
const n = document.createElement("canvas");
n.width = t.toolBox.width, n.height = t.toolBox.height;
const a = n.getContext("2d"), c = t.toolBox;
a.drawImage(
r,
c.x,
c.y,
c.width,
c.width * b.value,
0,
0,
c.width,
c.width * b.value
);
const u = wt(n), m = {
fileName: D.value,
file: ct(u, D.value),
dataURL: u
};
e ? (q("realTime", m), o && o(m)) : (l.isFinishClose && O(), q("confirm", m), o && o(m));
}
});
} else
e || (console.warn("No picture selected"), q("error", {
err: 1,
msg: "没有选中图片"
}));
}, jt = (e) => {
if (t.rotateControl.active) {
const o = e.pageX - t.rotateControl.start.x;
let i = t.rotateControl.start.position + o;
i <= 0 && (i = 0), i >= 200 && (i = 200), t.rotateControl.position = i, t.rotateImg.angle = (i - 100) / 100 * 180, T();
}
}, Xt = (e) => {
t.rotateControl.active = !0, t.rotateControl.start.x = e.pageX, t.rotateControl.start.y = e.pageY, t.rotateControl.start.position = t.rotateControl.position;
}, Bt = () => {
t.rotateControl.active = !1;
};
return Kt(() => {
l.isModal === !1 && (t.visible = !0, E(() => {
var e;
$.value && ($.value.onmousewheel = X, (e = $.value) == null || e.addEventListener("DOMMouseScroll", X));
}));
}), P({
open: J,
close: O,
chooseImage: Q,
flipDirection: et,
resetScale: pt,
rotate: ot,
resetRotate: it,
cropImage: N
}), (e, o) => (f(), p("div", we, [
e.showChooseBtn && e.isModal ? (f(), p("div", {
key: 0,
onClick: o[0] || (o[0] = (i) => J())
}, [
I(e.$slots, "open", {}, void 0, !0)
])) : x("", !0),
!e.$slots.openImgCutter && !e.$slots.open && e.isModal ? (f(), p("button", {
key: 1,
type: "button",
class: "btn btn-primary",
onClick: o[1] || (o[1] = (i) => J())
}, k(e.label), 1)) : x("", !0),
vt(yt, { name: "fade" }, {
default: bt(() => [
v(dt) ? (f(), p("div", {
key: 0,
class: lt(e.isModal ? "mask" : ""),
ref_key: "maskRef",
ref: nt
}, [
v(dt) ? (f(), p("div", {
key: 0,
class: lt(e.isModal ? "dialog-box-modal" : "dialog-box")
}, [
vt(yt, {
name: "fade",
"enter-class": "fade-in-enter",
"enter-active-class": "fade-in-active",
"leave-class": "fade-out-enter",
"leave-active-class": "fade-out-active"
}, {
default: bt(() => [
g("div", {
ref_key: "dialogMainModalRef",
ref: at,
class: lt(e.isModal ? "dialog-main-modal" : "dialog-main"),
style: A("width:" + (e.isModal ? e.boxWidth + 32 : e.boxWidth) + "px")
}, [
g("div", Be, [
e.isModal ? (f(), p("div", ve, [
I(e.$slots, "title", {}, () => [
C(" 图片裁剪")
], !0),
g("span", {
class: "close-icon",
onClick: O
})
])) : x("", !0),
g("div", {
ref_key: "toolBoxRef",
ref: $,
style: A("height:" + e.boxHeight + "px;width:" + e.boxWidth + "px"),
onMousemove: zt,
onMouseup: xt,
onMouseleave: xt,
class: "tool-box"
}, [
rt(g("div", ye, [
g("div", {
class: "btn btn-warning btn-xs",
onClick: Q
}, k(e.label), 1)
], 512), [
[st, !v(F).img && e.showChooseBtn]
]),
e.tool == !0 ? rt((f(), p("div", {
key: 0,
class: "dock-main",
style: A("background:" + e.toolBg),
onMouseenter: tt
}, [
e.rate ? (f(), p("div", be, [
I(e.$slots, "ratio", {}, () => [
C(" Ratio: ")
], !0),
C(" " + k(e.rate), 1)
])) : x("", !0),
g("div", {
class: "dock-btn",
onClick: pt
}, [
I(e.$slots, "scale", {}, () => [
C(" Scale: ")
], !0),
C(" " + k(v(F).swidth > 0 ? (v(F).width / v(F).swidth).toFixed(2) : "-"), 1)
]),
e.originalGraph === !1 ? (f(), p("div", {
key: 1,
onClick: o[2] || (o[2] = (i) => ot(-90)),
class: "dock-btn"
}, [
I(e.$slots, "rotateLeft", {}, () => [
C(" ↳ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 2,
onClick: o[3] || (o[3] = (i) => ot(90)),
class: "dock-btn"
}, [
I(e.$slots, "rotateRight", {}, () => [
C(" ↲ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 3,
onClick: o[4] || (o[4] = (i) => it()),
class: "dock-btn"
}, [
I(e.$slots, "resetRotate", {}, () => [
C(" ↻ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", Ie, [
g("div", {
ref_key: "dockBtnScrollControlRef",
ref: Ct,
onMousemove: jt,
onMousedown: Xt,
onMouseleave: Bt,
onMouseup: Bt,
style: A("left:" + v(K).position + "px"),
class: "scroll-bar-control"
}, null, 36),
v(K).active == !0 ? (f(), p("div", {
key: 0,
class: "scroll-bar-text",
style: A("left:" + v(K).position + "px")
}, k(v(St).angle.toFixed(0) + "°"), 5)) : x("", !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 5,
onClick: o[5] || (o[5] = (i) => et()),
class: "dock-btn"
}, [
I(e.$slots, "flipHorizontal", {}, () => [
C(" ⇆ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 6,
onClick: o[6] || (o[6] = (i) => et("vertically")),
class: "dock-btn"
}, [
I(e.$slots, "flipVertically", {}, () => [
C(" ⇅ ")
], !0)
])) : x("", !0)
], 36)), [
[
st,
v(F).img && v(qt).active !== !0 && v(Rt).disable == !0 && v(Y).disable == !0
]
]) : x("", !0),
rt(g("div", {
ref_key: "toolBoxControlRef",
ref: V,
onMousedown: Wt,
onMouseup: ht,
onMousemove: At,
onMouseleave: Dt,
class: "tool-box-control",
style: A({
pointerEvents: e.moveAble ? "auto" : "none"
})
}, [
g("div", Ce, [
g("div", Me, [
Te,
ke,
He,
qe,
g("div", Se, [
I(e.$slots, "width", {}, () => [
C(" 宽 ")
], !0),
C(":" + k(Mt.value) + " ", 1),
I(e.$slots, "high", {}, () => [
C(" 高 ")
], !0),
C(":" + k(Tt.value) + " (x:" + k(kt.value) + ",y:" + k(Ht.value) + ") ", 1)
]),
e.sizeChange ? (f(), p("div", {
key: 0,
"data-name": "leftUp",
onMousedown: o[7] || (o[7] = (i) => S(i, "leftUp")),
class: "left-up control-btn"
}, null, 32)) : x("", !0),
e.sizeChange ? (f(), p("div", {
key: 1,
"data-name": "leftDown",
onMousedown: o[8] || (o[8] = (i) => S(i, "leftDown")),
class: "left-down control-btn"
}, null, 32)) : x("", !0),
e.sizeChange ? (f(), p("div", {
key: 2,
"data-name": "rightUp",
onMousedown: o[9] || (o[9] = (i) => S(i, "rightUp")),
class: "right-up control-btn"
}, null, 32)) : x("", !0),
e.sizeChange ? (f(), p("div", {
key: 3,
"data-name": "rightDown",
onMousedown: o[10] || (o[10] = (i) => S(i, "rightDown")),
class: "right-down control-btn"
}, null, 32)) : x("", !0),
e.sizeChange && !e.rate && v(Y).width > 20 ? (f(), p("div", {
key: 4,
"data-name": "topCenter",
onMousedown: o[11] || (o[11] = (i) => S(i, "topCenter")),
class: "top-center control-btn"
}, null, 32)) : x("", !0),
e.sizeChange && !e.rate && v(Y).width > 20 ? (f(), p("div", {
key: 5,
"data-name": "downCenter",
onMousedown: o[12] || (o[12] = (i) => S(i, "downCenter")),
class: "down-center control-btn"
}, null, 32)) : x("", !0),
e.sizeChange && !e.rate && v(Y).height > 20 ? (f(), p("div", {
key: 6,
"data-name": "leftCenter",
onMousedown: o[13] || (o[13] = (i) => S(i, "leftCenter")),
class: "left-center control-btn"
}, null, 32)) : x("", !0),
e.sizeChange && !e.rate && v(Y).height > 20 ? (f(), p("div", {
key: 7,
"data-name": "rightCenter",
onMousedown: o[14] || (o[14] = (i) => S(i, "rightCenter")),
class: "right-center control-btn"
}, null, 32)) : x("", !0)
]),
Re,
$e,
Fe,
Ne
])
], 36), [
[st, v(F).img]
]),
g("canvas", {
class: "canvas-select-box",
ref_key: "canvasSelectBoxRef",
ref: L,
width: e.boxWidth,
onMousedown: Yt,
onMouseup: tt,
onMousemove: ft,
height: e.boxHeight
}, null, 40, Oe),
g("canvas", {
class: "canvas",
ref_key: "canvasRef",
ref: j,
width: e.boxWidth,
height: e.boxHeight
}, null, 8, We)
], 36)
]),
I(e.$slots, "footer", {}, () => [
e.footer ? (f(), p("div", Ae, [
g("input", {
class: "file-input",
onChange: Ft,
ref_key: "inputFileRef",
ref: G,
type: "file",
accept: "image/*"
}, null, 544),
g("div", {
class: "choose",
onClick: Q
}, [
I(e.$slots, "choose", {}, () => [
e.showChooseBtn ? (f(), p("div", De, k(e.label), 1)) : x("", !0)
], !0)
]),
g("div", Ye, [
g("div", { onClick: O }, [
I(e.$slots, "cancel", {}, () => [
ze
], !0)
]),
g("div", {
onClick: o[15] || (o[15] = (i) => N(!1))
}, [
I(e.$slots, "confirm", {}, () => [
g("button", {
type: "button",
class: "btn btn-primary",
style: { "margin-left": "15px" },
disabled: !v(F).img
}, " 确定 ", 8, Ue)
], !0)
])
])
])) : x("", !0)
], !0)
], 6)
]),
_: 3
}),
je
], 2)) : x("", !0)
], 2)) : x("", !0)
]),
_: 3
})
]));
}
});
const Ee = (M, P) => {
const z = M.__vccOpts || M;
for (const [l, U] of P)
z[l] = U;
return z;
}, It = /* @__PURE__ */ Ee(Xe, [["__scopeId", "data-v-df19c325"]]), Pe = pe.version, Le = (M) => {
M.component(It.name, It);
}, Ge = { install: Le, version: Pe };
export {
It as ImageCropper,
Ge as default,
xe as imageCropperProps,
Pe as version
};