{"version":3,"sources":["webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/tn-cropper.vue?e3e2","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/tn-cropper.vue?3cec","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/tn-cropper.vue?ee24","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/tn-cropper.vue?c514","uni-app:///tuniao-ui/components/tn-cropper/tn-cropper.vue","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/tn-cropper.vue?b3d6","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/tn-cropper.vue?9e35","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/index.wxs?c6f7","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-cropper/index.wxs?1898"],"names":["name","props","imageUrl","type","default","height","width","isRound","borderStyle","scaleRatio","quality","returnBase64","rotateAngle","minScale","maxScale","custom","startCutting","loading","rotateIcon","data","CANVAS_ID","TIME_CUT_CENTER","ctx","cutX","cutY","imgWidth","imgHeight","imgTop","imgLeft","scale","angle","animation","animationTime","systemInfo","sizeChange","angleChange","resetChange","centerChange","watch","uni","src","success","fail","console","clearTimeout","mounted","setTimeout","methods","getLocalImage","url","resolve","reject","getCutImage","title","icon","xpos","ypos","imgUrl","r","translateX","translateY","destWidth","destHeight","fileType","base64","canvasId","x","y","params","draw","change","imageReset","imgComputeSize","imageLoad","moveStop","moveDuring","showLoading","mask","stop","back","angleChanged","setAngle"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAmT;AACnT;AAC8D;AACL;AACsC;;;AAG/F;AAC8M;AAC9M,gBAAgB,qNAAU;AAC1B,EAAE,gFAAM;AACR,EAAE,iRAAM;AACR,EAAE,0RAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,qRAAU;AACZ;AACA;;AAEA;AACyO;AACzO,WAAW,0PAAM,iBAAiB,kQAAM;;AAExC;AACe,gF;;;;;;;;;;;;AC3Bf;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;AAA8zB,CAAgB,4zBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eCwEl1B;EACAA;EACAC;IACA;IACAC;MACAC;MACAC;IACA;IACA;IACAC;MACAF;MACAC;IACA;IACA;IACAE;MACAH;MACAC;IACA;IACA;IACAG;MACAJ;MACAC;IACA;IACA;IACAI;MACAL;MACAC;IACA;IACA;IACAK;MACAN;MACAC;IACA;IACA;IACA;IACAM;MACAP;MACAC;IACA;IACA;IACAO;MACAR;MACAC;IACA;IACA;IACAQ;MACAT;MACAC;IACA;IACA;IACAS;MACAV;MACAC;IACA;IACA;IACAU;MACAX;MACAC;IACA;IACA;IACAW;MACAZ;MACAC;IACA;IACA;IACA;IACAY;MACAb;MACAC;IACA;IACA;IACAa;MACAd;MACAC;IACA;IACA;IACAc;MACAf;MACAC;IACA;EACA;EACAe;IACA;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAhC;MACA;MACAiC;MACAC;MACAC;MACAC;IACA;EACA;EACAC;IACApC;MAAA;MACA;MACA;MACAqC;QACAC;QACAC;UACA;UACA;UACA;UACA;QACA;QACAC;UACAC;UACA;UACA;UACA;QACA;MACA;IACA;IACA/B;MACA;MACA;MACA;IACA;IACAmB;MAAA;MACAa;MACA;QACA;UACA;QACA;MACA;IACA;IACA5B;MACA;QACA;MACA;IACA;EACA;EACA6B;IAAA;IACA;IACA;IACA;IACA;IACA;IACA;MACA;IACA;IACAC;MACA;IACA;EACA;EACAC;IACA;IACAC;MAAA;QAAA;UAAA;YAAA;cAAA;gBAAA;gBAAA,OACA;kBACAT;oBACAU;oBACAR;sBACAS;oBACA;oBACAR;sBACAS;oBACA;kBACA;gBACA;cAAA;gBAAA;cAAA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA;IACA;IACA;IACAC;MAAA;MACA;QACAb;UACAc;UACAC;QACA;QACA;MACA;MACA;MACA;QAAA;UAAA;UAAA;YAAA;cAAA;gBAAA;kBACA;kBACA7B;kBACAC,iEACA;kBACA6B;kBACAC;kBAGAC;kBAAA,KAEA;oBAAA;oBAAA;kBAAA;kBAAA;kBAAA,OACA;gBAAA;kBAAAA;gBAAA;kBAGA;kBACA;kBACA;kBACA;oBACAC;oBACAC;oBACAC;oBACA;oBACA;oBACA;oBACA;oBACA;kBACA;kBAEA;kBACA;;kBAEA;kBACA;oBACA;sBACAtD;sBACAD;sBACAwD;sBACAC;sBACAC;sBACArD;oBACA;oBACA;sBACAuC;sBACAe;sBACA1D;sBACAD;oBACA;oBAqBA;oBAMA;sBACAkC;wBACA0B;wBACAC;wBACAC;wBACA7D;wBACAD;wBACAoC;0BACA;0BACA;0BACAtB;0BACA;0BACA;wBACA;sBACA;oBACA;sBACAoB,yDACA6B;wBACAH;wBACAxB;0BACAtB;0BAIA;0BACA;wBACA;sBAAA,IACA;oBACA;kBAEA;gBAAA;gBAAA;kBAAA;cAAA;YAAA;UAAA;QAAA,CACA;QAAA,gBAzGAkD;UAAA;QAAA;MAAA,GAyGA;MACAA;IACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;QACA9C;MACA;QACA;UACAA;UACAD;QACA;UACAA;UACAC;QACA;MACA;QACA;QACAD;QACAC;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACA+C;MACA;MACAlC;MACA;IACA;IACA;IACAmC;MAAA;MACA9B;MACA;QACA;QACA;MACA;IACA;IACA;IACA+B;MACA/B;IACA;IACA;IACAgC;MACArC;QACAc;QACAwB;MACA;IACA;IACA;IACAC;IACA;IACAC;MACAxC;IACA;IACA;IACAyC;MACA;MACA;QACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;IACA;EACA;AACA;AAAA,2B;;;;;;;;;;;;;ACtdA;AAAA;AAAA;AAAA;AAA6iD,CAAgB,m+CAAG,EAAC,C;;;;;;;;;;;ACAjkD;AACA,OAAO,KAAU,EAAE,kBAKd;;;;;;;;;;;;;ACNL;AAAA;AAAA,wCAAmZ,CAAgB,mdAAG,EAAC,C;;;;;;;;;;;;ACAva;AAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA,M","file":"tuniao-ui/components/tn-cropper/tn-cropper.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-cropper.vue?vue&type=template&id=f1f47608&scoped=true&filter-modules=eyJ3eHMiOnsidHlwZSI6InNjcmlwdCIsImNvbnRlbnQiOiIiLCJzdGFydCI6MjE0MSwiYXR0cnMiOnsic3JjIjoiLi9pbmRleC53eHMiLCJsYW5nIjoid3hzIiwibW9kdWxlIjoid3hzIn0sImVuZCI6MjE0MX19&\"\nvar renderjs\nimport script from \"./tn-cropper.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-cropper.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-cropper.vue?vue&type=style&index=0&id=f1f47608&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../self software/HBuilderX.3.99.2023122611/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  \"f1f47608\",\n  null,\n  false,\n  components,\n  renderjs\n)\n\n/* custom blocks */\nimport block0 from \"./index.wxs?vue&type=custom&index=0&blockType=script&issuerPath=D%3A%5CCode2024%5C%E5%9B%BE%E9%B8%9F%E6%A8%A1%E6%9D%BF-%E7%A4%BE%E5%8C%BA%5Ctuniao-ui%5Ccomponents%5Ctn-cropper%5Ctn-cropper.vue&lang=wxs&module=wxs\"\nif (typeof block0 === 'function') block0(component)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-cropper/tn-cropper.vue\"\nexport default component.exports","export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--17-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-cropper.vue?vue&type=template&id=f1f47608&scoped=true&filter-modules=eyJ3eHMiOnsidHlwZSI6InNjcmlwdCIsImNvbnRlbnQiOiIiLCJzdGFydCI6MjE0MSwiYXR0cnMiOnsic3JjIjoiLi9pbmRleC53eHMiLCJsYW5nIjoid3hzIiwibW9kdWxlIjoid3hzIn0sImVuZCI6MjE0MX19&\"","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 \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-cropper.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-cropper.vue?vue&type=script&lang=js&\"","<template>\r\n  <view class=\"tn-cropper-class tn-cropper\" @touchmove.stop.prevent=\"stop\">\r\n    <image\r\n      v-if=\"imageUrl\"\r\n      :src=\"imageUrl\"\r\n      class=\"tn-cropper__image\"\r\n      :style=\"{\r\n        width: (imgWidth ? imgWidth : width) + 'px',\r\n        height: (imgHeight ? imgHeight : height) + 'px',\r\n        transitionDuration: (animation ? 0.3 : 0) + 's'\r\n      }\"\r\n      mode=\"widthFix\"\r\n      :data-minScale=\"minScale\"\r\n      :data-maxScale=\"maxScale\"\r\n      @load=\"imageLoad\"\r\n      @error=\"imageLoad\"\r\n      @touchstart=\"wxs.touchStart\"\r\n      @touchmove=\"wxs.touchMove\"\r\n      @touchend=\"wxs.touchEnd\"\r\n    ></image>\r\n    \r\n    <view\r\n      class=\"tn-cropper__wrapper\"\r\n      :style=\"{\r\n        width: width + 'px',\r\n        height: height + 'px',\r\n        borderRadius: isRound ? '50%' : '0'\r\n      }\"\r\n    >\r\n      <view\r\n        class=\"tn-cropper__border\"\r\n        :style=\"{\r\n          border: borderStyle,\r\n          borderRadius: isRound ? '50%' : '0',\r\n        }\"\r\n        :prop=\"props\"\r\n        :change:prop=\"wxs.propsChange\"\r\n        :data-width=\"width\"\r\n        :data-height=\"height\"\r\n        :data-windowHeight=\"systemInfo.windowHeight || 600\"\r\n        :data-windowWidth=\"systemInfo.windowWidth || 400\"\r\n        :data-imgTop=\"imgTop\"\r\n        :data-imgWidth=\"imgWidth\"\r\n        :data-imgHeight=\"imgHeight\"\r\n        :data-angle=\"angle\"\r\n      ></view>\r\n    </view>\r\n    \r\n    <canvas\r\n      class=\"tn-cropper__canvas\"\r\n      :style=\"{\r\n        width: width * scaleRatio + 'px',\r\n        height: height * scaleRatio + 'px'\r\n      }\"\r\n      :canvas-id=\"CANVAS_ID\"\r\n      :id=\"CANVAS_ID\"\r\n      :disable-scroll=\"true\"\r\n    ></canvas>\r\n    \r\n    <view\r\n      v-if=\"!custom\"\r\n      class=\"tn-cropper__tabbar\"\r\n    >\r\n      <view class=\"tn-cropper__tabbar__btn tn-cropper__tabber__cancel\" @tap.stop=\"back\">取消</view>\r\n      <view class=\"tn-cropper__tabbar__rotate\" :class=\"[`tn-icon-${rotateIcon}`]\" @tap.stop=\"setAngle\"></view>\r\n      <view class=\"tn-cropper__tabbar__btn tn-cropper__tabber__confirm\" @tap.stop=\"getCutImage\">完成</view>\r\n    </view>\r\n  </view>\n</template>\n\r\n<script src=\"./index.wxs\" lang=\"wxs\" module=\"wxs\"></script>\n<script>\r\n  export default {\r\n    name: 'tn-cropper',\r\n    props: {\r\n      // 图片路径\r\n      imageUrl: {\r\n        type: String,\r\n        default: ''\r\n      },\r\n      // 裁剪框高度 px\r\n      height: {\r\n        type: Number,\r\n        default: 280\r\n      },\r\n      // 裁剪框的宽度 px\r\n      width: {\r\n        type: Number,\r\n        default: 280\r\n      },\r\n      // 是否为圆形裁剪框\r\n      isRound: {\r\n        type: Boolean,\r\n        default: false\r\n      },\r\n      // 裁剪框边框样式\r\n      borderStyle: {\r\n        type: String,\r\n        default: '1rpx solid #FFF'\r\n      },\r\n      // 生成的图片尺寸相对于裁剪框的比例\r\n      scaleRatio: {\r\n        type: Number,\r\n        default: 1\r\n      },\r\n      // 裁剪后的图片质量\r\n      // 取值范围为：(0, 1]\r\n      quality: {\r\n        type: Number,\r\n        default: 0.8\r\n      },\r\n      // 是否返回base64(H5默认为base64)\r\n      returnBase64: {\r\n        type: Boolean,\r\n        default: false\r\n      },\r\n      // 图片旋转角度\r\n      rotateAngle: {\r\n        type: Number,\r\n        default: 0\r\n      },\r\n      // 图片最小缩放比\r\n      minScale: {\r\n        type: Number,\r\n        default: 0.5\r\n      },\r\n      // 图片最大缩放比\r\n      maxScale: {\r\n        type: Number,\r\n        default: 2\r\n      },\r\n      // 自定义操作栏(设置后会隐藏默认的底部操作栏)\r\n      custom: {\r\n        type: Boolean,\r\n        default: false\r\n      },\r\n      // 是否在值发生改变的时候开始裁剪\r\n      // custom为true时生效\r\n      startCutting: {\r\n        type: Boolean,\r\n        default: false\r\n      },\r\n      // 裁剪时是否显示loading\r\n      loading: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 旋转图片图标\r\n      rotateIcon: {\r\n        type: String,\r\n        default: 'circle-arrow'\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        // canvas容器id\r\n        CANVAS_ID: 'tn-cropper-canvas',\r\n        // 移动裁剪超时时间定时器\r\n        TIME_CUT_CENTER: null,\r\n        // canvas容器\r\n        ctx: null,\r\n        // 画布x轴起点\r\n        cutX: 0,\r\n        // 画布y轴起点\r\n        cutY: 0,\r\n        // 图片宽度\r\n        imgWidth: 0,\r\n        // 图片高度\r\n        imgHeight: 0,\r\n        // 图片底部位置\r\n        imgTop: 0,\r\n        // 图片左边位置\r\n        imgLeft: 0,\r\n        // 图片缩放比\r\n        scale: 1,\r\n        // 图片旋转角度\r\n        angle: 0,\r\n        // 开启动画过渡效果\r\n        animation: false,\r\n        // 动画定时器\r\n        animationTime: null,\r\n        // 系统信息\r\n        systemInfo: {},\r\n        // 传递的参数\r\n        props: '',\r\n        // 标记是否发生改变\r\n        sizeChange: 0,\r\n        angleChange: 0,\r\n        resetChange: 0,\r\n        centerChange: 0\r\n      }\r\n    },\r\n    watch: {\r\n      imageUrl(val) {\r\n        this.imageReset()\r\n        this.showLoading()\r\n        uni.getImageInfo({\r\n          src: val,\r\n          success: (res) => {\r\n            // 计算图片尺寸\r\n            this.imgComputeSize(res.width, res.height)\r\n            this.angleChange++\r\n            this.props = `3,${this.angleChange}`\r\n          },\r\n          fail: (err) => {\r\n            console.log(err);\r\n            this.imgComputeSize()\r\n            this.angleChange++\r\n            this.props = `3,${this.angleChange}`\r\n          }\r\n        })\r\n      },\r\n      rotateAngle(val) {\r\n        this.animation = true\r\n        this.angle = val\r\n        this.angleChanged(val)\r\n      },\r\n      animation(val) {\r\n        clearTimeout(this.animationTime)\r\n        if (val) {\r\n          this.animationTime = setTimeout(() => {\r\n            this.animation = false\r\n          }, 200)\r\n        }\r\n      },\r\n      startCutting(val) {\r\n        if (this.custom && val) {\r\n          this.getCutImage()\r\n        }\r\n      }\r\n    },\r\n    mounted() {\r\n      this.systemInfo = uni.getSystemInfoSync()\r\n      this.imgTop = this.systemInfo.windowHeight / 2\r\n      this.imgLeft = this.systemInfo.windowWidth / 2\r\n      this.ctx = uni.createCanvasContext(this.CANVAS_ID, this)\r\n      // 初始化\r\n      this.$nextTick(() => {\r\n        this.props = '1,1'\r\n      })\r\n      setTimeout(() => {\r\n        this.$emit('ready', {})\r\n      }, 200)\r\n    },\r\n    methods: {\r\n      // 将网络图片转换为本地图片【同步执行】\r\n      async getLocalImage(url) {\r\n        return await new Promise((resolve, reject) => {\r\n          uni.downloadFile({\r\n            url: url,\r\n            success: (res) => {\r\n              resolve(res.tempFilePath)\r\n            },\r\n            fail: (err) => {\r\n              reject(false)\r\n            }\r\n          })\r\n        })\r\n      },\r\n      // 返回裁剪后的图片信息\r\n      getCutImage() {\r\n        if (!this.imageUrl) {\r\n          uni.showToast({\r\n            title: '请选择图片',\r\n            icon: 'none'\r\n          })\r\n          return\r\n        }\r\n        this.loading && this.showLoading()\r\n        const draw = async () => {\r\n          // 图片实际大小\r\n          let imgWidth = this.imgWidth * this.scale * this.scaleRatio\r\n          let imgHeight = this.imgHeight * this.scale * this.scaleRatio\r\n          // canvas和图片的相对距离\r\n          let xpos = this.imgLeft - this.cutX\r\n          let ypos = this.imgTop - this.cutY\r\n          \r\n          \r\n          let imgUrl = this.imageUrl\r\n          // #ifdef APP-PLUS || MP-WEIXIN\r\n          if (~this.imageUrl.indexOf('https:')) {\r\n            imgUrl = await this.getLocalImage(this.imageUrl)\r\n          }\r\n          // #endif\r\n          // 旋转画布\r\n          this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio)\r\n          // 如果时圆形则截取圆形\r\n          if (this.isRound) {\r\n            const r = this.width > this.height ? Math.floor(this.height / 2) : Math.floor(this.width / 2)\r\n            let translateX = Math.floor(this.width / 2)\r\n            let translateY = Math.floor(this.height / 2)\r\n            this.ctx.beginPath()\r\n            this.ctx.arc(translateX - (xpos * this.scaleRatio), translateY - (ypos * this.scaleRatio), r, 0, (360 * Math.PI) / 180)\r\n            this.ctx.closePath()\r\n            this.ctx.stroke()\r\n            this.ctx.clip()\r\n          }\r\n          \r\n          this.ctx.rotate((this.angle * Math.PI) / 180)\r\n          this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight)\r\n          \r\n          // 清空后再继续绘制\r\n          this.ctx.draw(false, () => {\r\n            let params = {\r\n              width: this.width * this.scaleRatio,\r\n              height: Math.round(this.height * this.scaleRatio),\r\n              destWidth: this.width * this.scaleRatio,\r\n              destHeight: Math.round(this.height) * this.scaleRatio,\r\n              fileType: 'png',\r\n              quality: this.quality\r\n            }\r\n            let data = {\r\n              url: '',\r\n              base64: '',\r\n              width: this.width * this.scaleRatio,\r\n              height: this.height * this.scaleRatio\r\n            }\r\n            \r\n            // #ifdef MP-ALIPAY\r\n            if (this.returnBase64) {\r\n              this.ctx.toDataURL(params).then((urlData) => {\r\n                data.base64 = urlData\r\n                this.loading && uni.hideLoading()\r\n                this.$emit('cropper', data)\r\n              })\r\n            } else {\r\n              this.ctx.toTempFilePath({\r\n                ...params,\r\n                success: (res) => {\r\n                  data.url = res.apFilePath\r\n                  this.loading && uni.hideLoading()\r\n                  this.$emit('cropper', data)\r\n                }\r\n              })\r\n            }\r\n            // #endif\r\n            \r\n            let base64Flag = this.returnBase64\r\n            // #ifndef MP-ALIPAY\r\n            // #ifdef MP-BAIDU || MP-TOUTIAO || H5\r\n            base64Flag = false\r\n            // #endif\r\n            \r\n            if (base64Flag) {\r\n              uni.canvasGetImageData({\r\n                canvasId: this.CANVAS_ID,\r\n                x: 0,\r\n                y: 0,\r\n                width: this.width * this.scaleRatio,\r\n                height: Math.round(this.height * this.scaleRatio),\r\n                success: (res) => {\r\n                  const arrayBuffer = new Uint8Array(res.data)\r\n                  const base64 = uni.arrayBufferToBase64(arrayBuffer)\r\n                  data.base64 = base64\r\n                  this.loading && uni.hideLoading()\r\n                  this.$emit('cropper', data)\r\n                }\r\n              }, this)\r\n            } else {\r\n              uni.canvasToTempFilePath({\r\n                ...params,\r\n                canvasId: this.CANVAS_ID,\r\n                success: (res) => {\r\n                  data.url = res.tempFilePath\r\n                  // #ifdef H5\r\n                  data.base64 = res.tempFilePath\r\n                  // #endif\r\n                  this.loading && uni.hideLoading()\r\n                  this.$emit('cropper', data)\r\n                }\r\n              }, this)\r\n            }\r\n            // #endif\r\n          })\r\n        }\r\n        draw()\r\n      },\r\n      // 修改图片后触发的函数\r\n      change(e) {\r\n        this.cutX = e.cutX || 0\r\n        this.cutY = e.cutY || 0\r\n        this.imgWidth = e.imgWidth || this.imgWidth\r\n        this.imgHeight = e.imgHeight || this.imgHeight\r\n        this.scale = e.scale || 1\r\n        this.angle = e.angle || 0\r\n        this.imgTop = e.imgTop || 0\r\n        this.imgLeft = e.imgLeft || 0\r\n      },\r\n      // 重置图片\r\n      imageReset() {\r\n        this.scale = 1\r\n        this.angle = 0\r\n        let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync()\r\n        this.imgTop = systemInfo.windowHeight / 2\r\n        this.imgLeft = systemInfo.windowWidth / 2\r\n        this.resetChange++\r\n        this.props = `4,${this.resetChange}`\r\n        // 初始旋转角度\r\n        this.$emit('initAngle', {})\r\n      },\r\n      // 图片的生成的尺寸\r\n      imgComputeSize(width, height) {\r\n        // 默认按图片的最小边 = 对应的裁剪框尺寸\r\n        let imgWidth = width,\r\n          imgHeight = height;\r\n        if (imgWidth && imgHeight) {\r\n          if (imgWidth / imgHeight > this.width / this.height) {\r\n            imgHeight = this.height\r\n            imgWidth = (width / height) * imgHeight\r\n          } else {\r\n            imgWidth = this.width\r\n            imgHeight = (height / width) * imgWidth\r\n          }\r\n        } else {\r\n          let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync()\r\n          imgWidth = systemInfo.windowWidth\r\n          imgHeight = 0\r\n        }\r\n        this.imgWidth = imgWidth\r\n        this.imgHeight = imgHeight\r\n        this.sizeChange++\r\n        this.props = `2,${this.sizeChange}`\r\n      },\r\n      // 图片加载完毕\r\n      imageLoad(e) {\r\n        this.imageReset()\r\n        uni.hideLoading()\r\n        this.$emit('imageLoad', {})\r\n      },\r\n      // 移动结束\r\n      moveStop() {\r\n        clearTimeout(this.TIME_CUT_CENTER)\r\n        this.TIME_CUT_CENTER = setTimeout(() => {\r\n          this.centerChange++\r\n          this.props = `5,${this.centerChange}`\r\n        }, 688)\r\n      },\r\n      // 移动中\r\n      moveDuring() {\r\n        clearTimeout(this.TIME_CUT_CENTER)\r\n      },\r\n      // 显示加载框\r\n      showLoading() {\r\n        uni.showLoading({\r\n          title: '请稍等......',\r\n          mask: true\r\n        })\r\n      },\r\n      // 停止\r\n      stop() {},\r\n      // 取消/返回\r\n      back() {\r\n        uni.navigateBack()\r\n      },\r\n      // 角度改变\r\n      angleChanged(val) {\r\n        this.moveStop()\r\n        if (val % 90) {\r\n          this.angle = Math.round(val / 90) * 90\r\n        }\r\n        this.angleChange++\r\n        this.props = `3,${this.angleChange}`\r\n      },\r\n      // 设置角度\r\n      setAngle() {\r\n        this.animation = true\r\n        this.angle = this.angle + 90\r\n        this.angleChanged(this.angle)\r\n      }\r\n    }\r\n  }\n</script>\n\n<style lang=\"scss\" scoped>\r\n  \r\n  .tn-cropper {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    // background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);\r\n    background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b);\r\n    // background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423);\r\n    // background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a);\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 1;\r\n    \r\n    &__image {\r\n      width: 100%;\r\n      border-style: none;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      z-index: 2;\r\n      -webkit-backface-visibility: hidden;\r\n      backface-visibility: hidden;\r\n      transform-origin: center;\r\n    }\r\n    \r\n    &__canvas {\r\n      position: fixed;\r\n      z-index: 10;\r\n      left: -2000px;\r\n      top: -2000px;\r\n      pointer-events: none;\r\n    }\r\n    \r\n    &__wrapper {\r\n      position: fixed;\r\n      z-index: 4;\r\n      left: 50%;\r\n      top: 50%;\r\n      transform: translate(-50%, -50%);\r\n      border: 3000px solid rgba(0, 0, 0, 0.55);\r\n      pointer-events: none;\r\n      box-sizing: content-box;\r\n    }\r\n    \r\n    &__border {\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      box-sizing: border-box;\r\n      pointer-events: none;\r\n    }\r\n    \r\n    &__tabbar {\r\n      width: 100%;\r\n      height: 120rpx;\r\n      padding: 0 40rpx;\r\n      box-sizing: border-box;\r\n      position: fixed;\r\n      left: 0;\r\n      bottom: 0;\r\n      z-index: 99;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      color: #FFFFFF;\r\n      font-size: 32rpx;\r\n      \r\n      &::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        right: 0;\r\n        left: 0;\r\n        border-top: 1rpx solid rgba(255, 255, 255, 0.2);\r\n        -webkit-transform: scaleY(0.5) translateZ(0);\r\n        transform: scaleY(0.5) translateZ(0);\r\n        transform-origin: 0 100%;\r\n      }\r\n      \r\n      &__btn {\r\n        height: 80rpx;\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n      \r\n      &__rotate {\r\n        width: 44rpx;\r\n        height: 44rpx;\r\n        font-size: 40rpx;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\n</style>\n","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-cropper.vue?vue&type=style&index=0&id=f1f47608&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-cropper.vue?vue&type=style&index=0&id=f1f47608&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\n    if(module.hot) {\n      // 1732781354135\n      var cssReload = require(\"D:/self software/HBuilderX.3.99.2023122611/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  ","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-filter-loader/index.js!./index.wxs?vue&type=custom&index=0&blockType=script&issuerPath=D%3A%5CCode2024%5C%E5%9B%BE%E9%B8%9F%E6%A8%A1%E6%9D%BF-%E7%A4%BE%E5%8C%BA%5Ctuniao-ui%5Ccomponents%5Ctn-cropper%5Ctn-cropper.vue&lang=wxs&module=wxs\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-filter-loader/index.js!./index.wxs?vue&type=custom&index=0&blockType=script&issuerPath=D%3A%5CCode2024%5C%E5%9B%BE%E9%B8%9F%E6%A8%A1%E6%9D%BF-%E7%A4%BE%E5%8C%BA%5Ctuniao-ui%5Ccomponents%5Ctn-cropper%5Ctn-cropper.vue&lang=wxs&module=wxs\"","export default function (Component) {\n       if(!Component.options.wxsCallMethods){\n         Component.options.wxsCallMethods = []\n       }\n       Component.options.wxsCallMethods.push('moveDuring')\nComponent.options.wxsCallMethods.push('moveStop')\nComponent.options.wxsCallMethods.push('change')\n     }"],"sourceRoot":""}