| 1 |
- {"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":""}
|
