| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/components/EleCropperDialog/EleCropper.vue?vue&type=script&lang=js&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/components/EleCropperDialog/EleCropper.vue","mtime":1616225248000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgJ2Nyb3BwZXJqcy9kaXN0L2Nyb3BwZXIuY3NzJzsNCmltcG9ydCBDcm9wcGVyIGZyb20gJ2Nyb3BwZXJqcyc7DQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogIkVsZUNyb3BwZXIiLA0KICBwcm9wczogew0KICAgIHNyYzogU3RyaW5nLCAgLy8g5Zu+54mH5Zyw5Z2ADQogICAgYXNwZWN0UmF0aW86IHsgIC8vIOijgeWJquavlOS+iw0KICAgICAgdHlwZTogTnVtYmVyLA0KICAgICAgZGVmYXVsdDogMQ0KICAgIH0sDQogICAgdmlld01vZGU6IE51bWJlciwgIC8vIOijgeWJque7hOS7tuaooeW8jw0KICAgIGRyYWdNb2RlOiBTdHJpbmcsDQogICAgaW5pdGlhbEFzcGVjdFJhdGlvOiBOdW1iZXIsDQogICAgbWluQ29udGFpbmVyV2lkdGg6IE51bWJlciwNCiAgICBtaW5Db250YWluZXJIZWlnaHQ6IE51bWJlciwNCiAgICBtaW5DYW52YXNXaWR0aDogTnVtYmVyLA0KICAgIG1pbkNhbnZhc0hlaWdodDogTnVtYmVyLA0KICAgIG1pbkNyb3BCb3hXaWR0aDogTnVtYmVyLA0KICAgIG1pbkNyb3BCb3hIZWlnaHQ6IE51bWJlciwNCiAgICBjcm9wcGVkV2lkdGg6IE51bWJlciwNCiAgICBjcm9wcGVkSGVpZ2h0OiBOdW1iZXIsDQogICAgY3JvcHBlZE1pbldpZHRoOiBOdW1iZXIsDQogICAgY3JvcHBlZE1pbkhlaWdodDogTnVtYmVyLA0KICAgIGNyb3BwZWRNYXhXaWR0aDogTnVtYmVyLA0KICAgIGNyb3BwZWRNYXhIZWlnaHQ6IE51bWJlciwNCiAgICBjcm9wcGVkRmlsbENvbG9yOiBOdW1iZXIsDQogICAgY3JvcHBlZEltYWdlU21vb3RoaW5nRW5hYmxlZDogQm9vbGVhbiwNCiAgICBjcm9wcGVkSW1hZ2VTbW9vdGhpbmdRdWFsaXR5OiBTdHJpbmcsDQogICAgdG9CbG9iOiBCb29sZWFuLCAgLy8g5piv5ZCm6L+U5ZueYmxvYuaVsOaNrg0KICAgIGFjY2VwdDogeyAgLy8g5YWB6K645LiK5Lyg55qE5Zu+54mH57G75Z6LDQogICAgICB0eXBlOiBTdHJpbmcsDQogICAgICBkZWZhdWx0OiAnaW1hZ2UvKicNCiAgICB9LA0KICAgIHRvb2xzOiB7ICAvLyDmk43kvZzmjInpkq7luIPlsYANCiAgICAgIHR5cGU6IFtCb29sZWFuLCBTdHJpbmddLA0KICAgICAgZGVmYXVsdDogdHJ1ZQ0KICAgIH0sDQogICAgc2hvd1ByZXZpZXc6IHsgIC8vIOaYr+WQpuaYvuekuumihOiniOe7hOS7tg0KICAgICAgdHlwZTogQm9vbGVhbiwNCiAgICAgIGRlZmF1bHQ6IHRydWUNCiAgICB9DQogIH0sDQogIGRhdGEoKSB7DQogICAgcmV0dXJuIHsNCiAgICAgIGltZ1NyYzogJycsICAvLyDlm77niYdiYXNlNjTmlbDmja4NCiAgICAgIGluczogbnVsbCwgIC8vIGNyb3BwZXLlrp7kvosNCiAgICAgIG9wdGlvbnM6IHsgIC8vIGNyb3BwZXLphY3nva4NCiAgICAgICAgYXNwZWN0UmF0aW86IHRoaXMuYXNwZWN0UmF0aW8sDQogICAgICAgIHZpZXdNb2RlOiB0aGlzLnZpZXdNb2RlDQogICAgICB9LA0KICAgICAgaW1nVHlwZTogJ2ltYWdlL2pwZWcnLCAgLy8g5b2T5YmN5Zu+54mH57G75Z6LDQogICAgICBwcmV2aWV3V2lkdGg6IDEyMCAgLy8g6aKE6KeI57uE5Lu25a695bqmDQogICAgfQ0KICB9LA0KICBjb21wdXRlZDogew0KICAgIC8vIOmihOiniOe7hOS7tuagt+W8jw0KICAgIHBTdHlsZSgpIHsNCiAgICAgIHJldHVybiBgd2lkdGg6ICR7dGhpcy5wcmV2aWV3V2lkdGggKyAyMH1weDt0ZXh0LWFsaWduOiByaWdodDtmb250LXNpemU6MDtgOw0KICAgIH0sDQogICAgcEl0ZW1TdHlsZTEoKSB7DQogICAgICBsZXQgaCA9IHRoaXMucHJldmlld1dpZHRoIC8gKHRoaXMuYXNwZWN0UmF0aW8gfHwgMSk7DQogICAgICByZXR1cm4gYHdpZHRoOiAke3RoaXMucHJldmlld1dpZHRofXB4O2hlaWdodDogJHtofXB4O2A7DQogICAgfSwNCiAgICBwSXRlbVN0eWxlMigpIHsNCiAgICAgIHJldHVybiB0aGlzLnBJdGVtU3R5bGUxICsgJ2JvcmRlci1yYWRpdXM6IDUwJTttYXJnaW4tdG9wOiAxMHB4Oyc7DQogICAgfSwNCiAgICBwSXRlbVN0eWxlMygpIHsNCiAgICAgIGxldCB3ID0gdGhpcy5wcmV2aWV3V2lkdGggLyAzICogMiAtIDE1Ow0KICAgICAgbGV0IGggPSB3IC8gKHRoaXMuYXNwZWN0UmF0aW8gfHwgMSk7DQogICAgICByZXR1cm4gYHdpZHRoOiAke3RoaXMucHJldmlld1dpZHRofXB4O2hlaWdodDogJHtofXB4O21hcmdpbi10b3A6IDEwcHg7YDsNCiAgICB9LA0KICAgIHBJdGVtU3R5bGU0KCkgew0KICAgICAgbGV0IHcgPSB0aGlzLnByZXZpZXdXaWR0aCAvIDMgLSAxOw0KICAgICAgbGV0IGggPSB3IC8gKHRoaXMuYXNwZWN0UmF0aW8gfHwgMSk7DQogICAgICByZXR1cm4gYHdpZHRoOiAke3RoaXMucHJldmlld1dpZHRofXB4O2hlaWdodDogJHtofXB4O21hcmdpbjogMTBweCAwIDAgMTBweDtgOw0KICAgIH0sDQogICAgLy8g6Kej5p6Q5oyJ6ZKu5biD5bGADQogICAgdG9vbEdyb3VwKCkgew0KICAgICAgaWYgKHR5cGVvZiB0aGlzLnRvb2xzID09PSAnc3RyaW5nJykgew0KICAgICAgICBsZXQgdG9vbCA9IFtdOw0KICAgICAgICBsZXQgZ3JvdXAgPSB0aGlzLnRvb2xzLnNwbGl0KCd8Jyk7DQogICAgICAgIGdyb3VwLmZvckVhY2goZyA9PiB7DQogICAgICAgICAgdG9vbC5wdXNoKGcuc3BsaXQoJywnKS5tYXAoYiA9PiBiLnRyaW0oKSkpOw0KICAgICAgICB9KTsNCiAgICAgICAgcmV0dXJuIHRvb2w7DQogICAgICB9IGVsc2UgaWYgKHRoaXMudG9vbHMpIHsNCiAgICAgICAgcmV0dXJuIFsNCiAgICAgICAgICBbJ3pvb21JbicsICd6b29tT3V0J10sIFsnbW92ZUwnLCAnbW92ZVInLCAnbW92ZVQnLCAnbW92ZUInXSwgWydyb3RhdGVMJywgJ3JvdGF0ZVInXSwNCiAgICAgICAgICBbJ3NjYWxlWCcsICdzY2FsZVknXSwgWydyZXNldCcsICd1cGxvYWQnXSwgWydjcm9wJ10NCiAgICAgICAgXTsNCiAgICAgIH0NCiAgICAgIHJldHVybiBbXTsNCiAgICB9DQogIH0sDQogIG1vdW50ZWQoKSB7DQogICAgLy8gaWXlhbzlrrkNCiAgICBpZiAodGhpcy5zcmMuaW5kZXhPZignZGF0YTppbWFnZScpICE9PSAwICYmICghIXdpbmRvdy5BY3RpdmVYT2JqZWN0IHx8ICdBY3RpdmVYT2JqZWN0JyBpbiB3aW5kb3cpKSB7DQogICAgICBsZXQgcmVxID0gbmV3IHdpbmRvdy5YTUxIdHRwUmVxdWVzdCgpOw0KICAgICAgcmVxLm9wZW4oJ0dFVCcsIHRoaXMuc3JjLCB0cnVlKTsNCiAgICAgIHJlcS5yZXNwb25zZVR5cGUgPSAnYXJyYXlidWZmZXInOw0KICAgICAgcmVxLm9ubG9hZCA9ICgpID0+IHsNCiAgICAgICAgaWYgKFsyMDAsIDIwMV0uaW5kZXhPZihyZXEuc3RhdHVzKSA9PT0gLTEpIHJldHVybiBjb25zb2xlLmVycm9yKCdjcm9wcGVyJywgcmVxKTsNCiAgICAgICAgbGV0IGJ5dGVzID0gbmV3IFVpbnQ4QXJyYXkocmVxLnJlc3BvbnNlKSwgYmluYXJ5ID0gJyc7DQogICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgYnl0ZXMuYnl0ZUxlbmd0aDsgaSsrKSBiaW5hcnkgKz0gU3RyaW5nLmZyb21DaGFyQ29kZShieXRlc1tpXSk7DQogICAgICAgIHRoaXMuaW1nU3JjID0gJ2RhdGE6aW1hZ2UvanBlZztiYXNlNjQsJyArIHdpbmRvdy5idG9hKGJpbmFyeSk7DQogICAgICAgIHRoaXMuJG5leHRUaWNrKCgpID0+IHsNCiAgICAgICAgICB0aGlzLnJlbmRlcigpOw0KICAgICAgICB9KTsNCiAgICAgIH07DQogICAgICByZXEuc2VuZCgpOw0KICAgIH0gZWxzZSB7DQogICAgICB0aGlzLmltZ1NyYyA9IHRoaXMuc3JjOw0KICAgICAgdGhpcy4kbmV4dFRpY2soKCkgPT4gew0KICAgICAgICB0aGlzLnJlbmRlcigpOw0KICAgICAgfSk7DQogICAgfQ0KICB9LA0KICBtZXRob2RzOiB7DQogICAgLyog5riy5p+TICovDQogICAgcmVuZGVyKCkgew0KICAgICAgaWYgKHRoaXMuaW5zKSB0aGlzLmlucy5kZXN0cm95KCk7DQogICAgICBpZiAodGhpcy5zaG93UHJldmlldykgdGhpcy5vcHRpb25zLnByZXZpZXcgPSB0aGlzLiRyZWZzLmVsZUNyb3BwZXJQcmV2aWV3cy5jaGlsZHJlbjsNCiAgICAgIHRoaXMub3B0aW9ucy5kcmFnTW9kZSA9IHRoaXMuZHJhZ01vZGU7DQogICAgICB0aGlzLm9wdGlvbnMuaW5pdGlhbEFzcGVjdFJhdGlvID0gdGhpcy5pbml0aWFsQXNwZWN0UmF0aW87DQogICAgICB0aGlzLm9wdGlvbnMubWluQ29udGFpbmVyV2lkdGggPSB0aGlzLm1pbkNvbnRhaW5lcldpZHRoOw0KICAgICAgdGhpcy5vcHRpb25zLm1pbkNvbnRhaW5lckhlaWdodCA9IHRoaXMubWluQ29udGFpbmVySGVpZ2h0Ow0KICAgICAgdGhpcy5vcHRpb25zLm1pbkNhbnZhc1dpZHRoID0gdGhpcy5taW5DYW52YXNXaWR0aDsNCiAgICAgIHRoaXMub3B0aW9ucy5taW5DYW52YXNIZWlnaHQgPSB0aGlzLm1pbkNhbnZhc0hlaWdodDsNCiAgICAgIHRoaXMub3B0aW9ucy5taW5Dcm9wQm94V2lkdGggPSB0aGlzLm1pbkNyb3BCb3hXaWR0aDsNCiAgICAgIHRoaXMub3B0aW9ucy5taW5Dcm9wQm94SGVpZ2h0ID0gdGhpcy5taW5Dcm9wQm94SGVpZ2h0Ow0KICAgICAgdGhpcy5pbnMgPSBuZXcgQ3JvcHBlcih0aGlzLiRyZWZzLmVsZUNyb3BwZXJJbWcsIHRoaXMub3B0aW9ucyk7DQogICAgfSwNCiAgICAvKiDmk43kvZzmjInpkq7ngrnlh7vkuovku7YgKi8NCiAgICBhY3Rpb24oZSkgew0KICAgICAgbGV0IG1ldGhvZCA9IHRoaXMuZ2V0RGF0YXNldChlLmN1cnJlbnRUYXJnZXQsICdtZXRob2QnKSwNCiAgICAgICAgICBvcHRpb24gPSB0aGlzLmdldERhdGFzZXQoZS5jdXJyZW50VGFyZ2V0LCAnb3B0aW9uJyksDQogICAgICAgICAgc2Vjb25kT3B0aW9uID0gdGhpcy5nZXREYXRhc2V0KGUuY3VycmVudFRhcmdldCwgJ29wdGlvbjInKTsNCiAgICAgIGlmICghdGhpcy5pbnMgfHwgIW1ldGhvZCkgcmV0dXJuOw0KICAgICAgbGV0IGNyb3BwZWQgPSB0aGlzLmlucy5jcm9wcGVkLCByZXN1bHQ7DQogICAgICBzd2l0Y2ggKG1ldGhvZCkgew0KICAgICAgICBjYXNlICdyb3RhdGUnOg0KICAgICAgICAgIGlmIChjcm9wcGVkICYmIHRoaXMub3B0aW9ucy52aWV3TW9kZSA+IDApIHRoaXMuaW4uY2xlYXIoKTsNCiAgICAgICAgICBicmVhazsNCiAgICAgICAgY2FzZSAnZ2V0Q3JvcHBlZENhbnZhcyc6DQogICAgICAgICAgb3B0aW9uID0gSlNPTi5wYXJzZShvcHRpb24pOw0KICAgICAgICAgIGlmICh0aGlzLmltZ1R5cGUgPT09ICdpbWFnZS9qcGVnJykgew0KICAgICAgICAgICAgaWYgKCFvcHRpb24pIG9wdGlvbiA9IHt9Ow0KICAgICAgICAgICAgb3B0aW9uLmZpbGxDb2xvciA9ICcjZmZmJzsNCiAgICAgICAgICB9DQogICAgICAgICAgb3B0aW9uLndpZHRoID0gdGhpcy5jcm9wcGVkV2lkdGg7DQogICAgICAgICAgb3B0aW9uLmhlaWdodCA9IHRoaXMuY3JvcHBlZEhlaWdodDsNCiAgICAgICAgICBvcHRpb24ubWluV2lkdGggPSB0aGlzLmNyb3BwZWRNaW5XaWR0aDsNCiAgICAgICAgICBvcHRpb24ubWluSGVpZ2h0ID0gdGhpcy5jcm9wcGVkTWluSGVpZ2h0Ow0KICAgICAgICAgIG9wdGlvbi5tYXhXaWR0aCA9IHRoaXMuY3JvcHBlZE1heFdpZHRoOw0KICAgICAgICAgIG9wdGlvbi5tYXhIZWlnaHQgPSB0aGlzLmNyb3BwZWRNYXhIZWlnaHQ7DQogICAgICAgICAgb3B0aW9uLmZpbGxDb2xvciA9IHRoaXMuY3JvcHBlZEZpbGxDb2xvcjsNCiAgICAgICAgICBvcHRpb24uaW1hZ2VTbW9vdGhpbmdFbmFibGVkID0gdGhpcy5jcm9wcGVkSW1hZ2VTbW9vdGhpbmdFbmFibGVkOw0KICAgICAgICAgIG9wdGlvbi5pbWFnZVNtb290aGluZ1F1YWxpdHkgPSB0aGlzLmNyb3BwZWRJbWFnZVNtb290aGluZ1F1YWxpdHk7DQogICAgICAgICAgYnJlYWs7DQogICAgICB9DQogICAgICByZXN1bHQgPSB0aGlzLmluc1ttZXRob2RdKG9wdGlvbiwgc2Vjb25kT3B0aW9uKTsNCiAgICAgIHN3aXRjaCAobWV0aG9kKSB7DQogICAgICAgIGNhc2UgJ3JvdGF0ZSc6DQogICAgICAgICAgaWYgKGNyb3BwZWQgJiYgdGhpcy5vcHRpb25zLnZpZXdNb2RlID4gMCkgdGhpcy5pbnMuY3JvcCgpOw0KICAgICAgICAgIGJyZWFrOw0KICAgICAgICBjYXNlICdzY2FsZVgnOg0KICAgICAgICBjYXNlICdzY2FsZVknOg0KICAgICAgICAgIHRoaXMuc2V0RGF0YXNldChlLmN1cnJlbnRUYXJnZXQsICdvcHRpb24nLCAtb3B0aW9uKTsNCiAgICAgICAgICBicmVhazsNCiAgICAgICAgY2FzZSAnZ2V0Q3JvcHBlZENhbnZhcyc6DQogICAgICAgICAgY29uc29sZS5sb2cocmVzdWx0LnRvRGF0YVVSTCgpKQ0KICAgICAgICAgIGlmIChyZXN1bHQpIHsNCiAgICAgICAgICAgIGlmICh0aGlzLnRvQmxvYikgew0KICAgICAgICAgICAgICByZXN1bHQudG9CbG9iKChibG9iKSA9PiB7DQogICAgICAgICAgICAgICAgdGhpcy4kZW1pdCgnY3JvcCcsIGJsb2IpOw0KICAgICAgICAgICAgICB9LCB0aGlzLmltZ1R5cGUpOw0KICAgICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgICAgdGhpcy4kZW1pdCgnY3JvcCcsIHJlc3VsdC50b0RhdGFVUkwodGhpcy5pbWdUeXBlKSk7DQogICAgICAgICAgICB9DQogICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgIHRoaXMuJG1lc3NhZ2UuZXJyb3IoJ+ijgeWJquWksei0pScpOw0KICAgICAgICAgIH0NCiAgICAgICAgICBicmVhazsNCiAgICAgIH0NCiAgICB9LA0KICAgIC8qIOWbvueJh+S4iuS8oOWkhOeQhiAqLw0KICAgIG9uVXBsb2FkKGZpbGUpIHsNCiAgICAgIHRoaXMuaW1nVHlwZSA9IGZpbGUudHlwZTsNCiAgICAgIGxldCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOw0KICAgICAgcmVhZGVyLm9ubG9hZCA9IChlKSA9PiB7DQogICAgICAgIHRoaXMuaW5zLnJlcGxhY2UoZS50YXJnZXQucmVzdWx0KTsNCiAgICAgIH07DQogICAgICByZWFkZXIucmVhZEFzRGF0YVVSTChmaWxlKTsNCiAgICAgIHJldHVybiBmYWxzZTsNCiAgICB9LA0KICAgIC8qIOiOt+WPlmRhdGFzZXTlsZ7mgKcgKi8NCiAgICBnZXREYXRhc2V0KGVsZW0sIGtleSkgew0KICAgICAgaWYgKGVsZW0uZGF0YXNldCkgcmV0dXJuIGVsZW0uZGF0YXNldFtrZXldOw0KICAgICAgZWxzZSByZXR1cm4gZWxlbS5nZXRBdHRyaWJ1dGUoJ2RhdGEtJyArIGtleSk7DQogICAgfSwNCiAgICAvKiDorr7nva5kYXRhc2V05bGe5oCnICovDQogICAgc2V0RGF0YXNldChlbGVtLCBrZXksIHZhbHVlKSB7DQogICAgICBpZiAoZWxlbS5kYXRhc2V0KSBlbGVtLmRhdGFzZXRba2V5XSA9IHZhbHVlOw0KICAgICAgZWxzZSBlbGVtLnNldEF0dHJpYnV0ZSgnZGF0YS0nICsga2V5LCB2YWx1ZSk7DQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["EleCropper.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA;AACA;;AAEA;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;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;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;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"EleCropper.vue","sourceRoot":"src/components/EleCropperDialog","sourcesContent":["<!-- 图片裁剪组件 -->\r\n<template>\r\n <div class=\"ele-cropper\">\r\n <div class=\"ele-cropper-group\">\r\n <div class=\"ele-cropper-img-group\">\r\n <img ref=\"eleCropperImg\" :src=\"imgSrc\" style=\"max-width:100%;\" alt=\"\"/>\r\n </div>\r\n <div v-if=\"showPreview\" ref=\"eleCropperPreviews\" :style=\"pStyle\" class=\"ele-cropper-preview-group\">\r\n <div :style=\"pItemStyle1\" class=\"ele-cropper-preview\"></div>\r\n <div v-if=\"this.aspectRatio===1\" :style=\"pItemStyle2\" class=\"ele-cropper-preview\"></div>\r\n <div v-if=\"this.aspectRatio!==1\" :style=\"pItemStyle3\" class=\"ele-cropper-preview\"></div>\r\n <div v-if=\"this.aspectRatio!==1\" :style=\"pItemStyle4\" class=\"ele-cropper-preview\"></div>\r\n </div>\r\n </div>\r\n <div v-if=\"tools\" class=\"ele-cropper-tool\">\r\n <el-button-group v-for=\"(item,index) in toolGroup\" :key=\"index\" class=\"ele-cropper-tool-item\">\r\n <template v-for=\"(btn,i) in item\">\r\n <el-button v-if=\"btn==='zoomIn'\" :key=\"i\" @click=\"action\" data-method=\"zoom\"\r\n data-option=\"0.1\" title=\"放大\" icon=\"el-icon-zoom-in\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='zoomOut'\" :key=\"i\" @click=\"action\" data-method=\"zoom\"\r\n data-option=\"-0.1\" title=\"缩小\" icon=\"el-icon-zoom-out\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='rotateL'\" :key=\"i\" @click=\"action\" data-method=\"rotate\"\r\n data-option=\"-45\" title=\"向左旋转\" icon=\"el-icon-refresh-left\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='rotateR'\" :key=\"i\" @click=\"action\" data-method=\"rotate\"\r\n data-option=\"45\" title=\"向右旋转\" icon=\"el-icon-refresh-right\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='moveL'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"-10\"\r\n data-option2=\"0\" title=\"左移\" icon=\"el-icon-back\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='moveR'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"10\"\r\n data-option2=\"0\" title=\"右移\" icon=\"el-icon-right\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='moveT'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"0\"\r\n data-option2=\"-10\" title=\"上移\" icon=\"el-icon-top\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='moveB'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"0\"\r\n data-option2=\"10\" title=\"下移\" icon=\"el-icon-bottom\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='scaleX'\" :key=\"i\" @click=\"action\" data-method=\"scaleX\"\r\n data-option=\"-1\" title=\"左右翻转\" icon=\"el-icon-sort\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='scaleY'\" :key=\"i\" @click=\"action\" data-method=\"scaleY\"\r\n data-option=\"-1\" title=\"上下翻转\" icon=\"el-icon-sort\" type=\"primary\"/>\r\n <el-button v-else-if=\"btn==='reset'\" :key=\"i\" @click=\"action\" data-method=\"reset\"\r\n title=\"重新开始\" icon=\"el-icon-refresh\" type=\"primary\"/>\r\n <el-upload v-else-if=\"btn==='upload'\" :key=\"i\" action=\"\" :before-upload=\"onUpload\"\r\n :show-file-list=\"false\" :accept=\"accept\">\r\n <el-button title=\"选择图片\" icon=\"el-icon-upload2\" type=\"primary\"/>\r\n </el-upload>\r\n <el-button v-else-if=\"btn==='crop'\" :key=\"i\" @click=\"action\" data-method=\"getCroppedCanvas\"\r\n data-option=\"{ "maxWidth": 4096, "maxHeight": 4096 }\"\r\n icon=\"el-icon-check\" type=\"primary\">完成\r\n </el-button>\r\n </template>\r\n </el-button-group>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport 'cropperjs/dist/cropper.css';\r\nimport Cropper from 'cropperjs';\r\n\r\nexport default {\r\n name: \"EleCropper\",\r\n props: {\r\n src: String, // 图片地址\r\n aspectRatio: { // 裁剪比例\r\n type: Number,\r\n default: 1\r\n },\r\n viewMode: Number, // 裁剪组件模式\r\n dragMode: String,\r\n initialAspectRatio: Number,\r\n minContainerWidth: Number,\r\n minContainerHeight: Number,\r\n minCanvasWidth: Number,\r\n minCanvasHeight: Number,\r\n minCropBoxWidth: Number,\r\n minCropBoxHeight: Number,\r\n croppedWidth: Number,\r\n croppedHeight: Number,\r\n croppedMinWidth: Number,\r\n croppedMinHeight: Number,\r\n croppedMaxWidth: Number,\r\n croppedMaxHeight: Number,\r\n croppedFillColor: Number,\r\n croppedImageSmoothingEnabled: Boolean,\r\n croppedImageSmoothingQuality: String,\r\n toBlob: Boolean, // 是否返回blob数据\r\n accept: { // 允许上传的图片类型\r\n type: String,\r\n default: 'image/*'\r\n },\r\n tools: { // 操作按钮布局\r\n type: [Boolean, String],\r\n default: true\r\n },\r\n showPreview: { // 是否显示预览组件\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n imgSrc: '', // 图片base64数据\r\n ins: null, // cropper实例\r\n options: { // cropper配置\r\n aspectRatio: this.aspectRatio,\r\n viewMode: this.viewMode\r\n },\r\n imgType: 'image/jpeg', // 当前图片类型\r\n previewWidth: 120 // 预览组件宽度\r\n }\r\n },\r\n computed: {\r\n // 预览组件样式\r\n pStyle() {\r\n return `width: ${this.previewWidth + 20}px;text-align: right;font-size:0;`;\r\n },\r\n pItemStyle1() {\r\n let h = this.previewWidth / (this.aspectRatio || 1);\r\n return `width: ${this.previewWidth}px;height: ${h}px;`;\r\n },\r\n pItemStyle2() {\r\n return this.pItemStyle1 + 'border-radius: 50%;margin-top: 10px;';\r\n },\r\n pItemStyle3() {\r\n let w = this.previewWidth / 3 * 2 - 15;\r\n let h = w / (this.aspectRatio || 1);\r\n return `width: ${this.previewWidth}px;height: ${h}px;margin-top: 10px;`;\r\n },\r\n pItemStyle4() {\r\n let w = this.previewWidth / 3 - 1;\r\n let h = w / (this.aspectRatio || 1);\r\n return `width: ${this.previewWidth}px;height: ${h}px;margin: 10px 0 0 10px;`;\r\n },\r\n // 解析按钮布局\r\n toolGroup() {\r\n if (typeof this.tools === 'string') {\r\n let tool = [];\r\n let group = this.tools.split('|');\r\n group.forEach(g => {\r\n tool.push(g.split(',').map(b => b.trim()));\r\n });\r\n return tool;\r\n } else if (this.tools) {\r\n return [\r\n ['zoomIn', 'zoomOut'], ['moveL', 'moveR', 'moveT', 'moveB'], ['rotateL', 'rotateR'],\r\n ['scaleX', 'scaleY'], ['reset', 'upload'], ['crop']\r\n ];\r\n }\r\n return [];\r\n }\r\n },\r\n mounted() {\r\n // ie兼容\r\n if (this.src.indexOf('data:image') !== 0 && (!!window.ActiveXObject || 'ActiveXObject' in window)) {\r\n let req = new window.XMLHttpRequest();\r\n req.open('GET', this.src, true);\r\n req.responseType = 'arraybuffer';\r\n req.onload = () => {\r\n if ([200, 201].indexOf(req.status) === -1) return console.error('cropper', req);\r\n let bytes = new Uint8Array(req.response), binary = '';\r\n for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);\r\n this.imgSrc = 'data:image/jpeg;base64,' + window.btoa(binary);\r\n this.$nextTick(() => {\r\n this.render();\r\n });\r\n };\r\n req.send();\r\n } else {\r\n this.imgSrc = this.src;\r\n this.$nextTick(() => {\r\n this.render();\r\n });\r\n }\r\n },\r\n methods: {\r\n /* 渲染 */\r\n render() {\r\n if (this.ins) this.ins.destroy();\r\n if (this.showPreview) this.options.preview = this.$refs.eleCropperPreviews.children;\r\n this.options.dragMode = this.dragMode;\r\n this.options.initialAspectRatio = this.initialAspectRatio;\r\n this.options.minContainerWidth = this.minContainerWidth;\r\n this.options.minContainerHeight = this.minContainerHeight;\r\n this.options.minCanvasWidth = this.minCanvasWidth;\r\n this.options.minCanvasHeight = this.minCanvasHeight;\r\n this.options.minCropBoxWidth = this.minCropBoxWidth;\r\n this.options.minCropBoxHeight = this.minCropBoxHeight;\r\n this.ins = new Cropper(this.$refs.eleCropperImg, this.options);\r\n },\r\n /* 操作按钮点击事件 */\r\n action(e) {\r\n let method = this.getDataset(e.currentTarget, 'method'),\r\n option = this.getDataset(e.currentTarget, 'option'),\r\n secondOption = this.getDataset(e.currentTarget, 'option2');\r\n if (!this.ins || !method) return;\r\n let cropped = this.ins.cropped, result;\r\n switch (method) {\r\n case 'rotate':\r\n if (cropped && this.options.viewMode > 0) this.in.clear();\r\n break;\r\n case 'getCroppedCanvas':\r\n option = JSON.parse(option);\r\n if (this.imgType === 'image/jpeg') {\r\n if (!option) option = {};\r\n option.fillColor = '#fff';\r\n }\r\n option.width = this.croppedWidth;\r\n option.height = this.croppedHeight;\r\n option.minWidth = this.croppedMinWidth;\r\n option.minHeight = this.croppedMinHeight;\r\n option.maxWidth = this.croppedMaxWidth;\r\n option.maxHeight = this.croppedMaxHeight;\r\n option.fillColor = this.croppedFillColor;\r\n option.imageSmoothingEnabled = this.croppedImageSmoothingEnabled;\r\n option.imageSmoothingQuality = this.croppedImageSmoothingQuality;\r\n break;\r\n }\r\n result = this.ins[method](option, secondOption);\r\n switch (method) {\r\n case 'rotate':\r\n if (cropped && this.options.viewMode > 0) this.ins.crop();\r\n break;\r\n case 'scaleX':\r\n case 'scaleY':\r\n this.setDataset(e.currentTarget, 'option', -option);\r\n break;\r\n case 'getCroppedCanvas':\r\n console.log(result.toDataURL())\r\n if (result) {\r\n if (this.toBlob) {\r\n result.toBlob((blob) => {\r\n this.$emit('crop', blob);\r\n }, this.imgType);\r\n } else {\r\n this.$emit('crop', result.toDataURL(this.imgType));\r\n }\r\n } else {\r\n this.$message.error('裁剪失败');\r\n }\r\n break;\r\n }\r\n },\r\n /* 图片上传处理 */\r\n onUpload(file) {\r\n this.imgType = file.type;\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n this.ins.replace(e.target.result);\r\n };\r\n reader.readAsDataURL(file);\r\n return false;\r\n },\r\n /* 获取dataset属性 */\r\n getDataset(elem, key) {\r\n if (elem.dataset) return elem.dataset[key];\r\n else return elem.getAttribute('data-' + key);\r\n },\r\n /* 设置dataset属性 */\r\n setDataset(elem, key, value) {\r\n if (elem.dataset) elem.dataset[key] = value;\r\n else elem.setAttribute('data-' + key, value);\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.ele-cropper .ele-cropper-group {\r\n display: flex;\r\n}\r\n\r\n.ele-cropper .ele-cropper-img-group {\r\n flex: 1;\r\n}\r\n\r\n.ele-cropper .ele-cropper-preview {\r\n display: inline-block;\r\n border: 1px solid hsla(0, 0%, 80%, .6);\r\n vertical-align: top;\r\n overflow: hidden;\r\n}\r\n\r\n/* 操作按钮 */\r\n.ele-cropper .ele-cropper-tool {\r\n margin-top: 10px;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item {\r\n margin-top: 10px;\r\n vertical-align: top;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item {\r\n margin-right: 18px;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item:last-child {\r\n margin-right: 0 !important;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool .el-button {\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n}\r\n\r\n.ele-cropper [data-method=\"scaleX\"] .el-icon-sort {\r\n transform: rotate(90deg);\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item > div {\r\n display: inline-block;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item .el-upload .el-button {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n}\r\n\r\n/* 小屏幕适应 */\r\n@media screen and (max-width: 768px) {\r\n .ele-cropper .ele-cropper-preview-group {\r\n display: none;\r\n }\r\n\r\n .ele-cropper .ele-cropper-tool-item {\r\n margin-right: 6px;\r\n }\r\n\r\n .ele-cropper .ele-cropper-tool .el-button {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n}\r\n</style>"]}]}
|
