{"version":3,"sources":["webpack:///D:/meloinfo/sugarpark-mini-program/components/invinbg-image-cropper/invinbg-image-cropper.vue?b9b3","webpack:///D:/meloinfo/sugarpark-mini-program/components/invinbg-image-cropper/invinbg-image-cropper.vue?80ad","webpack:///D:/meloinfo/sugarpark-mini-program/components/invinbg-image-cropper/invinbg-image-cropper.vue?b8d4","webpack:///D:/meloinfo/sugarpark-mini-program/components/invinbg-image-cropper/invinbg-image-cropper.vue?4c83","uni-app:///components/invinbg-image-cropper/invinbg-image-cropper.vue","webpack:///D:/meloinfo/sugarpark-mini-program/components/invinbg-image-cropper/invinbg-image-cropper.vue?3dc0","webpack:///D:/meloinfo/sugarpark-mini-program/components/invinbg-image-cropper/invinbg-image-cropper.vue?5d36"],"names":[],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA8I;AAC9I;AACyE;AACL;AACqC;;;AAGzG;AACmK;AACnK,gBAAgB,6KAAU;AAC1B,EAAE,2FAAM;AACR,EAAE,4GAAM;AACR,EAAE,qHAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,gHAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACvBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACRA;AAAA;AAAA;AAAA;AAAknB,CAAgB,+nBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACmDtoB;AACA,uBADA;AAEA;AACA;AACA,kBADA;AAEA,kBAFA,EADA;;AAKA;AACA,kBADA;AAEA,kBAFA,EALA;;AASA;AACA,mBADA;AAEA,oBAFA,EATA;;AAaA;AACA,kBADA,EAbA;;AAgBA;AACA,mBADA;AAEA,mBAFA,EAhBA;;AAoBA;AACA,mBADA;AAEA,mBAFA,EApBA,EAFA;;;AA2BA,MA3BA,kBA2BA;AACA;AACA;AACA;AACA,iBADA;AAEA,cAFA;AAGA,eAHA;AAIA,cAJA;AAKA,cALA;AAMA,iBANA;AAOA,iBAPA;AAQA,sBARA;AASA,4BATA;AAUA,uBAVA;AAWA,wBAXA;AAYA,qBAZA;AAaA,qBAbA;AAcA,eAdA;AAeA,eAfA;AAgBA;AACA,eAjBA;AAkBA,UAlBA;AAmBA,UAnBA;AAoBA,eApBA;AAqBA,iBArBA;;AAuBA,GArDA;AAsDA;AACA,OADA,eACA,GADA,EACA;AACA;AACA;AACA;AACA,KALA;AAMA,QANA,gBAMA,GANA,EAMA;AACA;AACA;AACA;AACA,KAVA,EAtDA;;AAkEA;AACA,gBADA,0BACA;AACA;;;;AAIA;AACA,KAPA;AAQA;AACA,mBATA,6BASA;AACA;AACA,KAXA;AAYA;AACA,eAbA,yBAaA;AACA;AACA,KAfA;AAgBA,gBAhBA,0BAgBA;AACA;AACA,KAlBA;AAmBA;AACA,cApBA,wBAoBA;AACA;AACA;AACA;AACA;AACA,KAzBA;AA0BA;AACA,cA3BA,wBA2BA;AACA;AACA;AACA;AACA;AACA,KAhCA;AAiCA;AACA,eAlCA,yBAkCA;AACA;AACA;AACA;AACA;AACA,KAvCA,EAlEA;;AA2GA;AACA,iBADA,2BACA;AACA;AACA;AACA,OAFA,MAEA;AACA;AACA;AACA,KAPA;AAQA,QARA,kBAQA;AACA;AACA;AACA;AACA;AACA;AACA,yBADA;;AAGA;AACA;AACA,OAFA,EAEA,KAFA,CAEA;AACA;AACA;AACA,qBADA;AAEA,2BAFA;;AAIA,OARA;AASA,KAzBA;AA0BA,aA1BA,qBA0BA,GA1BA,EA0BA;AACA;AACA;AACA;AACA,kBADA;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAHA;AAIA;AACA,WAfA;AAgBA;AACA;AACA;AACA,WAnBA;;AAqBA,OAtBA;;AAwBA,KApDA;AAqDA,UArDA,oBAqDA;AACA;AACA;AACA,KAxDA;AAyDA,WAzDA,mBAyDA,KAzDA,EAyDA;AACA;AACA,uBADA;;AAGA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAhBA;;AAkBA;AACA;AACA;AACA,8BADA;AAEA,6CAFA;AAGA,8CAHA;AAIA;AACA;AACA;AACA;AACA;AACA,WATA;AAUA;AACA;AACA;AACA,yBADA;AAEA,6BAFA;;AAIA,WAhBA;AAiBA,aAjBA;AAkBA,OAnBA;;AAqBA,KArHA;AAsHA,iBAtHA,yBAsHA,CAtHA,EAsHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAFA;;;AAKA;AACA;AACA,8BADA;;AAGA,OAdA,MAcA;AACA;AACA;AACA;AACA,KAzIA;AA0IA,cA1IA,sBA0IA,CA1IA,EA0IA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,sBAFA;;;AAKA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,8BADA;AAEA,6BAHA;AAIA;AACA;;AAEA;AACA;AACA,SAFA,MAEA;AACA;AACA;;AAEA;AACA,OA/BA,MA+BA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAjLA;AAkLA,cAlLA,wBAkLA;AACA;AACA;AACA,OAFA,EAEA,GAFA;AAGA,KAtLA;AAuLA,cAvLA,sBAuLA,CAvLA,EAuLA;AACA;AACA;;AAEA;AACA;AACA,KA7LA;AA8LA,eA9LA,uBA8LA,CA9LA,EA8LA;AACA;AACA;;AAEA;AACA;AACA,KApMA;AAqMA,YArMA,oBAqMA,CArMA,EAqMA,IArMA,EAqMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBA9BA;;AAgCA,KA3OA;AA4OA,gBA5OA,wBA4OA,CA5OA,EA4OA;AACA;AACA;AACA;AACA,KAhPA;AAiPA,kBAjPA,0BAiPA,CAjPA,EAiPA;AACA;AACA;AACA;AACA;AACA,KAtPA;AAuPA,mBAvPA,2BAuPA,CAvPA,EAuPA;AACA;AACA;AACA;AACA;AACA,KA5PA;AA6PA,iBA7PA,yBA6PA,CA7PA,EA6PA;AACA;AACA;AACA;AACA,KAjQA;AAkQA,UAlQA,kBAkQA,CAlQA,EAkQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KA1QA;AA2QA,UA3QA,kBA2QA,CA3QA,EA2QA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAnRA,EA3GA,E;;;;;;;;;;;;;ACnDA;AAAA;AAAA;AAAA;AAA65B,CAAgB,44BAAG,EAAC,C;;;;;;;;;;;ACAj7B;AACA,OAAO,KAAU,EAAE,kBAKd","file":"components/invinbg-image-cropper/invinbg-image-cropper.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./invinbg-image-cropper.vue?vue&type=template&id=02b3d9d8&scoped=true&\"\nvar renderjs\nimport script from \"./invinbg-image-cropper.vue?vue&type=script&lang=js&\"\nexport * from \"./invinbg-image-cropper.vue?vue&type=script&lang=js&\"\nimport style0 from \"./invinbg-image-cropper.vue?vue&type=style&index=0&id=02b3d9d8&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"02b3d9d8\",\n  null,\n  false,\n  components,\n  renderjs\n)\n\ncomponent.options.__file = \"components/invinbg-image-cropper/invinbg-image-cropper.vue\"\nexport default component.exports","export * from \"-!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--16-0!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./invinbg-image-cropper.vue?vue&type=template&id=02b3d9d8&scoped=true&\"","var components\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./invinbg-image-cropper.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./invinbg-image-cropper.vue?vue&type=script&lang=js&\"","<template>\n    <view class=\"vue-cropper\" ref=\"cropper\" :style=\"{ top : `${containerTop}px` }\" v-show=\"show\">\n        <view class=\"cropper-box\">\n            <view class=\"cropper-box-canvas\" @touchstart.stop.prevent=\"imgTouchStart\" @touchmove.stop.prevent=\"imgMoveing\" @touchend.stop.prevent=\"imgMoveEnd\" :style=\"{\n\t\t\t\t\t'width': imageWidth + 'px',\n\t\t\t\t\t'height': imageHeight + 'px',\n\t\t\t\t\t'transform': 'scale(' + scale + ',' + scale + ') ' + 'translate3d('+ x / scale + 'px,' + y / scale + 'px,' + '0)'\n\t\t\t\t\t+ 'rotateZ('+ rotate * 90 +'deg)'\n\t\t\t\t\t}\">\n                <image :src=\"src\" alt=\"cropper-img\" ref=\"cropperImg\" mode=\"scaleToFill\" class=\"uni-image\"></image>\n            </view>\n        </view>\n        <view class=\"cropper-drag-box cropper-modal cropper-move pointer-events\"></view>\n        <view class=\"cropper-crop-box\" :class=\"{'pointer-events': cropFixed}\" :style=\"{'width': cropW + 'px','height': cropH + 'px','transform': 'translate3d('+ cropOffsertX + 'px,' + cropOffsertY + 'px,' + '0)'}\">\n            <view class=\"cropper-view-box\">\n                <image :style=\"{'width': imageWidth + 'px','height': imageHeight + 'px','transform': 'scale(' + scale + ',' + scale + ') ' + 'translate3d('+ (x - cropOffsertX) / scale  + 'px,' + (y - cropOffsertY) / scale + 'px,' + '0)' + 'rotateZ('+ rotate * 90 +'deg)'}\" mode=\"scaleToFill\" :src=\"src\" alt=\"cropper-img\"></image>\n            </view>\n\n            <view v-if=\"!cropFixed\" class=\"cropper-face cropper-move\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"cropMoveing\"></view>\n\n            <view class=\"crop-line line-w\"></view>\n            <view class=\"crop-line line-a\"></view>\n            <view class=\"crop-line line-s\"></view>\n            <view class=\"crop-line line-d\"></view>\n            <block v-if=\"!cropFixed\">\n                <view class=\"crop-point point-lt\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'left-top')\"></view>\n                <view class=\"crop-point point-mt\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'middle-top')\"></view>\n                <view class=\"crop-point point-rt\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'right-top')\"></view>\n                <view class=\"crop-point point-ml\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'middle-left')\"></view>\n                <view class=\"crop-point point-mr\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'middle-right')\"></view>\n                <view class=\"crop-point point-lb\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'left-bottom')\"></view>\n                <view class=\"crop-point point-mb\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'middle-bottom')\"></view>\n                <view class=\"crop-point point-rb\" @touchstart.stop.prevent=\"touchStart\" @touchmove.stop.prevent=\"dragMove($event, 'right-bottom')\"></view>\n            </block>\n        </view>\n\n        <canvas canvas-id=\"myCanvas\" class=\"cropper-canvas\" :style=\"{ 'width': cropW + 'px','height': cropH + 'px' }\"></canvas>\n\n        <view class=\"btn-group\">\n            <view class=\"btn-item rotate-btn\" v-show=\"showRotateBtn\" @tap=\"rotateHandler\"></view>\n        </view>\n\n        <view class=\"uni-info__ft\">\n            <view class=\"uni-modal__btn uni-modal__btn_default\" style=\"color: #9A9ABF;\" @tap=\"cancel\">取消</view>\n\t\t\t<view class=\"uni-modal__btn uni-modal__btn_default\" style=\"color: #9A9ABF;\" @tap=\"init\">还原</view>\n            <view class=\"uni-modal__btn uni-modal__btn_primary\" style=\"color: #FFFFFF;\" @tap=\"confirm\">下一步</view>\n        </view>\n    </view>\n</template>\n\n<script>\n    export default {\n        name: 'image-cropper',\n        props: {\n            cropWidth: {\n                type: Number,\n                default: 200,\n            },\n            cropHeight: {\n                type: Number,\n                default: 200\n            },\n            cropFixed: {\n                type: Boolean,\n                default: false,\n            },\n            src: {\n                type: String,\n            },\n            showResetBtn: {\n                type: Boolean,\n                default: true,\n            },\n            showRotateBtn: {\n                type: Boolean,\n                default: true,\n            }\n        },\n        data() {\n            const sysInfo = uni.getSystemInfoSync();\n            const pixelRatio = sysInfo.pixelRatio\n            return {\n                show: false,\n                scale: 1,\n                rotate: 0,\n                cropW: 0,\n                cropH: 0,\n                cropOldW: 0,\n                cropOldH: 0,\n                sysInfo: sysInfo,\n                pixelRatio: pixelRatio,\n                imageRealWidth: 0,\n                imageRealHeight: 0,\n                cropOffsertX: 0,\n                cropOffsertY: 0,\n                startX: 0,\n                startY: 0,\n                // 裁剪框与边界间距\n                border: 5,\n                x: 0,\n                y: 0,\n                startL: 0,\n                oldScale: 1,\n            }\n        },\n        watch: {\n            src(val) {\n                if(val.length > 0) {\n                    this.init()\n                }\n            },\n            show(val) {\n                if(!val) {\n                    this.src = ''\n                }\n            }\n        },\n        computed: {\n            containerTop() {\n                let top = 0\n                // #ifdef H5\n                    top = 44\n                // #endif\n                return top;\n            },\n            // 容器高度\n            containerHeight() {\n                return this.windowHeight - 48;\n            },\n            // 屏幕宽度\n            windowWidth() {\n                return this.sysInfo.windowWidth;\n            },\n            windowHeight() {\n                return this.sysInfo.windowHeight;\n            },\n            // 图片宽高比\n            imageRatio() {\n                if (this.imageRealHeight > 0) {\n                    return this.imageRealWidth / this.imageRealHeight\n                }\n                return 0\n            },\n            // 等比缩放后的宽度\n            imageWidth() {\n                if (this.imageRatio >= 1) {\n                    return this.windowWidth\n                }\n                return this.windowWidth * this.imageRatio\n            },\n            // 等比缩放后的高度\n            imageHeight() {\n                if (this.imageRatio >= 1) {\n                    return this.windowWidth / this.imageRatio\n                }\n                return this.windowWidth\n            },\n        },\n        methods: {\n            rotateHandler() {\n                if(this.rotate == 3) {\n                    this.rotate = 0;\n                } else {\n                    ++this.rotate\n                }\n            },\n            init() {\n                this.rotate = 0;\n                this.scale = 1;\n                this.cropW = this.cropWidth\n                this.cropH = this.cropHeight\n                uni.showLoading({\n                    title: '图片加载中...',\n                })\n                this.loadImage(this.src).then((e) => {\n                    uni.hideLoading()\n                }).catch((e) => {\n                    uni.hideLoading()\n                    uni.showModal({\n                        title: '标题',\n                        content: '图片加载失败'\n                    })\n                })\n            },\n            loadImage(src) {\n                const _this = this\n                return new Promise((resolve, reject) => {\n                    uni.getImageInfo({\n                        src: src,\n                        success: (res) => {\n                            _this.imageRealWidth = res.width\n                            _this.imageRealHeight = res.height\n\n                            _this.cropOffsertX = _this.windowWidth / 2 - _this.cropW / 2\n                            _this.cropOffsertY = _this.windowHeight / 2 - _this.cropH / 2\n                            _this.show = true\n\n                            _this.$nextTick(() => {\n                                _this.x = _this.windowWidth / 2 - _this.imageWidth / 2\n                                _this.y = _this.containerHeight / 2 - _this.imageHeight / 2\n                            });\n                            resolve(res)\n                        },\n                        fail: (e) => {\n                            _this.show = false\n                            reject(e)\n                        }\n                    })\n                });\n\n            },\n            cancel() {\n                this.show = false\n                this.$emit('cancel')\n            },\n            confirm(event) {\n                uni.showLoading({\n                    title: '裁剪中...',\n                })\n                const _this = this\n                const ctx = uni.createCanvasContext('myCanvas', _this);\n\n                const pixelRatio = _this.pixelRatio\n                const imgage = _this.src\n                const imgW = _this.imageWidth * _this.scale;\n                const imgH = _this.imageHeight * _this.scale\n                const rotate = _this.rotate\n                let dx = _this.cropOffsertX - _this.x - (_this.imageWidth - imgW) / 2;\n                let dy = _this.cropOffsertY - _this.y - (_this.imageHeight - imgH) / 2;\n\n                ctx.setFillStyle('white')\n                ctx.fillRect(0, 0, imgW, imgH)\n                ctx.save()\n\n                ctx.rotate((rotate * 90 * Math.PI) / 180);\n                switch (rotate) {\n                    case 1:\n                        dx += (imgH-imgW) / 2\n                        dy -= (imgH-imgW) / 2\n                        ctx.drawImage(imgage, -dy, dx, imgW, -imgH);\n                        break;\n                    case 2:\n                        ctx.drawImage(imgage, dx, dy, -imgW, -imgH);\n                        break;\n                    case 3:\n                        dx += (imgH-imgW) / 2\n                        dy -= (imgH-imgW) / 2\n                        ctx.drawImage(imgage, dy, -dx, -imgW, imgH);\n                        break;\n                    default:\n                        ctx.drawImage(imgage, -dx, -dy, imgW, imgH);\n                        break;\n                }\n                ctx.restore()\n                ctx.draw(false, () => {\n                    uni.canvasToTempFilePath({\n                        canvasId: 'myCanvas',\n                        destWidth: _this.cropW * pixelRatio,\n                        destHeight: _this.cropH * pixelRatio,\n                        success: (res) => {\n                            uni.hideLoading()\n                            event.detail.tempFilePath = res.tempFilePath\n                            _this.show = false\n                            _this.$emit('confirm', event)\n                        },\n                        fail: (e) => {\n                            uni.hideLoading()\n                            uni.showModal({\n                                title: '提示',\n                                content: '裁剪失败'\n                            })\n                        }\n                    }, _this);\n                })\n\n            },\n            imgTouchStart(e) {\n                if(e.touches.length == 2) {\n                    this.oldScale = this.scale\n                    this.scaling = true\n                    const x = e.touches[0].pageX - e.touches[1].pageX\n                    const y = e.touches[0].pageY - e.touches[1].pageY\n                    const hypotenuse = Math.sqrt(\n                        Math.pow(x, 2) +\n                        Math.pow(y, 2)\n                    )\n\n                    this.startL = Math.max(x, y, hypotenuse)\n                    uni.showModal({\n                        content: this.startL\n                    })\n                } else {\n                    this.startX = e.touches[0].pageX - this.x\n                    this.startY = e.touches[0].pageY - this.y\n                }\n            },\n            imgMoveing(e) {\n                if(this.scaling) {\n                    let scale = this.oldScale\n\n                    const x = e.touches[0].pageX - e.touches[1].pageX\n                    const y = e.touches[0].pageY - e.touches[1].pageY\n                    const hypotenuse = Math.sqrt(\n                        Math.pow(x, 2) +\n                        Math.pow(y, 2)\n                    )\n\n                    const newL = Math.max(x, y, hypotenuse)\n\n                    const cha = newL - this.startL;\n\n                    // 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小\n                    // 1px - 0.2\n                    let coe = 1;\n                    coe =\n                        coe / this.imageWidth > coe / this.imageHeight\n                            ? coe / this.imageHeight\n                            : coe / this.imageWidth;\n                    coe = coe > 0.1 ? 0.1 : coe;\n                    const num = coe * cha;\n\n                    if (cha > 0) {\n                        scale += Math.abs(num);\n                    } else if (cha < 0) {\n                        scale > Math.abs(num) ? (scale -= Math.abs(num)) : scale;\n                    }\n\n                    this.scale = scale;\n                } else {\n                    const moveX = e.touches[0].pageX - this.startX\n                    const moveY = e.touches[0].pageY - this.startY\n\n                    this.x = moveX\n                    this.y = moveY\n                }\n            },\n            imgMoveEnd() {\n                setTimeout(() => {\n                    this.scaling = false\n                }, 100)\n            },\n            touchStart(e) {\n                this.startX = e.touches[0].pageX - this.cropOffsertX;\n                this.startY = e.touches[0].pageY - this.cropOffsertY;\n\n                this.cropOldW = this.cropW\n                this.cropOldH = this.cropH\n            },\n            cropMoveing(e) {\n                const moveX = this._cropX(e.touches[0].pageX - this.startX)\n                const moveY = this._cropY(e.touches[0].pageY - this.startY)\n\n                this.cropOffsertX = moveX\n                this.cropOffsertY = moveY\n            },\n            dragMove(e, type) {\n                if(this.cropFixed) {\n                    return false\n                }\n                const moveX = e.touches[0].pageX - this.startX\n                const moveY = e.touches[0].pageY - this.startY\n                switch (type) {\n                    case 'left-top':\n                        this._cropMoveLeft(moveX)\n                        this._cropMoveTop(moveY)\n                        break;\n                    case 'middle-top':\n                        this._cropMoveTop(moveY)\n                        break;\n                    case 'right-top':\n                        this._cropMoveTop(moveY)\n                        this._cropMoveRight(moveX)\n                        break;\n                    case 'middle-right':\n                        this._cropMoveRight(moveX)\n                        break;\n                    case 'right-bottom':\n                        this._cropMoveRight(moveX)\n                        this._cropMoveBottom(moveY)\n                        break;\n                    case 'middle-bottom':\n                        this._cropMoveBottom(moveY)\n                        break;\n                    case 'left-bottom':\n                        this._cropMoveBottom(moveY)\n                        this._cropMoveLeft(moveX)\n                        break;\n                    case 'middle-left':\n                        this._cropMoveLeft(moveX)\n                        break;\n                    default:\n                        break;\n                }\n            },\n            _cropMoveTop(y) {\n                const topY = this._cropY(y)\n                this.cropH += this.cropOffsertY - topY\n                this.cropOffsertY = topY\n            },\n            _cropMoveRight(x) {\n                if(this.cropOldW + x >= this.windowWidth - this.border) {\n                    return false;\n                }\n                this.cropW = this.cropOldW + (x  - this.cropOffsertX)\n            },\n            _cropMoveBottom(y) {\n                if(this.cropOldH + y >= this.windowHeight - this.containerTop - this.border) {\n                    return false;\n                }\n                this.cropH = this.cropOldH + (y  - this.cropOffsertY)\n            },\n            _cropMoveLeft(x) {\n                const leftX = this._cropY(x)\n                this.cropW += this.cropOffsertX - leftX\n                this.cropOffsertX = leftX\n            },\n            _cropX(x) {\n                if(x <= this.border) {\n                    return this.border\n                }\n                if(x + this.cropW >= this.windowWidth - this.border) {\n                    return this.windowWidth - this.cropW - this.border\n                }\n                return x\n            },\n            _cropY(y) {\n                if(y <= this.border) {\n                    return this.border\n                }\n                if(y + this.cropH >= this.windowHeight - this.containerTop - this.border) {\n                    return this.windowHeight - this.cropH - this.containerTop - this.border\n                }\n                return y\n            }\n        }\n    }\n</script>\n\n<style scoped lang=\"css\">\n\n    @font-face {\n        font-family: \"iconfont\";\n        src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAR4AAsAAAAACKgAAAQsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEfIRGATYCJAMMCwgABCAFhG0HShugB8gOJUHBwAAAAAFEBNmwzd4dtatSmmpFoVAEhUThEAYkCozFKDCqCVO6RfH/89v869awDnTR1qrSANFt4GG4SNxreBn91fmV9f3+53J613ieHba+N1zmGM8PA7oXTaCAxpjei8IoLWFsGLu4jPME6vWJJdovqmgAO4U2LRBnep0K7GJmpYQWanXVOWuLuAFrtenK4haAa/f38QnKsCOpyrRFh6eFWsh5KXnfYcn958BGQNKfE8wmMmaAQpzkuo9Z+ukZluoltVV5abUipL5i/ysArlhWVut/eCRBVNPUjYg6oUo7JTHFoaYDSvdacnKTq9GAB4AY5y2dtL3qpFh1DENdnJC6Hq+xYb7pyRMDMzc/fYoJjY8flwO3m98rMucF+IZHj6Cagw5UeKpxyFbt2rHGY/8jpa7CYMvLfcIesLjY3bdqhaf+nqgQs2qT/+rjCH/VfA0VFGuAC3iE8NEr/Vau8vZsXiUy7+V3c3tQQXMAuNjDCC89KDIHH0OFhnUi81GEPwyc7wZUaN7DnUf4g+ZLQsMKYV/94NjK7R7TEM4niTY1oJ5zEU62aNVaasUub08YLUEam5EnT6a61/I17dNk+vTu9jpJjXhsTFwjqTtpCBxBIIgS6iQnc/Zod1YGKp0rAwsD8kkyP6AwcK0hcAwkiQmBhWvxPZWKDu86aUH2nLEdi9rGX1eXq5P6A1SrnAucMVMdZH/GKi/jyfCqJyucfK3mXpVujXOPfFf5LC4Dvx0X/943JyOq4HuCTZ8KiIPPAb6ro8akpT6ufiq39BQrNlk5mp8pO0JlJLk8f5QalRjoP60IMx0N8n7wGhSD3n6/F1zlcTVz/cR+Ev0lkLSTd7UiPbD/wCxGRMA2Krwro2O0bTQtImbwhjAJc0S3N4ROx15/PH60IzaIOjCbEelqkDOfETNxb/FMixnWNzeJp2KPQw9A5d76jGUOQOUvH7RE/o2RfkNatd3OGf9q0QKbnq8WB7qy+hVqJRjJn1BQgP/iErks0yy5iGJTrOayW7C/z0IoZH0qNH+7N+31XXc7G2p1hZDU6IWs1ghaqDNQpcEKVKu1BfWmFW9u0IFhKUodpswCEFodgqTZHWStbqOF+hqqdPsG1VrDEuodhfueDcZCj+QzuIrFtZh6BNNraIowbCzi1dbhOlOfionKXHoTzgzoY5hCKk/minEKZ/pYMDCoU7IsgREM3Y8Vgcvwvj4aMzK0AdewUpJljWkyGZH3IKmG7gfEHgZOhYXTwqiNwOhp0CiE3ZiFpL5fB6dj0keFKcGV+JvgGAP0vWMUpOQ10GI1VQt3LoMHDNJRYrEIPInAoPXDFEEnrk9P0zDG/FEGOA2WFNkiaZRGhuoRddXS8bX917cL6mn9c6TIUXSekybKHKQfJXFq2KSiRklLYU8dNKWDIX0cAA==') format('woff2');\n    }\n\n    .vue-cropper {\n        position: fixed;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 1001;\n        box-sizing: border-box;\n        user-select: none;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        direction: ltr;\n        touch-action: none;\n        text-align: left;\n        /* background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC\");\n    */\n\t\tbackground-color: #000000;\n\t}\n\n    .cropper-canvas {\n        position: absolute;\n        top: -9999px;\n        left:-9999px;\n        z-index: -998;\n    }\n\n    .vue-cropper .uni-info__ft {\n        position: absolute;\n        line-height: 48px;\n        font-size: 18px;\n        display: -webkit-box;\n        display: -webkit-flex;\n\t\tbackground-color: #000000;\n\t\tpadding-bottom: 34rpx;\n        display: flex;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 998;\n    }\n\n    .btn-group {\n        position: absolute;\n        right: 30px;\n        bottom: 78px;\n        z-index: 998;\n    }\n\n    .btn-item {\n        position: relative;\n        width: 40px;\n        height: 40px;\n        background: #fff;\n        border-radius: 20px;\n        padding: 10px;\n        display: inline-block;\n        margin-left: 10px;\n    }\n\n    .btn-item:active {\n        background: #ccc;\n    }\n\n    .rotate-btn {\n        font-family: \"iconfont\" !important;\n        font-size: 24px;\n        font-style: normal;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        line-height: 20px;\n    }\n\n    .rotate-btn:before {\n        content: \"\\e65c\";\n        margin-left: -2px;\n    }\n\n    .reset-btn {\n        font-family: \"iconfont\" !important;\n        font-size: 24px;\n        font-style: normal;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        line-height: 20px;\n    }\n\n    .reset-btn:before {\n        content: \"\\e648\";\n        margin-left: -2px;\n    }\n\n    .vue-cropper .uni-info__ft:after {\n        content: \" \";\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        height: 1px;\n        border-top: 1px solid #d5d5d6;\n        color: #d5d5d6;\n        -webkit-transform-origin: 0 0;\n        transform-origin: 0 0;\n        -webkit-transform: scaleY(.5);\n        transform: scaleY(.5);\n        z-index: 998;\n    }\n\n    .vue-cropper .uni-modal__btn {\n        display: block;\n        -webkit-box-flex: 1;\n        -webkit-flex: 1;\n        flex: 1;\n        font-size:28rpx;\n        text-decoration: none;\n        -webkit-tap-highlight-color: rgba(0,0,0,0);\n        position: relative;\n        text-align: center;\n        background-color: #000000;\n        z-index: 998;\n    }\n/* \n    .vue-cropper .uni-modal__btn:first-child:after { display:  none }\n    .vue-cropper .uni-modal__btn:after {\n        content: \" \";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 1px;\n        bottom: 0;\n        border-left: 1px solid #d5d5d6;\n        color: #d5d5d6;\n        -webkit-transform-origin: 0 0;\n        transform-origin: 0 0;\n        -webkit-transform: scaleX(.5);\n        transform: scaleX(.5);\n        z-index: 998;\n    } */\n\n    .vue-cropper .uni-modal__btn:active {\n        background-color: #eee;\n    }\n\n    .cropper-box,\n    .cropper-box-canvas,\n    .cropper-drag-box,\n    .cropper-crop-box,\n    .cropper-face {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        user-select: none;\n        z-index: 998;\n    }\n\n    .uni-image {\n        width: 100%;\n        height: 100%;\n    }\n\n    .cropper-box-canvas image {\n        position: relative;\n        text-align: left;\n        user-select: none;\n        transform: none;\n        max-width: none;\n        max-height: none;\n        z-index: 998;\n    }\n\n    .cropper-box {\n        overflow: hidden;\n    }\n\n    .cropper-move {\n        cursor: move;\n    }\n\n    .cropper-crop {\n        cursor: crosshair;\n    }\n\n    .cropper-modal {\n        background: rgba(0, 0, 0, 0.5);\n    }\n\n    .pointer-events {\n        pointer-events:none;\n    }\n\n    .cropper-crop-box {\n        /*border: 2px solid #39f;*/\n    }\n\n    .cropper-view-box {\n        display: block;\n        overflow: hidden;\n        width: 100%;\n        height: 100%;\n        outline: 1px solid #39f;\n        outline-color: rgba(51, 153, 255, 0.75);\n        user-select: none;\n    }\n\n    .cropper-view-box image {\n        user-select: none;\n        text-align: left;\n        max-width: none;\n        max-height: none;\n    }\n\n    .cropper-face {\n        top: 0;\n        left: 0;\n        background-color: #fff;\n        opacity: 0.1;\n    }\n\n    .crop-line {\n        position: absolute;\n        display: block;\n        width: 100%;\n        height: 100%;\n        opacity: 0.1;\n        z-index: 998;\n    }\n\n    .line-w {\n        top: -3px;\n        left: 0;\n        height: 5px;\n        cursor: n-resize;\n    }\n\n    .line-a {\n        top: 0;\n        left: -3px;\n        width: 5px;\n        cursor: w-resize;\n    }\n\n    .line-s {\n        bottom: -3px;\n        left: 0;\n        height: 5px;\n        cursor: s-resize;\n    }\n\n    .line-d {\n        top: 0;\n        right: -3px;\n        width: 5px;\n        cursor: e-resize;\n    }\n\n    .crop-point {\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        opacity: 0.75;\n        background-color: #39f;\n        border-radius: 100%;\n        z-index: 998;\n    }\n\n    .point-lt {\n        top: -4px;\n        left: -4px;\n        cursor: nw-resize;\n    }\n\n    .point-mt {\n        top: -5px;\n        left: 50%;\n        margin-left: -3px;\n        cursor: n-resize;\n    }\n\n    .point-rt {\n        top: -4px;\n        right: -4px;\n        cursor: ne-resize;\n    }\n\n    .point-ml {\n        top: 50%;\n        left: -4px;\n        margin-top: -3px;\n        cursor: w-resize;\n    }\n\n    .point-mr {\n        top: 50%;\n        right: -4px;\n        margin-top: -3px;\n        cursor: e-resize;\n    }\n\n    .point-lb {\n        bottom: -5px;\n        left: -4px;\n        cursor: sw-resize;\n    }\n\n    .point-mb {\n        bottom: -5px;\n        left: 50%;\n        margin-left: -3px;\n        cursor: s-resize;\n    }\n\n    .point-rb {\n        bottom: -5px;\n        right: -4px;\n        cursor: se-resize;\n    }\n</style>","import mod from \"-!../../../../HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--6-oneOf-1-2!../../../../HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./invinbg-image-cropper.vue?vue&type=style&index=0&id=02b3d9d8&scoped=true&lang=css&\"; export default mod; export * from \"-!../../../../HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--6-oneOf-1-2!../../../../HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./invinbg-image-cropper.vue?vue&type=style&index=0&id=02b3d9d8&scoped=true&lang=css&\"","// extracted by mini-css-extract-plugin\n    if(module.hot) {\n      // 1663896637007\n      var cssReload = require(\"D:/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\")(module.id, {\"hmr\":true,\"publicPath\":\"../../\",\"locals\":false});\n      module.hot.dispose(cssReload);\n      module.hot.accept(undefined, cssReload);\n    }\n  "],"sourceRoot":""}