(global["webpackJsonp"] = global["webpackJsonp"] || []).push([["pages_basics/common/vendor"],{ /***/ 957: /*!**************************************************************************************!*\ !*** E:/git/2021项目/v3-H5/pages_basics/component/cropper.js?vue&type=script&lang=js& ***! \**************************************************************************************/ /*! no static exports found */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _D_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_13_1_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_cropper_js_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!./node_modules/babel-loader/lib!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--13-1!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!./cropper.js?vue&type=script&lang=js& */ 958); /* harmony import */ var _D_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_13_1_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_cropper_js_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_D_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_13_1_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_cropper_js_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__); /* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _D_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_13_1_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_cropper_js_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _D_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_13_1_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_cropper_js_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__)); /* harmony default export */ __webpack_exports__["default"] = (_D_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_13_1_D_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_cropper_js_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a); /***/ }), /***/ 958: /*!*****************************************************************************************************************************************************************************************************************************************************************************!*\ !*** ./node_modules/babel-loader/lib!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--13-1!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!E:/git/2021项目/v3-H5/pages_basics/component/cropper.js?vue&type=script&lang=js& ***! \*****************************************************************************************************************************************************************************************************************************************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; /* WEBPACK VAR INJECTION */(function(uni) { var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ 4); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ 50)); var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ 52)); var ABS = Math.abs; var calcLen = function calcLen(v) { // distance between two coordinate return Math.sqrt(v.x * v.x + v.y * v.y); }; var calcAngle = function calcAngle(a, b) { // angle of the two vectors var l = calcLen(a) * calcLen(b); var cosValue; var angle; if (l) { cosValue = (a.x * b.x + a.y * b.y) / l; angle = Math.acos(Math.min(cosValue, 1)); angle = a.x * b.y - b.x * a.y > 0 ? -angle : angle; return angle * 180 / Math.PI; } return 0; }; var generateCanvasId = function generateCanvasId() { // generate a random string var seeds = 'abcdefghijklmnopqrstuvwxyz'; var arr = seeds.split('').concat(seeds.toUpperCase().split('')).concat('0123456789'.split('')); var m = arr.length; var i; while (m) { i = Math.floor(Math.random() * m--); var temp = arr[m]; arr[m] = arr[i]; arr[i] = temp; } return arr.slice(0, 16).join(''); }; var _default2 = { props: { width: { // width of the container type: [String, Number], default: '100%' }, height: { // height of the container type: [String, Number], default: '100%' }, cutWidth: { // cutter width type: [String, Number], default: '50%' }, cutHeight: { // cutter height type: [String, Number], default: 0 }, minWidth: { // minWidth of the cutter type: Number, default: 50 }, minHeight: { // minHeight of the cutter type: Number, default: 50 }, center: { // autoCenter type: Boolean, default: true }, src: String, disableScale: Boolean, // disable to zoom disableRotate: Boolean, disableTranslate: Boolean, disableCtrl: Boolean, // disable to resize the cutter boundDetect: Boolean, // open boundary detection freeBoundDetect: Boolean, // open boundary detection while doing rotation keepRatio: Boolean, // keep the ratio of the cutter disablePreview: Boolean, // disable preview after cutting showCtrlBorder: Boolean, // show cutter border resetCut: Boolean, // reset cut while img change fit: { type: Boolean, default: true }, imageCenter: Boolean, // auto center/middle for image maxZoom: { // maximum scaling factor type: Number, default: 10 // can not be Infinity in baidu-MiniProgram }, minZoom: { // minimum scaling factor type: Number, default: 1 }, angle: { // initial angle of rotation type: Number, default: 0 }, zoom: { // initial scaling factor type: Number, default: 1 }, offset: { // initial offset relative to the cutter left border type: Array, default: function _default() { return [0, 0]; } }, background: { type: String, default: '#000' }, canvasBackground: { // background for the exported image type: String, default: '#fff' }, canvasZoom: { // export multiples of the cutter size type: Number, default: 1 }, fileType: { type: String, default: 'png', validator: function validator(t) { return ['png', 'jpg'].includes(t); } }, quality: { type: Number, default: 1 }, maskType: { // type for mask type: String, default: "shadow" }, circleView: Boolean // circle clip view }, data: function data() { return { transform: { angle: 0, translate: { x: 0, y: 0 }, zoom: 1 }, corner: { left: 50, right: 50, bottom: 50, top: 50 }, image: { originWidth: 0, originHeight: 0, width: 0, height: 0 }, ctrlWidth: 0, ctrlHeight: 0, view: false, canvasId: '' }; }, computed: { transformMeta: function transformMeta() { var transform = this.transform; return "translate3d(".concat(transform.translate.x, "px, ").concat(transform.translate.y, "px, 0) rotate(").concat(transform.angle, "deg) scale(").concat(transform.zoom, ")"); }, ctrlStyle: function ctrlStyle() { var corner = this.corner; var cssStr = "left: ".concat(corner.left, "px;top: ").concat(corner.top, "px;right: ").concat(corner.right, "px;bottom: ").concat(corner.bottom, "px;"); if (this.maskType !== 'outline') { cssStr += "box-shadow: 0 0 0 50000rpx rgba(0,0,0, ".concat(this.view ? 0.8 : 0.4, ")"); } else { cssStr += "outline: rgba(0,0,0, ".concat(this.view ? 0.8 : 0.4, ") solid 5000px"); } return cssStr; } }, watch: { src: function src() { if (this.resetCut) this.resetCutReact(); this.initImage(); } }, created: function created() { var _this = this; this.canvasId = generateCanvasId(); uni.getSystemInfo().then(function (result) { result = result[1] || { windowWidth: 375, windowHeight: 736 }; _this.ratio = result.windowWidth / 750; _this.windowHeight = result.windowHeight; _this.init(); _this.initCanvas(); }); }, methods: { toPx: function toPx(str) { if (str.indexOf('%') !== -1) { return Math.floor(Number(str.replace('%', '')) / 100 * this.containerWidth); } if (str.indexOf('rpx') !== -1) { return Math.floor(Number(str.replace('rpx', '')) * this.ratio); } return Math.floor(Number(str.replace('px', ''))); }, initCanvas: function initCanvas() { var _this2 = this; var context = uni.createSelectorQuery().in(this); // get contianer size context.select('.nice-cropper').boundingClientRect(); context.exec(function (res) { _this2.containerWidth = res[0].width; _this2.containerHeight = res[0].height; _this2.initCut(); }); }, resetCutReact: function resetCutReact() { // init size and position of the cutter this.ctrlWidth = Math.min(this.toPx(this.cutWidth), this.containerWidth); if (this.cutHeight) { this.ctrlHeight = Math.min(this.toPx(this.cutHeight), this.containerHeight); } else { // 默认为正方形 this.ctrlHeight = Math.min(this.ctrlWidth, this.containerHeight); } var cornerStartX = this.center ? Math.floor((this.containerWidth - this.ctrlWidth) / 2) : 0; var cornerStartY = this.center ? Math.floor((this.containerHeight - this.ctrlHeight) / 2) : 0; this.cutRatio = this.ctrlHeight / this.ctrlWidth; this.corner = { left: cornerStartX, right: this.containerWidth - this.ctrlWidth - cornerStartX, top: cornerStartY, bottom: this.containerHeight - this.ctrlHeight - cornerStartY }; }, initCut: function initCut() { this.resetCutReact(); this.initImage(); }, initImage: function initImage() { var _this3 = this; return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() { var res, offset; return _regenerator.default.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: if (_this3.src) { _context.next = 2; break; } return _context.abrupt("return"); case 2: _context.prev = 2; _context.next = 5; return uni.getImageInfo({ src: _this3.src }); case 5: res = _context.sent; _this3.$emit('load', res); _this3.image.originWidth = res.width; _this3.image.originHeight = res.height; _this3.image.width = _this3.fit ? _this3.ctrlWidth : res.width; _this3.image.height = res.height / res.width * _this3.image.width; _this3.img = res.path; _context.next = 23; break; case 14: _context.prev = 14; _context.t0 = _context["catch"](2); console.error("图片信息获取失败:", _context.t0); _this3.$emit("error", _context.t0); // 使用控件尺寸作为默认值 _this3.image.originWidth = _this3.ctrlWidth; _this3.image.originHeight = _this3.ctrlHeight; _this3.image.width = _this3.ctrlWidth; _this3.image.height = _this3.ctrlHeight; _this3.img = null; case 23: offset = [0, 0]; if (_this3.imageCenter) { offset[0] = (_this3.ctrlWidth - _this3.image.width) / 2; offset[1] = (_this3.ctrlHeight - _this3.image.height) / 2; } if (Array.isArray(_this3.offset)) { offset[0] += _this3.offset[0] || 0; offset[1] += _this3.offset[1] || 0; } _this3.setTranslate(offset); _this3.setZoom(_this3.zoom); _this3.transform.angle = _this3.freeBoundDetect || !_this3.disableRotate ? _this3.angle : 0; _this3.setBoundary(); _this3.preview(); _this3.draw(); case 32: case "end": return _context.stop(); } } }, _callee, null, [[2, 14]]); }))(); }, init: function init() { this.pretouch = {}; this.handles = {}; this.preVector = { x: 0, y: 0 }; this.distance = 30; this.touch = {}; this.movetouch = {}; this.cutMode = false; this.params = { zoom: 1, deltaX: 0, deltaY: 0, diffX: 0, diffY: 0, angle: 0 }; }, start: function start(e) { if (!this.src) e.preventDefault(); var point = e.touches ? e.touches[0] : e; var touch = this.touch; var now = Date.now(); touch.startX = point.pageX; touch.startY = point.pageY; touch.startTime = now; this.doubleTap = false; this.view = false; clearTimeout(this.previewTimer); if (e.touches.length > 1) { var point2 = e.touches[1]; this.preVector = { x: point2.pageX - this.touch.startX, y: point2.pageY - this.touch.startY }; this.startDistance = calcLen(this.preVector); } else { var pretouch = this.pretouch; this.doubleTap = this.pretouch.time && now - this.pretouch.time < 300 && ABS(touch.startX - pretouch.startX) < 30 && ABS(touch.startY - pretouch.startY) < 30 && ABS(touch.startTime - pretouch.time) < 300; pretouch = { // reserve the last touch startX: this.touch.startX, startY: this.touch.startY, time: this.touch.startTime }; } }, move: function move(e) { if (!this.src) return; var point = e.touches ? e.touches[0] : e; if (e.touches.length > 1) { // multi touch var point2 = e.touches[1]; var v = { x: point2.pageX - point.pageX, y: point2.pageY - point.pageY }; if (this.preVector.x !== null) { if (this.startDistance) { // zoom var len = calcLen(v); this.params.zoom = calcLen(v) / this.startDistance; this.startDistance = len; this.cutMode && !this.disableCtrl ? this.setCut() : !this.disableScale && this.pinch(); } // rotate this.params.angle = calcAngle(v, this.preVector); this.cutMode && !this.disableCtrl ? this.setCut() : !this.disableRotate && this.rotate(); } this.preVector.x = v.x; this.preVector.y = v.y; } else { // translate var diffX = point.pageX - this.touch.startX; var diffY = point.pageY - this.touch.startY; this.params.diffY = diffY; this.params.diffX = diffX; if (this.movetouch.x) { this.params.deltaX = point.pageX - this.movetouch.x; this.params.deltaY = point.pageY - this.movetouch.y; } else { this.params.deltaX = this.params.deltaY = 0; } if (ABS(diffX) > 30 || ABS(diffY) > 30) { this.doubleTap = false; } this.cutMode && !this.disableCtrl ? this.setCut() : !this.disableTranslate && this.translate(); this.movetouch.x = point.pageX; this.movetouch.y = point.pageY; } !this.cutMode && this.setBoundary(); if (e.touches.length > 1) { e.preventDefault(); } }, end: function end() { this.doubleTap && this.$emit('doubleTap'); this.cutMode && this.setBoundary(); this.init(); !this.disablePreview && this.preview(); this.draw(); }, translate: function translate() { var transform = this.transform.translate; var meta = this.params; transform.x += meta.deltaX; transform.y += meta.deltaY; }, pinch: function pinch() { this.transform.zoom *= this.params.zoom; }, rotate: function rotate() { this.transform.angle += this.params.angle; }, setZoom: function setZoom(scale) { scale = Math.min(Math.max(Number(scale) || 1, this.minZoom), this.maxZoom); this.transform.zoom = scale; }, setTranslate: function setTranslate(offset) { if (Array.isArray(offset)) { var x = Number(offset[0]); var y = Number(offset[1]); this.transform.translate.x = isNaN(x) ? this.transform.translate.x : this.corner.left + x; this.transform.translate.y = isNaN(y) ? this.transform.translate.y : this.corner.top + y; } }, setRotate: function setRotate(angle) { this.transform.angle = Number(angle) || 0; }, setTransform: function setTransform(x, y, angle, scale) { this.setTranslate([x, y]); this.setZoom(scale); this.setRotate(angle); }, setCutMode: function setCutMode(type) { if (!this.src) return; this.cutMode = true; this.cutDirection = type; }, setCut: function setCut() { var corner = this.corner; var meta = this.params; this.setMeta(this.cutDirection, meta); // correct cutter position if (this.keepRatio) { if (this.cutDirection === 'lt' || this.cutDirection === 'rb') { meta.deltaY = meta.deltaX * this.cutRatio; } else { meta.deltaX = meta.deltaY / this.cutRatio; } } switch (this.cutDirection) { case 'lt': corner.top += meta.deltaY; corner.left += meta.deltaX; break; case 'rt': corner.top += meta.deltaY; corner.right -= this.keepRatio ? -meta.deltaX : meta.deltaX; break; case 'rb': corner.right -= meta.deltaX; corner.bottom -= meta.deltaY; break; case 'lb': corner.bottom -= meta.deltaY; corner.left += this.keepRatio ? -meta.deltaX : meta.deltaX; break; } this.ctrlWidth = this.containerWidth - corner.left - corner.right; this.ctrlHeight = this.containerHeight - corner.top - corner.bottom; }, setMeta: function setMeta(direction, meta) { var ctrlWidth = this.ctrlWidth, ctrlHeight = this.ctrlHeight, minWidth = this.minWidth, minHeight = this.minHeight; switch (direction) { case 'lt': if (meta.deltaX > 0 || meta.deltaY > 0) { meta.deltaX = Math.min(meta.deltaX, ctrlWidth - minWidth); meta.deltaY = Math.min(meta.deltaY, ctrlHeight - minHeight); } break; case 'rt': if (meta.deltaX < 0 || meta.deltaY > 0) { meta.deltaX = Math.max(meta.deltaX, minWidth - ctrlWidth); meta.deltaY = Math.min(meta.deltaY, ctrlHeight - minHeight); } break; case 'rb': if (meta.deltaX < 0 || meta.deltaY < 0) { meta.deltaX = Math.max(meta.deltaX, minWidth - ctrlWidth); meta.deltaY = Math.max(meta.deltaY, minHeight - ctrlHeight); } break; case 'lb': if (meta.deltaX > 0 || meta.deltaY < 0) { meta.deltaX = Math.min(meta.deltaX, ctrlWidth - minWidth); meta.deltaY = Math.max(meta.deltaY, minHeight - ctrlHeight); } break; } }, setBoundary: function setBoundary() { var zoom = this.transform.zoom; zoom = zoom < this.minZoom ? this.minZoom : zoom > this.maxZoom ? this.maxZoom : zoom; this.transform.zoom = zoom; if (!this.boundDetect || !this.disableRotate && !this.freeBoundDetect) return true; var translate = this.transform.translate; var corner = this.corner; var minX = corner.left - this.image.width + this.ctrlWidth - this.image.width * (zoom - 1) / 2; var maxX = corner.left + this.image.width * (zoom - 1) / 2; var minY = corner.top - this.image.height + this.ctrlHeight - this.image.height * (zoom - 1) / 2; var maxY = corner.top + this.image.height * (zoom - 1) / 2; translate.x = Math.floor(translate.x < minX ? minX : translate.x > maxX ? maxX : translate.x); translate.y = Math.floor(translate.y < minY ? minY : translate.y > maxY ? maxY : translate.y); }, preview: function preview() { var _this4 = this; clearTimeout(this.previewTimer); this.previewTimer = setTimeout(function () { _this4.view = true; }, 500); }, draw: function draw() { var _this5 = this; var context = uni.createCanvasContext(this.canvasId, this); var transform = this.transform; var corner = this.corner; var canvasZoom = this.canvasZoom; var img = this.image; context.save(); context.setFillStyle(this.canvasBackground); this.$emit('beforeDraw', context, transform); // beforeDraw hook var zoom = transform.zoom; context.fillRect(0, 0, this.ctrlWidth * canvasZoom, this.ctrlHeight * canvasZoom); // clear canvas context.translate((transform.translate.x - corner.left + img.width / 2) * canvasZoom, (transform.translate.y - corner.top + img.height / 2) * canvasZoom); // translate the canvas's orgin to the image center context.rotate(transform.angle * Math.PI / 180); context.translate(-img.width * zoom * 0.5 * canvasZoom, -img.height * zoom * 0.5 * canvasZoom); context.drawImage(this.img, 0, 0, img.width * zoom * canvasZoom, img.height * zoom * canvasZoom); context.restore(); this.$emit('afterDraw', context, { width: this.ctrlWidth * canvasZoom, height: this.ctrlHeight * canvasZoom }); // afterDraw hook context.draw(false, function () { uni.canvasToTempFilePath({ canvasId: _this5.canvasId, quality: _this5.quality || 1, fileType: _this5.fileType, success: function success(res) { _this5.$emit('cropped', res.tempFilePath, { originWidth: _this5.image.originWidth, originHeight: _this5.image.originHeight, width: _this5.ctrlWidth * canvasZoom, height: _this5.ctrlHeight * canvasZoom, scale: zoom, translate: { x: transform.translate.x, y: transform.translate.y }, rotate: transform.angle }); // draw callback } }, _this5); }); } } }; exports.default = _default2; /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"])) /***/ }) }]); //# sourceMappingURL=../../../.sourcemap/mp-weixin/pages_basics/common/vendor.js.map