devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp实现图片手指自由旋转剪裁功能（自定义剪裁区域）_sysinfo.platform

作者：weixin_40725706 | 2024-03-22 10:10:27

赞

踩

sysinfo.platform

1.新建公共组件components / cropping / cropping.vue 将代码复制进去

 复制代码放入cropping.vue

  1. <template name="yq-avatar">
  2. 	<view class="croppage">
  3. 		<canvas canvas-id="avatar-canvas" id="avatar-canvas" class="my-canvas" :style="{top: sT, height: csH}"
  4. 			:disable-scroll="false"></canvas>
  5. 		<canvas canvas-id="oper-canvas" id="oper-canvas" class="oper-canvas" :style="{top: sT1, height: csH1}"
  6. 			:disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd">
  7. 		</canvas>
  8. 		<canvas canvas-id="prv-canvas" id="prv-canvas" class="prv-canvas" :disable-scroll="false" @touchstart="fHideImg"
  9. 			:style="{ height: csH, top: pT }">
  10. 		</canvas>
  11. 		<view class="oper-wrapper" :style="{top:tp}">
  12. 			<view class="oper">
  13. 				<view class="btn-wrapper">
  14. 					<view @click="rechoose" hover-class="hover" :style="{width: bW}"><text>重选</text></view>
  15. 					<view @click="fUpload" hover-class="hover" :style="{width: bW}"><text>确定</text></view>
  16. 				</view>
  17. 			</view>
  18. 		</view>
  19. 	</view>
  20. </template>
  21.  
  22. <script>
  23. 	const tH = 50;
  24. 	export default {
  25. 		data() {
  26. 			return {
  27. 				sT1num: 0,
  28. 				csH1: '0px',
  29. 				sT1: 0,
  30. 				csH: '0px',
  31. 				sD: 'none',
  32. 				sT: '-10000px',
  33. 				pT: '-10000px',
  34. 				iS: {},
  35. 				sS: {},
  36. 				bW: '19%',
  37. 				bD: 'flex',
  38. 				tp: 0,
  39. 			};
  40. 		},
  41. 		props: {
  42. 			avatarSrc: '',
  43. 			avatarStyle: '',
  44. 			selWidth: '',
  45. 			selHeight: '',
  46. 			expWidth: '',
  47. 			expHeight: '',
  48. 			minScale: '',
  49. 			maxScale: '',
  50. 			canScale: '',
  51. 			canRotate: '',
  52. 			lockWidth: '',
  53. 			lockHeight: '',
  54. 			stretch: '',
  55. 			lock: '',
  56. 			fileType: '',
  57. 			noTab: '',
  58. 			inner: '',
  59. 			quality: '',
  60. 			index: '',
  61. 			bgImage: '',
  62. 		},
  63. 		created() {
  64. 			this.cc = uni.createCanvasContext('avatar-canvas', this);
  65. 			this.cco = uni.createCanvasContext('oper-canvas', this);
  66. 			this.ccp = uni.createCanvasContext('prv-canvas', this);
  67. 			this.qlty = parseFloat(this.quality) || 1; //画质
  68. 			this.letRotate = (this.canRotate === false || this.inner === true || this.inner === 'true' || this
  69. 				.canRotate === 'false') ? 0 : 1; //是否旋转
  70. 			this.letScale = (this.canScale === false || this.canScale === 'false') ? 0 : 1; //是否放大
  71. 			this.isin = (this.inner === true || this.inner === 'true') ? 1 : 0;
  72. 			this.indx = this.index || undefined; //禁止旋转并在图片范围内移动
  73. 			this.mnScale = parseFloat(this.minScale) || 0.3; //缩小比例
  74. 			this.mxScale = parseFloat(this.maxScale) || 4; //放大比列
  75. 			this.noBar = (this.noTab === true || this.noTab === 'true') ? 1 : 0; //是否存在nobar
  76. 			this.stc = this.stretch; //自动铺满
  77. 			this.lck = this.lock; //锁定图方向 x y long short longSel shortSel
  78. 			this.fType = this.fileType === 'jpg' ? 'jpg' : 'png';
  79. 			if (this.isin || !this.letRotate) {
  80. 				this.bW = '24%';
  81. 				this.bD = 'none';
  82. 			} else {
  83. 				this.bW = '19%';
  84. 				this.bD = 'flex';
  85. 			}
  86. 			if (this.noBar) {
  87. 				this.fWindowResize();
  88. 			} else {
  89. 				uni.showTabBar({
  90. 					fail: () => {
  91. 						this.noBar = 1;
  92. 					},
  93. 					success: () => {
  94. 						this.noBar = 0;
  95. 					},
  96. 					complete: (res) => {
  97. 						this.fWindowResize();
  98. 					}
  99. 				});
  100. 			}
  101. 		},
  102. 		methods: {
  103. 			//重选
  104. 			rechoose() {
  105. 				const that = this
  106. 				uni.chooseImage({
  107. 					count: 1,
  108. 					sizeType: ['original', 'compressed'],
  109. 					sourceType: ["album"],
  110. 					success: (res) => {
  111. 						that.sT1 = that.sT
  112. 						that.csH1 = that.csH
  113. 						that.fSelect(res.tempFilePaths[0])
  114. 					}
  115. 				});
  116. 			},
  117. 			//初始化各种数据
  118. 			fWindowResize() {
  119. 				let sysInfo = uni.getSystemInfoSync();
  120. 				this.platform = sysInfo.platform;
  121. 				this.wW = sysInfo.windowWidth;
  122. 				// #ifndef H5
  123. 				let phone = uni.getSystemInfoSync().platform
  124. 				if (phone == 'ios') {
  125. 					let h = uni.upx2px(60); //将rpx单位值转换成px 裁剪框自己
  126. 					let b = uni.upx2px(100); //底部按钮
  127. 					this.sT1 = (sysInfo.windowHeight - h - b) / 2 + 'px' //裁剪框距离顶部+px
  128. 					this.sT1num = (sysInfo.windowHeight - h - b) / 2 //裁剪框距离顶部不+px
  129. 				} else {
  130. 					this.drawTop = 0;
  131. 				}
  132. 				// #endif
  133. 				// #ifndef MP-ALIPAY
  134. 				this.wH = sysInfo.windowHeight; //设备高
  135. 				if (!this.noBar) this.wH += tH; //th=50
  136. 				this.csH = this.wH - tH + 'px'; //高=设备高-50(导航)
  137. 				if (phone == 'ios') { //适配ios
  138. 					this.csH1 = (this.wH - 50) / 2 + 'px'
  139. 				} else {
  140. 					this.csH1 = this.wH - tH + 'px';
  141. 				}
  142. 				// #endif
  143. 				this.tp = this.csH;
  144. 				this.pxRatio = this.wW / 750; //设备宽/750  比列
  145. 				this.expWidth && (this.eW = this.expWidth.toString().indexOf('upx') >= 0 ? parseInt(this.expWidth) * this
  146. 					.pxRatio : parseInt(this.expWidth));
  147. 				this.expHeight && (this.eH = this.expHeight.toString().indexOf('upx') >= 0 ? parseInt(this.expHeight) *
  148. 					this.pxRatio : parseInt(this.expHeight));
  149. 				this.fHideImg();
  150. 			},
  151. 			fSelect(r) {
  152. 				if (this.fSelecting) return;
  153. 				this.fSelecting = true;
  154. 				setTimeout(() => {
  155. 					this.fSelecting = false;
  156. 				}, 500); //防抖
  157. 				let path = this.imgPath = r; //需要剪裁的图片路径
  158. 				// 获取图片信息
  159. 				uni.getImageInfo({
  160. 					src: path,
  161. 					success: r => {
  162. 						this.imgWidth = r.width;
  163. 						this.imgHeight = r.height;
  164. 						this.path = path;
  165. 						if (!this.hasSel) {
  166. 							let style = this.sS || {};
  167. 							if (this.selWidth && this.selHeight) { //设置的剪裁区域宽高
  168. 								let sW = this.selWidth.toString().indexOf('upx') >= 0 ?
  169. 									parseInt(this.selWidth) * this.pxRatio : parseInt(
  170. 										this.selWidth),
  171. 									sH = this.selHeight.toString().indexOf('upx') >= 0 ?
  172. 									parseInt(this.selHeight) * this.pxRatio : parseInt(
  173. 										this.selHeight);
  174. 								style.width = sW + 'px';
  175. 								style.height = sH + 'px';
  176. 								style.top = ((this.wH - sH - tH) | 0) / 2 + 'px';
  177. 								style.left = ((this.wW - sW) | 0) / 2 + 'px';
  178. 								// }
  179. 							} else {
  180. 								uni.showModal({
  181. 									title: '裁剪框的宽或高没有设置',
  182. 									showCancel: false
  183. 								})
  184. 								return;
  185. 							}
  186. 							this.sS = style;
  187. 						}
  188. 						if (this.noBar) {
  189. 							setTimeout(() => {
  190. 								this.fDrawInit(true);
  191. 							}, 200)
  192. 						} else {
  193. 							uni.hideTabBar({
  194. 								complete: () => {
  195. 									setTimeout(() => {
  196. 										this.fDrawInit(true);
  197. 									}, 200)
  198. 								}
  199. 							});
  200. 						}
  201. 					},
  202. 					fail: () => {
  203. 						uni.showToast({
  204. 							title: "请选择正确图片",
  205. 							duration: 2000,
  206. 						})
  207. 					},
  208. 					complete() {
  209. 						uni.hideLoading();
  210. 					}
  211. 				});
  212. 			},
  213. 			//剪裁确定
  214. 			fUpload() {
  215. 				uni.showLoading({
  216. 					title: '图片上传中...',
  217. 					mask: true
  218. 				});
  219. 				if (this.fUploading) return;
  220. 				this.fUploading = true;
  221. 				setTimeout(() => {
  222. 					this.fUploading = false;
  223. 				}, 1000)
  224. 				let style = this.sS,
  225. 					x = parseInt(style.left),
  226. 					y = parseInt(style.top),
  227. 					width = parseInt(style.width),
  228. 					height = parseInt(style.height),
  229. 					expWidth = this.eW || (width * this.pixelRatio),
  230. 					expHeight = this.eH || (height * this.pixelRatio);
  231. 				this.fHideImg();
  232. 				// #ifndef MP-ALIPAY
  233. 				let phone = uni.getSystemInfoSync().platform
  234. 				if (phone == 'ios') {
  235. 					y = this.sT1num
  236. 				}
  237. 				uni.canvasToTempFilePath({
  238. 					x: x,
  239. 					y: y,
  240. 					width: width,
  241. 					height: height,
  242. 					destWidth: expWidth,
  243. 					destHeight: expHeight,
  244. 					canvasId: 'avatar-canvas',
  245. 					fileType: this.fType,
  246. 					quality: this.qlty,
  247. 					success: (r) => {
  248. 						r = r.tempFilePath;
  249. 						// #ifndef H5
  250. 						this.$emit("upload", {
  251. 							avatar: this.imgSrc,
  252. 							path: r,
  253. 							index: this.indx,
  254. 							data: this.rtn,
  255. 							base64: this.base64 || null
  256. 						});
  257. 						// #endif
  258. 					},
  259. 					fail: (res) => {
  260. 						uni.showToast({
  261. 							title: "error1",
  262. 							duration: 2000,
  263. 						})
  264. 					},
  265. 					complete: () => {
  266. 						uni.hideLoading();
  267. 						this.noBar || uni.showTabBar();
  268. 						this.$emit("end");
  269. 					}
  270. 				}, this);
  271. 				// #endif
  272. 			},
  273. 			fDrawInit(ini = false) {
  274. 				let allWidth = this.wW, //设备宽
  275. 					allHeight = this.wH, //设备高
  276. 					imgWidth = this.imgWidth, //图宽
  277. 					imgHeight = this.imgHeight, //图高
  278. 					imgRadio = imgWidth / imgHeight, //图比
  279. 					useWidth = allWidth - 40, //设备宽-40
  280. 					useHeight = allHeight - tH - 80, //设备高-80
  281. 					useRadio = useWidth / useHeight,
  282. 					sW = parseInt(this.sS.width), //图片信息
  283. 					sH = parseInt(this.sS.height);
  284. 				this.fixWidth = 0;
  285. 				this.fixHeight = 0;
  286. 				this.lckWidth = 0;
  287. 				this.lckHeight = 0;
  288. 				switch (this.stc) { //以下是自动铺满的算法
  289. 					case 'x':
  290. 						this.fixWidth = 1;
  291. 						break;
  292. 					case 'y':
  293. 						this.fixHeight = 1;
  294. 						break;
  295. 					case 'long':
  296. 						if (imgRadio > 1) this.fixWidth = 1;
  297. 						else this.fixHeight = 1;
  298. 						break;
  299. 					case 'short':
  300. 						if (imgRadio > 1) this.fixHeight = 1;
  301. 						else this.fixWidth = 1;
  302. 						break;
  303. 					case 'longSel':
  304. 						if (sW > sH) this.fixWidth = 1;
  305. 						else this.fixHeight = 1;
  306. 						break;
  307. 					case 'shortSel':
  308. 						if (sW > sH) this.fixHeight = 1;
  309. 						else this.fixWidth = 1;
  310. 						break;
  311. 				}
  312. 				switch (this.lck) { //以下锁定屏幕的移动方向
  313. 					case 'x':
  314. 						this.lckWidth = 1;
  315. 						break;
  316. 					case 'y':
  317. 						this.lckHeight = 1;
  318. 						break;
  319. 					case 'long':
  320. 						if (imgRadio > 1) this.lckWidth = 1;
  321. 						else this.lckHeight = 1;
  322. 						break;
  323. 					case 'short':
  324. 						if (imgRadio > 1) this.lckHeight = 1;
  325. 						else this.lckWidth = 1;
  326. 						break;
  327. 					case 'longSel':
  328. 						if (sW > sH) this.lckWidth = 1;
  329. 						else this.lckHeight = 1;
  330. 						break;
  331. 					case 'shortSel':
  332. 						if (sW > sH) this.lckHeight = 1;
  333. 						else this.lckWidth = 1;
  334. 						break;
  335. 				}
  336. 				if (this.fixWidth) {
  337. 					useWidth = sW;
  338. 					useHeight = useWidth / imgRadio;
  339. 				} else if (this.fixHeight) {
  340. 					useHeight = sH;
  341. 					useWidth = useHeight * imgRadio;
  342. 				} else if (imgRadio < useRadio) {
  343. 					if (imgHeight < useHeight) {
  344. 						useWidth = imgWidth;
  345. 						useHeight = imgHeight;
  346. 					} else {
  347. 						useWidth = useHeight * imgRadio;
  348. 					}
  349. 				} else {
  350. 					if (imgWidth < useWidth) {
  351. 						useWidth = imgWidth;
  352. 						useHeight = imgHeight;
  353. 					} else {
  354. 						useHeight = useWidth / imgRadio;
  355. 					}
  356. 				}
  357. 				if (this.isin) {
  358. 					if (useWidth < sW) {
  359. 						useWidth = sW;
  360. 						useHeight = useWidth / imgRadio;
  361. 						this.lckHeight = 0;
  362. 					}
  363. 					if (useHeight < sH) {
  364. 						useHeight = sH;
  365. 						useWidth = useHeight * imgRadio;
  366. 						this.lckWidth = 0;
  367. 					}
  368. 				}
  369. 				this.scaleSize = 1;
  370. 				this.rotateDeg = 0;
  371. 				this.posWidth = (allWidth - useWidth) / 2 | 0;
  372. 				this.posHeight = (allHeight - useHeight - tH) / 2 | 0;
  373. 				this.useWidth = useWidth | 0;
  374. 				this.useHeight = useHeight | 0;
  375. 				this.centerX = this.posWidth + useWidth / 2;
  376. 				this.centerY = this.posHeight + useHeight / 2;
  377. 				this.focusX = 0;
  378. 				this.focusY = 0;
  379. 				let style = this.sS,
  380. 					left = parseInt(style.left),
  381. 					top = parseInt(style.top),
  382. 					width = parseInt(style.width),
  383. 					height = parseInt(style.height),
  384. 					canvas = this.canvas,
  385. 					canvasOper = this.canvasOper,
  386. 					cc = this.cc, //avatar-canvas
  387. 					cco = this.cco; //oper-canvas  裁剪
  388. 				cco.beginPath(); //开始创建一个路径
  389. 				cco.setLineWidth(3); //设置线条的宽度  px
  390. 				cco.setGlobalAlpha(1); //设置全局画笔透明度。
  391. 				cco.setStrokeStyle('white'); //设置边框颜色。如果没有设置 fillStyle，默认颜色为 black。
  392. 				cco.strokeRect(left, top, width, height); //画一个矩形(非填充)。用 setFillStroke() 设置边框颜色，如果没设置默认是黑色。
  393. 				cco.setFillStyle('black');
  394. 				cco.setGlobalAlpha(0.5);
  395. 				cco.fillRect(0, 0, this.wW, top); //填充一个矩形
  396. 				cco.fillRect(0, top, left, height);
  397. 				cco.fillRect(0, top + height, this.wW, this.wH - height - top - tH);
  398. 				cco.fillRect(left + width, top, this.wW - width - left, height);
  399. 				cco.setGlobalAlpha(1);
  400. 				cco.setStrokeStyle('red');
  401. 				cco.moveTo(left + 15, top); //把路径移动到画布中的指定点，不创建线条。用 stroke() 方法来画线条。
  402. 				cco.lineTo(left, top); //增加一个新点，然后创建一条从上次指定点到目标点的线。
  403. 				cco.lineTo(left, top + 15);
  404. 				cco.moveTo(left + width - 15, top);
  405. 				cco.lineTo(left + width, top);
  406. 				cco.lineTo(left + width, top + 15);
  407. 				cco.moveTo(left + 15, top + height);
  408. 				cco.lineTo(left, top + height);
  409. 				cco.lineTo(left, top + height - 15);
  410. 				cco.moveTo(left + width - 15, top + height);
  411. 				cco.lineTo(left + width, top + height);
  412. 				cco.lineTo(left + width, top + height - 15);
  413. 				cco.stroke(); //画线条
  414. 				cco.draw(false, () => { //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
  415. 					if (ini) {
  416. 						this.sT = this.drawTop + 'px';
  417. 						this.fDrawImage(true); //绘制背景色
  418. 					}
  419. 				});
  420. 				this.$emit("init");
  421. 			},
  422. 			//绘制背景色
  423. 			fDrawImage(ini = false) {
  424. 				let tm_now = Date.now(); //当前时间
  425. 				if (tm_now - this.drawTm < 20) return;
  426. 				this.drawTm = tm_now;
  427. 				let cc = this.cc,
  428. 					imgWidth = this.useWidth * this.scaleSize,
  429. 					imgHeight = this.useHeight * this.scaleSize;
  430. 				if (this.bgImage) { //如果背景图
  431. 					// #ifndef MP-ALIPAY
  432. 					cc.drawImage(this.bgImage, 0, 0, this.wW, this.wH - tH); //绘制图像到画布。
  433. 					// #endif
  434. 				} else {
  435. 					cc.fillRect(0, 0, this.wW, this.wH - tH); //填充一个矩形
  436. 				}
  437. 				if (this.isin) { //禁止旋转并在图片范围内移动
  438. 					let cx = this.focusX * (this.scaleSize - 1),
  439. 						cy = this.focusY * (this.scaleSize - 1);
  440. 					cc.translate(this.centerX, this.centerY);
  441. 					cc.rotate(this.rotateDeg * Math.PI / 180);
  442. 					cc.drawImage(this.imgPath, this.posWidth - this.centerX - cx, this.posHeight - this.centerY - cy,
  443. 						imgWidth, imgHeight);
  444. 				} else {
  445. 					cc.translate(this.posWidth + imgWidth / 2, this.posHeight + imgHeight / 2);
  446. 					cc.rotate(this.rotateDeg * Math.PI / 180);
  447. 					cc.drawImage(this.imgPath, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
  448. 				}
  449. 				cc.draw(false);
  450. 			},
  451. 			//旋转
  452. 			fRotate() {
  453. 				this.rotateDeg += 90 - this.rotateDeg % 90;
  454. 				this.fDrawImage();
  455. 			},
  456. 			//手指触摸开始
  457. 			fStart(e) {
  458. 				let touches = e.touches,
  459. 					touch0 = touches[0],
  460. 					touch1 = touches[1];
  461. 				this.touch0 = touch0;
  462. 				this.touch1 = touch1;
  463. 				if (touch1) {
  464. 					let x = touch1.x - touch0.x,
  465. 						y = touch1.y - touch0.y;
  466. 					this.fgDistance = Math.sqrt(x * x + y * y);
  467. 				}
  468. 			},
  469. 			//手指触摸后移动
  470. 			fMove(e) {
  471. 				let touches = e.touches,
  472. 					touch0 = touches[0],
  473. 					touch1 = touches[1];
  474. 				if (touch1) {
  475. 					let x = touch1.x - touch0.x,
  476. 						y = touch1.y - touch0.y,
  477. 						fgDistance = Math.sqrt(x * x + y * y),
  478. 						scaleSize = 0.005 * (fgDistance - this.fgDistance),
  479. 						beScaleSize = this.scaleSize + scaleSize;
  480. 					do {
  481. 						if (!this.letScale) break;
  482. 						if (beScaleSize < this.mnScale) break;
  483. 						if (beScaleSize > this.mxScale) break;
  484. 						let growX = this.useWidth * scaleSize / 2,
  485. 							growY = this.useHeight * scaleSize / 2;
  486. 						if (this.isin) {
  487. 							let imgWidth = this.useWidth * beScaleSize,
  488. 								imgHeight = this.useHeight * beScaleSize,
  489. 								l = this.posWidth - growX,
  490. 								t = this.posHeight - growY,
  491. 								r = l + imgWidth,
  492. 								b = t + imgHeight,
  493. 								left = parseInt(this.sS.left),
  494. 								top = parseInt(this.sS.top),
  495. 								width = parseInt(this.sS.width),
  496. 								height = parseInt(this.sS.height),
  497. 								right = left + width,
  498. 								bottom = top + height,
  499. 								cx, cy;
  500. 							if (imgWidth <= width || imgHeight <= height) break;
  501. 							this.cx = cx = this.focusX * beScaleSize - this.focusX,
  502. 								this.cy = cy = this.focusY * beScaleSize - this.focusY;
  503. 							this.posWidth -= growX;
  504. 							this.posHeight -= growY;
  505. 							if (this.posWidth - cx > left) {
  506. 								this.posWidth = left + cx;
  507. 							}
  508. 							if (this.posWidth + imgWidth - cx < right) {
  509. 								this.posWidth = right - imgWidth + cx;
  510. 							}
  511. 							if (this.posHeight - cy > top) {
  512. 								this.posHeight = top + cy;
  513. 							}
  514. 							if (this.posHeight + imgHeight - cy < bottom) {
  515. 								this.posHeight = bottom - imgHeight + cy;
  516. 							}
  517. 						} else {
  518. 							this.posWidth -= growX;
  519. 							this.posHeight -= growY;
  520. 						}
  521. 						this.scaleSize = beScaleSize;
  522. 					} while (0);
  523. 					this.fgDistance = fgDistance;
  524. 					if (touch1.x !== touch0.x && this.letRotate) {
  525. 						x = (this.touch1.y - this.touch0.y) / (this.touch1.x - this.touch0.x);
  526. 						y = (touch1.y - touch0.y) / (touch1.x - touch0.x);
  527. 						this.rotateDeg += Math.atan((y - x) / (1 + x * y)) * 180 / Math.PI;
  528. 						this.touch0 = touch0;
  529. 						this.touch1 = touch1;
  530. 					}
  531. 					this.fDrawImage();
  532. 				} else if (this.touch0) {
  533. 					let x = touch0.x - this.touch0.x,
  534. 						y = touch0.y - this.touch0.y,
  535. 						beX = this.posWidth + x,
  536. 						beY = this.posHeight + y;
  537. 					if (this.isin) {
  538. 						let imgWidth = this.useWidth * this.scaleSize,
  539. 							imgHeight = this.useHeight * this.scaleSize,
  540. 							l = beX,
  541. 							t = beY,
  542. 							r = l + imgWidth,
  543. 							b = t + imgHeight,
  544. 							left = parseInt(this.sS.left),
  545. 							top = parseInt(this.sS.top),
  546. 							right = left + parseInt(this.sS.width),
  547. 							bottom = top + parseInt(this.sS.height),
  548. 							cx, cy;
  549. 						this.cx = cx = this.focusX * this.scaleSize - this.focusX;
  550. 						this.cy = cy = this.focusY * this.scaleSize - this.focusY;
  551. 						if (!this.lckWidth && Math.abs(x) < 100) {
  552. 							if (left < l - cx) {
  553. 								this.posWidth = left + cx;
  554. 							} else if (right > r - cx) {
  555. 								this.posWidth = right - imgWidth + cx;
  556. 							} else {
  557. 								this.posWidth = beX;
  558. 								this.focusX -= x;
  559. 							}
  560. 						}
  561. 						if (!this.lckHeight && Math.abs(y) < 100) {
  562. 							if (top < t - cy) {
  563. 								this.focusY -= (top + cy - this.posHeight);
  564. 								this.posHeight = top + cy;
  565. 							} else if (bottom > b - cy) {
  566. 								this.focusY -= (bottom + cy - (this.posHeight + imgHeight));
  567. 								this.posHeight = bottom - imgHeight + cy;
  568. 							} else {
  569. 								this.posHeight = beY;
  570. 								this.focusY -= y;
  571. 							}
  572. 						}
  573. 					} else {
  574. 						if (Math.abs(x) < 100 && !this.lckWidth) this.posWidth = beX;
  575. 						if (Math.abs(y) < 100 && !this.lckHeight) this.posHeight = beY;
  576. 						this.focusX -= x;
  577. 						this.focusY -= y;
  578. 					}
  579. 					this.touch0 = touch0;
  580. 					this.fDrawImage();
  581. 				}
  582. 			},
  583. 			//手指触摸动作结束
  584. 			fEnd(e) {
  585. 				let touches = e.touches,
  586. 					touch0 = touches && touches[0],
  587. 					touch1 = touches && touches[1];
  588. 				if (touch0) {
  589. 					this.touch0 = touch0;
  590. 				} else {
  591. 					this.touch0 = null;
  592. 					this.touch1 = null;
  593. 				}
  594. 			},
  595. 			fHideImg() {
  596. 				this.prvImg = '';
  597. 				this.pT = '-10000px';
  598. 				this.prvImgData = null;
  599. 				this.target = null;
  600. 			},
  601. 		}
  602. 	}
  603. </script>
  604. <style>
  605. 	.croppage {
  606. 		width: 100%;
  607. 		height: 100%;
  608. 		box-sizing: border-box;
  609. 		background-color: #000000;
  610. 		position: relative;
  611. 	}
  612. 	.my-canvas {
  613. 		/* display: flex; */
  614. 		position: absolute !important;
  615. 		left: 0;
  616. 		z-index: 100000;
  617. 		width: 100%;
  618. 	}
  619. 	.my-avatar {
  620. 		width: 150upx;
  621. 		height: 150upx;
  622. 		border-radius: 100%;
  623. 	}
  624. 	.oper-canvas {
  625. 		/* display: flex; */
  626. 		position: absolute !important;
  627. 		left: 0;
  628. 		z-index: 100000;
  629. 		width: 100%;
  630. 	}
  631. 	.prv-canvas {
  632. 		display: flex;
  633. 		position: fixed !important;
  634. 		background: #000000;
  635. 		left: 0;
  636. 		z-index: 200000;
  637. 		width: 100%;
  638. 	}
  639. 	.oper-wrapper {
  640. 		height: 100rpx;
  641. 		position: fixed !important;
  642. 		box-sizing: border-box;
  643. 		border: 1px solid #F1F1F1;
  644. 		background: #ffffff;
  645. 		width: 100%;
  646. 		left: 0;
  647. 		bottom: 0;
  648. 		z-index: 99999999;
  649. 		flex-direction: row;
  650. 	}
  651. 	.oper {
  652. 		display: flex;
  653. 		flex-direction: column;
  654. 		justify-content: center;
  655. 		padding: 10upx 20upx;
  656. 		width: 100%;
  657. 		height: 100%;
  658. 		box-sizing: border-box;
  659. 		align-self: center;
  660. 	}
  661. 	.btn-wrapper {
  662. 		display: flex;
  663. 		flex-direction: row;
  664. 		flex-grow: 1;
  665. 		height: 50px;
  666. 		justify-content: space-between;
  667. 	}
  668.  
  669. 	.btn-wrapper view {
  670. 		display: flex;
  671. 		align-items: center;
  672. 		justify-content: center;
  673. 		font-size: 16px;
  674. 		color: #3b7ffb;
  675. 		border-radius: 6%;
  676. 	}
  677. 	.hover {
  678. 		background: #f1f1f1;
  679. 		border-radius: 6%;
  680. 	}
  681. 	.clr-wrapper {
  682. 		display: flex;
  683. 		flex-direction: row;
  684. 		flex-grow: 1;
  685. 	}
  686. 	.clr-wrapper view {
  687. 		display: flex;
  688. 		align-items: center;
  689. 		justify-content: center;
  690. 		font-size: 16px;
  691. 		color: #333;
  692. 		border: 1px solid #f1f1f1;
  693. 		border-radius: 6%;
  694. 	}
  695. 	.my-slider {
  696. 		flex-grow: 1;
  697. 	}
  698. </style>

2.在需要使用的页面引入组件

  1. <template>
  2. 	<view>
  3. 		<Cropping @upload="doUpload" ref="cropping" :selWidth="screenWidth" selHeight="60rpx" />
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. 	import Cropping from "@/components/cropping/cropping.vue";
  9. 	export default {
  10. 		components: {
  11. 			Cropping
  12. 		},
  13. 		data() {
  14. 			return {
  15. 				result:'',
  16. 				screenWidth: ''
  17. 			}
  18. 		},
  19. 		onLoad(option) {
  20.  
  21. 	let getWindowInfo = uni.getWindowInfo()
  22. 	this.screenWidth = getWindowInfo.screenWidth
  23.       //screenWidth定义需要裁剪的宽度 selHeight为高度 自行定义传入
  24. 			this.$nextTick(()=>{
  25.                 //调用组件的fSelect方法传入需要裁剪的图片路径
  26.                  //option.img为需要裁剪的图片路径 自行定义传入
  27. 				this.$refs.cropping.fSelect(option.img)
  28. 			})
  29. 		},
  30. 		methods: {
  31.              //剪裁确认
  32. 			doUpload(rsp) {
  33.                 console.log(rsp)
  34. 				//rsp.path为截取的图片路径
  35. 			},
  36. 		}
  37. 	}
  38. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/287118?site
推荐阅读