image-cropper-next
Version:
A Vue 3 image cropper component for Vite
998 lines • 67.6 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.fade-enter-active[data-v-58a65feb],.fade-leave-active[data-v-58a65feb]{transition:opacity .3s}.fade-enter[data-v-58a65feb],.fade-leave-to[data-v-58a65feb]{opacity:0}.fade-in-enter[data-v-58a65feb]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.fade-out-enter[data-v-58a65feb],.fade-in-active[data-v-58a65feb]{transition:margin-top .2s,opacity .2s}.fade-out-active[data-v-58a65feb]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.image-cropper .mask[data-v-58a65feb]{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-58a65feb]{clear:both}.image-cropper .dialog-box-modal[data-v-58a65feb]{position:relative;padding-top:100px;padding-bottom:100px;clear:both}.image-cropper .dialog-main-modal[data-v-58a65feb]{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-58a65feb .3s}.image-cropper .dialog-main[data-v-58a65feb]{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-58a65feb]{display:block;width:100%;height:40px;margin-top:15px;margin-bottom:15px}.image-cropper .i-dialog-footer .choose[data-v-58a65feb]{display:inline-flex}.image-cropper .i-dialog-footer .btn-group[data-v-58a65feb]{display:inline-flex;float:right}.image-cropper .tool-main[data-v-58a65feb]{box-sizing:border-box}.image-cropper .tool-main .tool-title[data-v-58a65feb]{margin-bottom:15px;font-size:20px;color:#333}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]{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-58a65feb]:after,.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:before{content:\"\";position:absolute;top:50%;left:50%;width:18px;height:2px;background:#666}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:after{transform:translate(-50%,-50%) rotate(45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:before{transform:translate(-50%,-50%) rotate(-45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover{transform:scale(1.2)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover:after,.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover:before{background:#333}@keyframes dialogShow-58a65feb{0%{margin-top:-50px;opacity:0}to{margin-top:0;opacity:1}}.image-cropper .tool-box[data-v-58a65feb]{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-58a65feb]{position:absolute;top:50%;left:50%;z-index:101;transform:translate(-50%,-50%)}.image-cropper .canvas[data-v-58a65feb]{position:absolute;top:0;left:0;z-index:98}.image-cropper .canvas-select-box[data-v-58a65feb]{position:absolute;top:0;left:0;z-index:99}@keyframes zi-antBorder-58a65feb{0%{background-position:0px 0px}50%{background-position:0px 5px}to{background-position:0px 10px}}.image-cropper .tool-box-control[data-v-58a65feb]{background:rgba(255,255,255,0);position:absolute;z-index:101;box-sizing:border-box}.image-cropper .tool-box-control-box[data-v-58a65feb]{width:100%;height:100%;position:relative;background:transparent;z-index:103;pointer-events:none}.image-cropper .tool-box-control .control-box[data-v-58a65feb]{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-58a65feb]{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-58a65feb .8s linear 0s infinite normal;-moz-animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;-webkit-animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line-top[data-v-58a65feb]{height:1px;width:100%;top:-1px}.image-cropper .tool-box-control .control-box-inner-line-bottom[data-v-58a65feb]{height:1px;width:100%;bottom:-1px}.image-cropper .tool-box-control .control-box-inner-line-right[data-v-58a65feb]{height:100%;width:1px;right:-1px;top:0}.image-cropper .tool-box-control .control-box-inner-line-left[data-v-58a65feb]{height:100%;width:1px;left:-1px;top:0}.image-cropper .tool-box-control .select-area[data-v-58a65feb]{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-58a65feb]{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-58a65feb]:nth-child(2){top:33%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(3){top:66%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(4){left:33%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(5){left:66%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control .control-btn[data-v-58a65feb]{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-58a65feb]{top:0;left:0;margin-left:-3px;margin-top:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.left-down[data-v-58a65feb]{bottom:0;left:0;margin-left:-3px;margin-bottom:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-up[data-v-58a65feb]{top:0;right:0;margin-right:-3px;margin-top:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-down[data-v-58a65feb]{bottom:0;right:0;margin-right:-3px;margin-bottom:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.top-center[data-v-58a65feb]{top:0;right:50%;margin-right:-3px;margin-top:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.down-center[data-v-58a65feb]{bottom:0;right:50%;margin-right:-3px;margin-bottom:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.left-center[data-v-58a65feb]{top:50%;left:0;margin-left:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .tool-box-control .control-btn.right-center[data-v-58a65feb]{top:50%;right:0;margin-right:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .btn[data-v-58a65feb]{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-58a65feb]{opacity:.6}.image-cropper .btn[disabled][data-v-58a65feb]:hover{opacity:.6;color:#333!important;border-color:#dedede!important;background-color:#fff!important}.image-cropper .btn.btn-default[data-v-58a65feb]{color:#333;border-color:#dcdfe6;background-color:#fff;transition:background .3s,color .3s}.image-cropper .btn.btn-default[data-v-58a65feb]: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-58a65feb]{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-58a65feb]: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-58a65feb]{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-58a65feb]: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-58a65feb]{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-58a65feb]: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-58a65feb]{height:26px;line-height:26px;padding:0 10px;font-size:12px}.image-cropper .file-input[data-v-58a65feb]{width:1px;height:1px;border:none;opacity:0}.image-cropper .dock-main[data-v-58a65feb]{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-58a65feb]:hover{opacity:1}.image-cropper .dock-main .dock-btn[data-v-58a65feb]{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-58a65feb]: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-58a65feb]{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-58a65feb]{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-58a65feb]{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-58a65feb],.fade-leave-active[data-v-58a65feb]{transition:opacity .3s}.fade-enter[data-v-58a65feb],.fade-leave-to[data-v-58a65feb]{opacity:0}.fade-in-enter[data-v-58a65feb]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.fade-out-enter[data-v-58a65feb],.fade-in-active[data-v-58a65feb]{transition:margin-top .2s,opacity .2s}.fade-out-active[data-v-58a65feb]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.image-cropper .mask[data-v-58a65feb]{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-58a65feb]{clear:both}.image-cropper .dialog-box-modal[data-v-58a65feb]{position:relative;padding-top:100px;padding-bottom:100px;clear:both}.image-cropper .dialog-main-modal[data-v-58a65feb]{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-58a65feb .3s}.image-cropper .dialog-main[data-v-58a65feb]{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-58a65feb]{display:block;width:100%;height:40px;margin-top:15px;margin-bottom:15px}.image-cropper .i-dialog-footer .choose[data-v-58a65feb]{display:inline-flex}.image-cropper .i-dialog-footer .btn-group[data-v-58a65feb]{display:inline-flex;float:right}.image-cropper .tool-main[data-v-58a65feb]{box-sizing:border-box}.image-cropper .tool-main .tool-title[data-v-58a65feb]{margin-bottom:15px;font-size:20px;color:#333}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]{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-58a65feb]:after,.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:before{content:\"\";position:absolute;top:50%;left:50%;width:18px;height:2px;background:#666}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:after{transform:translate(-50%,-50%) rotate(45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:before{transform:translate(-50%,-50%) rotate(-45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover{transform:scale(1.2)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover:after,.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover:before{background:#333}@keyframes dialogShow-58a65feb{0%{margin-top:-50px;opacity:0}to{margin-top:0;opacity:1}}.image-cropper .tool-box[data-v-58a65feb]{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-58a65feb]{position:absolute;top:50%;left:50%;z-index:101;transform:translate(-50%,-50%)}.image-cropper .canvas[data-v-58a65feb]{position:absolute;top:0;left:0;z-index:98}.image-cropper .canvas-select-box[data-v-58a65feb]{position:absolute;top:0;left:0;z-index:99}@keyframes zi-antBorder-58a65feb{0%{background-position:0px 0px}50%{background-position:0px 5px}to{background-position:0px 10px}}.image-cropper .tool-box-control[data-v-58a65feb]{background:rgba(255,255,255,0);position:absolute;z-index:101;box-sizing:border-box}.image-cropper .tool-box-control-box[data-v-58a65feb]{width:100%;height:100%;position:relative;background:transparent;z-index:103;pointer-events:none}.image-cropper .tool-box-control .control-box[data-v-58a65feb]{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-58a65feb]{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-58a65feb .8s linear 0s infinite normal;-moz-animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;-webkit-animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line-top[data-v-58a65feb]{height:1px;width:100%;top:-1px}.image-cropper .tool-box-control .control-box-inner-line-bottom[data-v-58a65feb]{height:1px;width:100%;bottom:-1px}.image-cropper .tool-box-control .control-box-inner-line-right[data-v-58a65feb]{height:100%;width:1px;right:-1px;top:0}.image-cropper .tool-box-control .control-box-inner-line-left[data-v-58a65feb]{height:100%;width:1px;left:-1px;top:0}.image-cropper .tool-box-control .select-area[data-v-58a65feb]{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-58a65feb]{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-58a65feb]:nth-child(2){top:33%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(3){top:66%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(4){left:33%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(5){left:66%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control .control-btn[data-v-58a65feb]{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-58a65feb]{top:0;left:0;margin-left:-3px;margin-top:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.left-down[data-v-58a65feb]{bottom:0;left:0;margin-left:-3px;margin-bottom:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-up[data-v-58a65feb]{top:0;right:0;margin-right:-3px;margin-top:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-down[data-v-58a65feb]{bottom:0;right:0;margin-right:-3px;margin-bottom:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.top-center[data-v-58a65feb]{top:0;right:50%;margin-right:-3px;margin-top:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.down-center[data-v-58a65feb]{bottom:0;right:50%;margin-right:-3px;margin-bottom:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.left-center[data-v-58a65feb]{top:50%;left:0;margin-left:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .tool-box-control .control-btn.right-center[data-v-58a65feb]{top:50%;right:0;margin-right:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .btn[data-v-58a65feb]{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-58a65feb]{opacity:.6}.image-cropper .btn[disabled][data-v-58a65feb]:hover{opacity:.6;color:#333!important;border-color:#dedede!important;background-color:#fff!important}.image-cropper .btn.btn-default[data-v-58a65feb]{color:#333;border-color:#dcdfe6;background-color:#fff;transition:background .3s,color .3s}.image-cropper .btn.btn-default[data-v-58a65feb]: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-58a65feb]{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-58a65feb]: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-58a65feb]{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-58a65feb]: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-58a65feb]{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-58a65feb]: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-58a65feb]{height:26px;line-height:26px;padding:0 10px;font-size:12px}.image-cropper .file-input[data-v-58a65feb]{width:1px;height:1px;border:none;opacity:0}.image-cropper .dock-main[data-v-58a65feb]{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-58a65feb]:hover{opacity:1}.image-cropper .dock-main .dock-btn[data-v-58a65feb]{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-58a65feb]: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-58a65feb]{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-58a65feb]{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-58a65feb]{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 Lo, ref as R, reactive as Vo, computed as W, toRefs as Go, onMounted as Ko, nextTick as X, resolveComponent as Jo, openBlock as f, createElementBlock as p, renderSlot as I, createCommentVNode as x, toDisplayString as k, createVNode as io, Transition as bo, withCtx as lo, unref as v, normalizeClass as ro, createElementVNode as g, normalizeStyle as A, createTextVNode as H, withDirectives as so, vShow as ao, pushScopeId as Qo, popScopeId as Zo } from "vue";
const _o = "image-cropper-next", oe = "0.0.9", ee = "A Vue 3 image cropper component for Vite", te = "dist/index.js", ie = "dist/index.mjs", le = "dist/style.css", re = "module", se = "dist/types/index.d.ts", ae = [
"image-cropper-next",
"image-cropper",
"vue3",
"typescript",
"vite",
"vue",
"cropper",
"wisdoms",
"marvin"
], ne = {
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"
}, de = {
access: "public",
registry: "https://registry.npmjs.org/"
}, ge = {
type: "git",
url: "https://github.com/yi-boide/vue-image-cropper.git",
directory: "packages/ImageCropper"
}, ce = {
url: "https://github.com/yi-boide/vue-image-cropper/issues"
}, me = "MIT", ue = [
"dist",
"package.json",
"README.md"
], he = {
name: "Marvin",
email: "454846659@qq.com"
}, fe = {
"fs-extra": "^11.1.1",
"markdown-it": "^13.0.2",
vue: "^3.3.4"
}, pe = {
"@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"
}, xe = {
name: _o,
private: !1,
version: oe,
description: ee,
main: te,
module: ie,
style: le,
type: re,
typings: se,
"web-types": "dist/smartips/web-types.json",
keywords: ae,
scripts: ne,
publishConfig: de,
repository: ge,
bugs: ce,
license: me,
files: ue,
author: he,
dependencies: fe,
devDependencies: pe
}, we = {
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
}
}, q = (M) => (Qo("data-v-58a65feb"), M = M(), Zo(), M), Be = { class: "image-cropper" }, ve = { class: "tool-main" }, ye = {
key: 0,
class: "tool-title"
}, be = { class: "tips" }, Ie = {
key: 0,
class: "dock-btn"
}, Ce = {
key: 4,
class: "dock-btn-scroll-bar"
}, Me = { class: "tool-box-control-box" }, Te = { class: "control-box" }, ke = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-top" }, null, -1)), He = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-bottom" }, null, -1)), qe = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-left" }, null, -1)), Se = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "control-box-inner-line control-box-inner-line-right" }, null, -1)), Re = { class: "select-area" }, Fe = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), Ne = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), Oe = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), $e = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { class: "tool-box-control-line" }, null, -1)), We = ["width", "height"], Ae = ["width", "height"], De = {
key: 0,
class: "i-dialog-footer"
}, Ye = {
key: 0,
class: "btn btn-primary btn-primary-plain"
}, ze = { class: "btn-group" }, Ue = /* @__PURE__ */ q(() => /* @__PURE__ */ g("button", {
type: "button",
class: "btn btn-default"
}, "取消", -1)), je = ["disabled"], Xe = /* @__PURE__ */ q(() => /* @__PURE__ */ g("div", { style: { clear: "both" } }, null, -1)), Ee = /* @__PURE__ */ Lo({
name: "ImageCropper",
__name: "index",
props: we,
emits: ["realTime", "error", "clearAll", "confirm"],
setup(M, { expose: E, emit: C }) {
const r = M, z = {
img: void 0,
sx: 0,
sy: 0,
swidth: 0,
sheight: 0,
x: 0,
y: 0,
width: 0,
height: 0
}, F = R(), no = R(), go = R(), U = R(), P = R(), L = R(), V = R(), Co = R(), o = Vo({
visible: !1,
fileName: "",
cutImageObj: null,
printImageTimmer: null,
toolBoxPosition: {
x: 0,
y: 0
},
drawImg: { ...z },
toolBox: {
disable: !0,
width: r.boxWidth / 2,
height: r.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 } = o, { fileType: t } = r, i = e.lastIndexOf(".");
return e.substr(0, i + 1) + (t === "jpeg" ? "jpg" : t);
}), Mo = W(() => {
let e;
return r.originalGraph ? e = o.toolBox.width / (o.drawImg.width / o.drawImg.swidth) : e = o.toolBox.width, Number(e).toFixed(0);
}), To = W(() => {
let e;
return r.originalGraph ? e = o.toolBox.height / (o.drawImg.width / o.drawImg.swidth) : e = o.toolBox.height, Number(e).toFixed(0);
}), ko = W(() => {
let e;
return e = o.toolBoxPosition.x, Number(e).toFixed(0);
}), Ho = W(() => {
let e;
return e = o.toolBoxPosition.y, Number(e).toFixed(0);
}), b = W(() => {
let e = 1;
if (r.rate) {
const t = r.rate.split(":");
e = Number(t[0]) / Number(t[1]);
}
return e;
}), { visible: co, drawImg: N, toolBox: Y, dropImg: qo, rotateImg: So, rotateControl: G, controlBox: Ro } = Go(o), K = (e) => {
const t = (i) => {
var l;
if (F.value && (F.value.onmousewheel = j, (l = F.value) == null || l.addEventListener("DOMMouseScroll", j)), r.isModal) {
r.lockScroll && (document.body.style.overflowY = "hidden");
const s = no.value.offsetHeight + 200, n = window.innerHeight;
let a = go.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();
r.crossOrigin && (i.crossOrigin = r.crossOriginHeader), i.name = e.name, i.setAttribute("name", e.name), i.style.position = "fixed", i.style.top = "-5000px", i.style.opacity = "0", i.onerror = (l) => {
console.error("图片加载失败"), C("error", {
event: l,
msg: "图片加载失败"
}), ho();
}, i.onload = () => {
if (i.complete)
o.visible = !0, X(() => {
t(() => {
Fo(i);
});
});
else
throw new Error("图片加载失败");
}, i.src = e.src, o.cutImageObj = i, document.body.appendChild(i);
} else
o.visible = !0, X(() => {
t();
});
}, $ = () => {
$o(), r.isModal && (r.lockScroll && (document.body.style.overflowY = "scroll"), X(() => {
o.visible = !1;
}));
}, J = () => {
var e;
(e = V.value) == null || e.click();
}, Fo = (e) => {
const t = e.height, i = e.width, { boxWidth: l, boxHeight: s } = r;
let n, a = { ...o.drawImg };
o.fileName = e.name, a.img = e, o.scaleImg.rate = i / t, t < s && i < l ? (n = 1, a.x = (l - i) / 2, a.y = (s - t) / 2) : i / t <= l / s ? (n = s / t, a.x = (l - i * n) / 2) : (n = l / i, a.y = (s - t * n) / 2), a.swidth = i, a.sheight = t, a.width = i * n, a.height = t * n, a.x = (l - a.width) / 2, a.y = (s - a.height) / 2, o.drawImg = a, T(), mo();
}, No = (e) => {
const t = e.target;
let i;
if (t != null && t.files)
i = t.files[0] || null;
else
return console.error("IE9及以下需要自己传入image对象"), !1;
if (i) {
o.fileName = i.name;
const l = new FileReader();
l.readAsDataURL(i), l.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 (l.readyState === 2) {
if (clearInterval(c), !r.sizeChange && r.smallToUpload && a.width <= r.cutWidth && a.height <= r.cutHeight) {
r.isFinishClose && $(), C("confirm", {
fileName: D.value,
file: i
});
return;
}
const m = a.height, d = a.width, { boxWidth: B, boxHeight: w } = r;
let y, h = { ...o.drawImg };
h.img = a, o.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, o.drawImg = h, T(), mo();
}
}, 200);
};
}
}, mo = () => {
(o.toolBox.width === r.boxWidth / 2 || o.toolBox.height === r.boxHeight / 2 || r.saveCutPosition === !1) && (o.toolBox.width = r.cutWidth > r.boxWidth ? r.boxWidth : r.cutWidth, o.toolBox.height = r.cutHeight > r.boxHeight ? r.boxHeight : r.cutHeight), (o.toolBox.x === 0 && o.toolBox.y === 0 || r.saveCutPosition === !1) && (o.toolBox.x = r.boxWidth / 2 - o.toolBox.width / 2, o.toolBox.y = r.boxHeight / 2 - o.toolBox.height / 2), fo().then(() => {
T();
}), Q(o.toolBox.width, o.toolBox.height, o.toolBox.x, o.toolBox.y);
}, Oo = () => !!(window.File && window.FileList && window.FileReader && window.Blob && navigator.userAgent.indexOf("Edge") === -1 && navigator.userAgent.indexOf("MSIE") === -1 && navigator.userAgent.indexOf("Trident") === -1), uo = (e, t) => {
let i = e.split(","), l = i[0].match(/:(.*?);/)[1], s = atob(i[1]), n = s.length, a = new Uint8Array(n);
for (; n--; )
a[n] = s.charCodeAt(n);
if (Oo())
return new File([a], t, { type: l });
throw "不支持File对象";
}, $o = () => {
const e = U.value;
e.getContext("2d").clearRect(0, 0, e.width, e.height);
const i = P.value;
i.getContext("2d").clearRect(0, 0, i.width, i.height);
const { sx: s, sy: n } = o.drawImg;
o.drawImg = { ...z, sx: s, sy: n }, o.isFlipHorizontal = !1, o.isFlipVertically = !1, V.value.value = "", o.rotateImg.angle = 0, to(), ho(), C("clearAll");
}, ho = () => {
o.cutImageObj !== null && o.cutImageObj !== void 0 && typeof o.cutImageObj.remove == "function" && o.cutImageObj.remove(), o.cutImageObj = null;
}, Q = (e, t, i, l) => {
const { boxWidth: s, boxHeight: n } = r, { width: a, height: c, x: u, y: m } = o.drawImg;
r.toolBoxOverflow || (e < 1 && (e = 1), t < 1 && (t = 1), e > a && (e = a), t > c && (t = c), i < o.drawImg.x && (i = o.drawImg.x), l < m && (l = m), i > u + a - e && (i = u + a - e), l > m + c - t && (l = m + c - t)), e > s && (e = s), t > n && (t = n), i < 0 && (i = 0), l < 0 && (l = 0);
const d = L.value, B = P.value, w = B.getContext("2d");
w.fillStyle = o.selectBoxColor, w.clearRect(0, 0, B.width, B.height), w.fillRect(0, 0, B.width, B.height);
let y, h;
r.rate && r.rate !== "" ? b.value >= 1 ? (y = e, h = e / b.value, h + l > m + c && (h = m + c - l, y = h * b.value)) : (y = t * b.value, h = t) : (y = e, h = t), o.toolBox.width = Math.abs(y), o.toolBox.height = Math.abs(h), d.style.width = Math.abs(y) + "px", d.style.height = Math.abs(h) + "px", o.toolBox.boxMove.moveTo.x = i, o.toolBox.boxMove.moveTo.y = l, y < 0 && (i = i + y), h < 0 && (l = l + h), i + o.toolBox.width > s && (i = s - o.toolBox.width), i < 0 && (i = 0), l + o.toolBox.height > n && (l = n - o.toolBox.height), l < 0 && (l = 0), o.toolBoxPosition.x = i, o.toolBoxPosition.y = l, d.style.left = i + "px", d.style.top = l + "px", w.clearRect(i, l, Math.abs(y), Math.abs(h)), o.printImageTimmer && clearTimeout(o.printImageTimmer), o.printImageTimmer = setTimeout(() => {
O(!0);
}, 100);
}, fo = () => new Promise((e) => {
if (!r.toolBoxOverflow) {
const { width: t, height: i, x: l, y: s } = o.toolBox, { width: n, height: a, x: c, y: u } = o.drawImg;
if (n < t || a < i) {
const m = n / a;
n < t && (o.drawImg.width = t, o.drawImg.height = t / m), o.drawImg.height < i && (o.drawImg.height = i, o.drawImg.width = a * m), o.drawImg.x = (r.boxWidth - n) / 2, o.drawImg.y = (r.boxHeight - a) / 2;
}
console.log("state.drawImg.y > state.toolBox.y", u + a, s + i), c > l && (o.drawImg.x = l), c + n < l + t && (o.drawImg.x = l + t - n), u > s && (o.drawImg.y = s), u + a < s + i && (o.drawImg.y = s + i - a);
}
e();
}), j = (e) => {
if (o.drawImg.img && r.scaleAble) {
let t = 1;
const i = e || window.event;
i.deltaY ? t = -(i.deltaY / 40) : i.detail && (t = i.detail);
const { width: l, x: s, y: n } = o.drawImg;
let a = 50;
o.drawImg.x = o.drawImg.width - t * 9 > a ? s + t * 3 : s, o.drawImg.y = o.drawImg.width - t * 9 > a ? n + t * 3 : n, o.drawImg.width = o.drawImg.width - t * 9 > a ? l - t * 9 : a, o.drawImg.height = l / o.scaleImg.rate, fo().then(() => {
T(), o.printImageTimmer && clearTimeout(o.printImageTimmer), o.printImageTimmer = setTimeout(() => {
O(!0);
}, 100);
});
}
return e.preventDefault(), !1;
}, Z = () => {
const { width: e, height: t, x: i, y: l } = o.toolBox;
e < 0 && (o.toolBox.boxMove.moveTo.x = i - e), o.toolBox.height < 0 && (o.toolBox.boxMove.moveTo.y = l - t), o.toolBox.width = Math.abs(e), o.toolBox.height = Math.abs(t);
}, Wo = (e) => {
const t = L.value;
o.toolBox.x = parseInt(t.style.left.split("px")[0]), o.toolBox.y = parseInt(t.style.top.split("px")[0]), o.toolBox.disable = !1, o.dropImg.active = !1, o.toolBox.boxMove.start = {
x: e.pageX,
y: e.pageY
};
}, Ao = (e) => {
if (o.dropImg.active && xo(e), !o.toolBox.disable && r.moveAble) {
const t = e.pageX - o.toolBox.boxMove.start.x, i = e.pageY - o.toolBox.boxMove.start.y, l = o.toolBox.x + t, s = o.toolBox.y + i;
Q(o.toolBox.width, o.toolBox.height, l, s);
}
}, Do = () => {
o.toolBox.disable = !0, o.printImageTimmer && clearTimeout(o.printImageTimmer), o.printImageTimmer = setTimeout(() => {
O(!0);
}, 100), Z();
}, po = () => {
const { x: e, y: t } = o.toolBoxPosition;
o.toolBox.x = e, o.toolBox.y = t, o.toolBox.disable = !0, o.dropImg.active = !1, Z();
}, T = () => {
if (o.drawImg.img) {
const e = U.value, t = e.getContext("2d");
t.font = "18px bold 黑体", t.fillStyle = "#ff0", t.textAlign = "center", t.textBaseline = "middle", t.save(), t.clearRect(0, 0, e.width, e.height), t.translate(o.drawImg.x + o.drawImg.width / 2, o.drawImg.y + o.drawImg.height / 2), t.rotate(o.rotateImg.angle * Math.PI / 180), t.translate(-(o.drawImg.x + o.drawImg.width / 2), -(o.drawImg.y + o.drawImg.height / 2)), t.translate(o.drawImg.x, o.drawImg.y), t.scale(o.isFlipHorizontal ? -1 : 1, o.isFlipVertically ? -1 : 1), t.drawImage(
o.drawImg.img,
o.drawImg.sx,
o.drawImg.sy,
o.drawImg.swidth,
o.drawImg.sheight,
o.isFlipHorizontal ? -o.drawImg.width : 0,
o.isFlipVertically ? -o.drawImg.height : 0,
o.drawImg.width,
o.drawImg.height
), t.translate(-o.drawImg.x, o.drawImg.y), t.restore(), o.printImageTimmer && clearTimeout(o.printImageTimmer), o.printImageTimmer = setTimeout(() => {
O(!0);
}, 100);
}
}, Yo = (e) => {
r.imgMove && (o.dropImg.active = !0, o.dropImg.params = { ...o.drawImg }, o.dropImg.pageX = e.pageX, o.dropImg.pageY = e.pageY);
}, _ = () => {
o.dropImg.active = !1, o.printImageTimmer && clearTimeout(o.printImageTimmer), o.printImageTimmer = setTimeout(() => {
O(!0);
}, 100);
}, xo = (e) => {
if (o.dropImg.active && o.drawImg.img) {
let t = { ...o.drawImg };
t.x = o.dropImg.params.x - (o.dropImg.pageX - e.pageX), t.y = o.dropImg.params.y - (o.dropImg.pageY - e.pageY), r.toolBoxOverflow || (t.x > o.toolBox.x && (t.x = o.toolBox.x), t.x < o.toolBox.x + o.toolBox.width - t.width && (t.x = o.toolBox.x + o.toolBox.width - t.width), t.y > o.toolBox.y && (t.y = o.toolBox.y), t.y < o.toolBox.y + o.toolBox.height - t.height && (t.y = o.toolBox.y + o.toolBox.height - t.height)), o.drawImg = t, T(), e.stopPropagation();
}
}, wo = () => {
o.drawImg.width = o.drawImg.swidth, o.drawImg.height = o.drawImg.sheight, T();
}, oo = (e = "horizontal") => {
o.drawImg.img && (e === "horizontal" ? o.isFlipHorizontal = !o.isFlipHorizontal : o.isFlipVertically = !o.isFlipVertically, T());
}, eo = (e) => {
const i = o.rotateImg.angle + e;
i >= -180 && i <= 180 && (o.rotateImg.angle = i, o.rotateControl.position = i / 180 * 100 + 100, T());
}, to = () => {
o.rotateImg.angle = 0, o.rotateControl.position = 100, T();
}, S = (e, t) => {
o.controlBox.disable = !1, o.controlBox.btnName = t, o.controlBox.start.x = e.clientX, o.controlBox.start.y = e.clientY, o.controlBox.start.width = o.toolBox.width, o.controlBox.start.height = o.toolBox.height, e.stopPropagation();
}, Bo = (e) => {
o.controlBox.disable = !0, _(), Z(), po(), e.stopPropagation();
}, zo = (e) => {
if (o.controlBox.disable === !1) {
const t = e.clientX - o.controlBox.start.x, i = e.clientY - o.controlBox.start.y;
let l = 0, s = 0;
o.controlBox.btnName == "leftUp" && (r.rate ? b.value >= 1 ? (l = o.toolBox.x + t, s = o.toolBox.y + t / b.value) : (l = o.toolBox.x + i * b.value, s = o.toolBox.y + i) : (l = o.toolBox.x + t, s = o.toolBox.y + i), o.toolBox.width = o.controlBox.start.width - t, o.toolBox.height = o.controlBox.start.height - i), o.controlBox.btnName == "rightUp" && (r.rate && b.value >= 1 ? (l = o.toolBox.x, s = o.toolBox.y - t / b.value) : (l = o.toolBox.x, s = o.toolBox.y + i), o.toolBox.width = o.controlBox.start.width + t, o.toolBox.height = o.controlBox.start.height - i), o.controlBox.btnName == "rightDown" && (l = o.toolBox.x, s = o.toolBox.y, o.toolBox.width = o.controlBox.start.width + t, o.toolBox.height = o.controlBox.start.height + i), o.controlBox.btnName == "leftDown" && (r.rate ? b.value >= 1 ? (l = o.toolBox.x + t, s = o.toolBox.y) : (l = o.toolBox.x + -i * b.value, s = o.toolBox.y) : (l = o.toolBox.x + t, s = o.toolBox.y), o.toolBox.width = o.controlBox.start.width - t, o.toolBox.height = o.controlBox.start.height + i), o.controlBox.btnName == "topCenter" && (l = o.toolBox.x, s = o.toolBox.y + i, o.toolBox.width = o.controlBox.start.width, o.toolBox.height = o.controlBox.start.height - i), o.controlBox.btnName == "downCenter" && (l = o.toolBox.x, s = o.toolBox.y, o.toolBox.width = o.controlBox.start.width, o.toolBox.height = o.controlBox.start.height + i), o.controlBox.btnName == "leftCenter" && (l = o.toolBox.x + t, s = o.toolBox.y, o.toolBox.width = o.controlBox.start.width - t, o.toolBox.height = o.controlBox.start.height), o.controlBox.btnName == "rightCenter" && (l = o.toolBox.x, s = o.toolBox.y, o.toolBox.width = o.controlBox.start.width + t, o.toolBox.height = o.controlBox.start.height), Q(o.toolBox.width, o.toolBox.height, l, s);
}
e.stopPropagation();
}, vo = (e) => e.toDataURL(`image/${r.fileType}`, r.quality), Uo = (e) => {
HTMLCanvasElement.prototype.toBlob || Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
value: (t, i, l) => {
window.atob ? setTimeout(() => {
const s = atob(e.toDataURL(i, l).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/${r.fileType}`
}), t(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/${r.fileType}`), t(c);
}
u.name == "InvalidStateError" && (c = new Blob([a.buffer], { type: `image/${r.fileType}` }), t(c));
}
}, 200) : t(!1, {
type: `image/${r.fileType}`
});
}
});
}, O = (e, t) => {
if (o.drawImg.img) {
const i = U.value;
if (r.watermarkText && !e) {
const s = i.getContext("2d");
s.font = r.watermarkTextFont, s.fillStyle = r.watermarkTextColor, s.textAlign = "right", s.textBaseline = "bottom", s.fillText(
r.watermarkText,
o.toolBox.x + o.toolBox.width * r.watermarkTextX,
o.toolBox.y + o.toolBox.height * r.watermarkTextY
);
}
const l = new Image();
r.crossOrigin && (l.crossOrigin = r.crossOriginHeader), l.src = i.toDataURL(`image/${r.fileType}`, r.quality), Uo(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 (r.originalGraph == !0) {
const d = o.drawImg.width / o.drawImg.swidth, B = o.toolBox.width / d, w = o.toolBox.height / d;
u.width = B, u.height = w;
const y = (o.toolBox.x - o.drawImg.x) / d, h = (o.toolBox.y - o.drawImg.y) / d, Eo = o.drawImg.swidth, Po = o.drawImg.sheight;
m.translate(-y, -h), m.drawImage(o.drawImg.img, 0, 0, Eo, Po);
} else {
u.width = o.toolBox.width, u.height = o.toolBox.height;
const d = o.toolBox, [B = 1, w = 1] = ((c = r.rate) == null ? void 0 : c.split(":")) || [];
m.drawImage(
l,
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 = vo(u), w = {
fileName: D.value,
blob: d,
file: uo(B, D.value),
dataURL: B
};
e ? r.previewMode && (C("realTime", w), t && t(w)) : (r.isFinishClose && $(), C("confirm", w), t && t(w));
},
`image/${r.fileType}`,
r.quality
);
}
}, 200);
};
} else {
const n = document.createElement("canvas");
n.width = o.toolBox.width, n.height = o.toolBox.height;
const a = n.getContext("2d"), c = o.toolBox;
a.drawImage(
l,
c.x,
c.y,
c.width,
c.width * b.value,
0,
0,
c.width,
c.width * b.value
);
const u = vo(n), m = {
fileName: D.value,
file: uo(u, D.value),
dataURL: u
};
e ? (C("realTime", m), t && t(m)) : (r.isFinishClose && $(), C("confirm", m), t && t(m));
}
});
} else
e || (console.warn("No picture selected"), C("error", {
err: 1,
msg: "没有选中图片"
}));
}, jo = (e) => {
if (o.rotateControl.active) {
const t = e.pageX - o.rotateControl.start.x;
let i = o.rotateControl.start.position + t;
i <= 0 && (i = 0), i >= 200 && (i = 200), o.rotateControl.position = i, o.rotateImg.angle = (i - 100) / 100 * 180, T();
}
}, Xo = (e) => {
o.rotateControl.active = !0, o.rotateControl.start.x = e.pageX, o.rotateControl.start.y = e.pageY, o.rotateControl.start.position = o.rotateControl.position;
}, yo = () => {
o.rotateControl.active = !1;
};
return Ko(() => {
r.isModal === !1 && (o.visible = !0, X(() => {
var e;
F.value && (F.value.onmousewheel = j, (e = F.value) == null || e.addEventListener("DOMMouseScroll", j));
}));
}), E({
open: K,
close: $,
chooseImage: J,
flipDirection: oo,
resetScale: wo,
rotate: eo,
resetRotate: to,
cropImage: O
}), (e, t) => {
const i = Jo("solt");
return f(), p("div", Be, [
e.showChooseBtn && e.isModal ? (f(), p("div", {
key: 0,
onClick: t[0] || (t[0] = (l) => K())
}, [
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: t[1] || (t[1] = (l) => K())
}, k(e.label), 1)) : x("", !0),
io(bo, { name: "fade" }, {
default: lo(() => [
v(co) ? (f(), p("div", {
key: 0,
class: ro(e.isModal ? "mask" : ""),
ref_key: "maskRef",
ref: go
}, [
v(co) ? (f(), p("div", {
key: 0,
class: ro(e.isModal ? "dialog-box-modal" : "dialog-box")
}, [
io(bo, {
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: lo(() => [
g("div", {
ref_key: "dialogMainModalRef",
ref: no,
class: ro(e.isModal ? "dialog-main-modal" : "dialog-main"),
style: A("width:" + (e.isModal ? e.boxWidth + 32 : e.boxWidth) + "px")
}, [
g("div", ve, [
e.isModal ? (f(), p("div", ye, [
io(i, { name: "title" }, {
default: lo(() => [
H(" 图片裁剪 "),
g("span", {
class: "close-icon",
onClick: $
})
]),
_: 1
})
])) : x("", !0),
g("div", {
ref_key: "toolBoxRef",
ref: F,
style: A("height:" + e.boxHeight + "px;width:" + e.boxWidth + "px"),
onMousemove: zo,
onMouseup: Bo,
onMouseleave: Bo,
class: "tool-box"
}, [
so(g("div", be, [
g("div", {
class: "btn btn-warning btn-xs",
onClick: J
}, k(e.label), 1)
], 512), [
[ao, !v(N).img && e.showChooseBtn]
]),
e.tool == !0 ? so((f(), p("div", {
key: 0,
class: "dock-main",
style: A("background:" + e.toolBg),
onMouseenter: _
}, [
e.rate ? (f(), p("div", Ie, [
I(e.$slots, "ratio", {}, () => [
H(" Ratio: ")
], !0),
H(" " + k(e.rate), 1)
])) : x("", !0),
g("div", {
class: "dock-btn",
onClick: wo
}, [
I(e.$slots, "scale", {}, () => [
H(" Scale: ")
], !0),
H(" " + k(v(N).swidth > 0 ? (v(N).width / v(N).swidth).toFixed(2) : "-"), 1)
]),
e.originalGraph === !1 ? (f(), p("div", {
key: 1,
onClick: t[2] || (t[2] = (l) => eo(-90)),
class: "dock-btn"
}, [
I(e.$slots, "rotateLeft", {}, () => [
H(" ↳ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 2,
onClick: t[3] || (t[3] = (l) => eo(90)),
class: "dock-btn"
}, [
I(e.$slots, "rotateRight", {}, () => [
H(" ↲ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 3,
onClick: t[4] || (t[4] = (l) => to()),
class: "dock-btn"
}, [
I(e.$slots, "resetRotate", {}, () => [
H(" ↻ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", Ce, [
g("div", {
ref_key: "dockBtnScrollControlRef",
ref: Co,
onMousemove: jo,
onMousedown: Xo,
onMouseleave: yo,
onMouseup: yo,
style: A("left:" + v(G).position + "px"),
class: "scroll-bar-control"
}, null, 36),
v(G).active == !0 ? (f(), p("div", {
key: 0,
class: "scroll-bar-text",
style: A("left:" + v(G).position + "px")
}, k(v(So).angle.toFixed(0) + "°"), 5)) : x("", !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 5,
onClick: t[5] || (t[5] = (l) => oo()),
class: "dock-btn"
}, [
I(e.$slots, "flipHorizontal", {}, () => [
H(" ⇆ ")
], !0)
])) : x("", !0),
e.originalGraph === !1 ? (f(), p("div", {
key: 6,
onClick: t[6] || (t[6] = (l) => oo("vertically")),
class: "dock-btn"
}, [
I(e.$slots, "flipVertically", {}, () => [
H(" ⇅ ")
], !0)
])) : x("", !0)
], 36)), [
[
ao,
v(N).img && v(qo).active !== !0 && v(Ro).disable == !0 && v(Y).disable == !0
]
]) : x("", !0),
so(g("div", {
ref_key: "toolBoxControlRef",
ref: L,
onMousedown: Wo,
onMouseup: po,
onMousemove: Ao,
onMouseleave: Do,
class: "tool-box-control",
style: A({
pointerEvents: e.moveAble ? "auto" : "none"
})
}, [
g("div", Me, [
g("div", Te, [
ke,
He,
qe,
Se,
g("div", Re, " 宽:" + k(Mo.value) + " 高:" + k(To.value) + " (x:" + k(ko.value) + ",y:" + k(Ho.value) + ") ", 1),
e.sizeChange ? (f(), p("div", {
key: 0,
"data-name": "leftUp",
onMousedown: t[7] || (t[7] = (l) => S(l, "leftUp")),
class: "left-up control-btn"
}, null, 32)) : x("", !0),
e.sizeChange ? (f(), p("div", {
key: 1,
"data-name": "leftDown",
onMousedown: t[8] || (t[8] = (l) => S(l, "leftDown")),
class: "left-down control-btn"
}, null, 32)) : x("", !0),
e.sizeChange ? (f(), p("div", {
key: 2,
"data-name": "rightUp",
onMousedown: t[9] || (t[9] = (l) => S(l, "rightUp")),
class: "right-up control-btn"
}, null, 32)) : x("", !0),
e.sizeChange ? (f(), p("div", {
key: 3,
"data-name": "rightDown",
onMousedown: t[10] || (t[10] = (l) => S(l, "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: t[11] || (t[11] = (l) => S(l, "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: t[12] || (t[12] = (l) => S(l, "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: t[13] || (t[13] = (l) => S(l, "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: t[14] || (t[14] = (l) => S(l, "rightCenter")),
class: "right-center control-btn"
}, null, 32)) : x("", !0)
]),
Fe,
Ne,
Oe,
$e
])
], 36), [
[ao, v(N).img]
]),
g("canvas", {
class: "canvas-select-box",
ref_key: "canvasSelectBoxRef",
ref: P,
width: e.boxWidth,
onMousedown: Yo,
onMouseup: _,
onMousemove: xo,
height: e.boxHeight
}, null, 40, We),
g("canvas", {
class: "canvas",
ref_key: "canvasRef",
ref: U,
width: e.boxWidth,
height: e.boxHeight
}, null, 8, Ae)
], 36)
]),
I(e.$slots, "footer", {}, () => [
e.footer ? (f(), p("div", De, [
g("input", {
class: "file-input",
onChange: No,
ref_key: "inputFileRef",
ref: V,
type: "file",
accept: "image/*"
}, null, 544),
g("div", {
class: "choose",
onClick: J
}, [
I(e.$slots, "choose", {}, () => [
e.showChooseBtn ? (f(), p("div", Ye, k(e.label), 1)) : x("", !0)
], !0)
]),
g("div", ze, [
g("div", { onClick: $ }, [
I(e.$slots, "cancel", {}, () => [
Ue
], !0)
]),
g("div", {
onClick: t[15] || (t[15] = (l) => O(!1))
}, [
I(e.$slots, "confirm", {}, () => [
g("button", {
type: "button",
class: "btn btn-primary",
style: { "margin-left": "15px" },
disabled: !v(N).img
}, " 确定 ", 8, je)
], !0)
])
])
])) : x("", !0)
], !0)
], 6)
]),
_: 3
}),
Xe
], 2)) : x("", !0)
], 2)) : x("", !0)
]),
_: 3
})
]);
};
}
});
const Pe = (M, E) => {
const C = M.__vccOpts || M;
for (const [r, z] of E)
C[r] = z;
return C;
}, Io = /* @__PURE__ */ Pe(Ee, [["__scopeId", "data-v-58a65feb"]]), Le = xe.version, Ve = (M) => {
M.component(Io.name, Io);
}, Ke = { install: Ve, version: Le };
export {
Io as ImageCropper,
Ke as default,
we as imageCropperProps,
Le as version
};