{"version":3,"sources":["webpack:///./src/components/FNCCropper.vue?a464","webpack:///src/components/FNCCropper.vue","webpack:///./src/components/FNCCropper.vue?930a","webpack:///./src/components/FNCCropper.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","style","width","height","ref","attrs","option","img","size","outputType","full","canMove","canMoveBox","original","autoCrop","fixed","fixedNumber","centerBox","infoTrue","fixedBox","staticRenderFns","props","imageUrl","type","String","required","default","Object","info","outputSize","canScale","autoCropWidth","autoCropHeight","data","uploadData","methods","setAvatarBase64","src","callback","_this","image","Image","Math","random","crossOrigin","onload","base64","transBase64FromImage","canvas","document","createElement","ctx","getContext","drawImage","toDataURL","$Message","loading","content","duration","host","$get","url","then","res","code","name","substring","lastIndexOf","length","key","policy","encodedPolicy","OSSAccessKeyId","accessId","success_action_status","signature","postSignature","$refs","cropper","getCropBlob","formData","FormData","append","$post","header","destroy","success","background","$emit","created","component"],"mappings":"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","file":"js/fnc-components-FNCCropper.cab90421.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{style:({width: _vm.width,height: _vm.height})},[_c('vueCropper',{ref:\"cropper\",attrs:{\"img\":_vm.option.img,\"outputSize\":_vm.option.size,\"outputType\":_vm.option.outputType,\"info\":true,\"full\":_vm.option.full,\"canMove\":_vm.option.canMove,\"canMoveBox\":_vm.option.canMoveBox,\"original\":_vm.option.original,\"autoCrop\":_vm.option.autoCrop,\"fixed\":_vm.option.fixed,\"fixedNumber\":_vm.option.fixedNumber,\"centerBox\":_vm.option.centerBox,\"infoTrue\":_vm.option.infoTrue,\"fixedBox\":_vm.option.fixedBox}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div :style=\"{width,height}\">\r\n    <vueCropper\r\n      ref=\"cropper\"\r\n      :img=\"option.img\"\r\n      :outputSize=\"option.size\"\r\n      :outputType=\"option.outputType\"\r\n      :info=\"true\"\r\n      :full=\"option.full\"\r\n      :canMove=\"option.canMove\"\r\n      :canMoveBox=\"option.canMoveBox\"\r\n      :original=\"option.original\"\r\n      :autoCrop=\"option.autoCrop\"\r\n      :fixed=\"option.fixed\"\r\n      :fixedNumber=\"option.fixedNumber\"\r\n      :centerBox=\"option.centerBox\"\r\n      :infoTrue=\"option.infoTrue\"\r\n      :fixedBox=\"option.fixedBox\"\r\n    ></vueCropper>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  props: {\r\n    imageUrl: {\r\n      type: String,\r\n      required: true, \r\n    },\r\n    width: {\r\n      type: String,\r\n      default: '580px'\r\n    },\r\n    height: {\r\n      type: String,\r\n      default: '428px'\r\n    },\r\n    option: {\r\n      // 裁剪组件的基础配置option\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          img: \"\", // 裁剪图片的地址\r\n          info: true, // 裁剪框的大小信息\r\n          outputSize: 1, // 裁剪生成图片的质量\r\n          outputType: \"png\", // 裁剪生成图片的格式\r\n          canScale: true, // 图片是否允许滚轮缩放\r\n          autoCrop: true, // 是否默认生成截图框\r\n          autoCropWidth: 600, // 默认生成截图框宽度\r\n          autoCropHeight: 500, // 默认生成截图框高度\r\n          fixedBox: false, // 固定截图框大小 不允许改变\r\n          fixed: true, // 是否开启截图框宽高固定比例\r\n          fixedNumber: [1920,1080], // 截图框的宽高比例\r\n          full: true, // 是否输出原图比例的截图\r\n          canMoveBox: true, // 截图框能否拖动\r\n          original: false, // 上传图片按照原始比例渲染\r\n          centerBox: true, // 截图框是否被限制在图片里面\r\n          infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高\r\n        };\r\n      },\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      uploadData: {},\r\n    };\r\n  },\r\n  methods: {\r\n    setAvatarBase64(src, callback) {\r\n      let _this = this;\r\n      let image = new Image();\r\n      // 处理缓存\r\n      image.src = src + \"?v=\" + Math.random();\r\n      // 支持跨域图片\r\n      image.crossOrigin = \"*\";\r\n      image.onload = function () {\r\n        let base64 = _this.transBase64FromImage(image);\r\n        callback && callback(base64);\r\n      };\r\n    },\r\n    // 将网络图片转换成base64格式\r\n    transBase64FromImage(image) {\r\n      let canvas = document.createElement(\"canvas\");\r\n      canvas.width = image.width;\r\n      canvas.height = image.height;\r\n      let ctx = canvas.getContext(\"2d\");\r\n      ctx.drawImage(image, 0, 0, image.width, image.height);\r\n      // 可选其他值 image/jpeg\r\n      return canvas.toDataURL(\"image/png\");\r\n    },\r\n    //确定裁剪\r\n    async save() {\r\n      this.$Message.loading({\r\n        content: \"正在裁剪，请稍等...\",\r\n        duration: 0,\r\n      });\r\n      if (!this.uploadData.host) {\r\n        await this.$get({\r\n         url: \"/datamsg/api/common/file/getWebPolicy?bucketName=fnc\"\r\n        }).then((res) => {\r\n          if (res.code == 200) {\r\n            let name = this.imageUrl.substring(\r\n              this.imageUrl.lastIndexOf(\"/\") + 1,\r\n              this.imageUrl.lastIndexOf(\"?\") == -1 ? this.imageUrl.length +1 : this.imageUrl.lastIndexOf(\"?\")\r\n            );\r\n            this.uploadData = {\r\n              name: name,\r\n              host: res.data.host,\r\n              key: res.data.key + name,\r\n              policy: res.data.encodedPolicy,\r\n              OSSAccessKeyId: res.data.accessId,\r\n              success_action_status: \"200\",\r\n              signature: res.data.postSignature,\r\n            };\r\n          }\r\n        });\r\n      }\r\n      this.$refs.cropper.getCropBlob((data) => {\r\n        let formData = new FormData();\r\n        formData.append(\"name\", this.uploadData.name);\r\n        formData.append(\"host\", this.uploadData.host);\r\n        formData.append(\"key\", this.uploadData.key);\r\n        formData.append(\"policy\", this.uploadData.policy);\r\n        formData.append(\"OSSAccessKeyId\", this.uploadData.OSSAccessKeyId);\r\n        formData.append(\r\n          \"success_action_status\",\r\n          this.uploadData.success_action_status\r\n        );\r\n        formData.append(\"signature\", this.uploadData.signature);\r\n        formData.append(\"file\", data);\r\n        this.$post({url:this.uploadData.host, data:formData, header:{\r\n          \"Content-Type\": \"multipart/form-data\",\r\n        }}).then((res) => {\r\n          this.$Message.destroy();\r\n          this.$Message.success({\r\n            background: true,\r\n            content: \"裁剪完成\",\r\n          });\r\n          this.$emit(\"getImgUrl\", this.uploadData.host + this.uploadData.key);\r\n        });\r\n      });\r\n    },\r\n  },\r\n  created() {\r\n    let _this = this;\r\n    this.setAvatarBase64(this.imageUrl, (base64) => {\r\n      _this.option.img = base64;\r\n    });\r\n  }\r\n};\r\n</script>\r\n    \r\n<style scoped lang='less'>\r\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FNCCropper.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FNCCropper.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FNCCropper.vue?vue&type=template&id=559fbfa4&scoped=true&\"\nimport script from \"./FNCCropper.vue?vue&type=script&lang=js&\"\nexport * from \"./FNCCropper.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"559fbfa4\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}