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

uniapp 微信小程序使用we-cropper实现图片裁剪_小程序图片裁剪源码下载

作者：我家小花儿 | 2024-03-22 10:05:36

赞

踩

小程序图片裁剪源码下载

一、背景

需求：需要实现用户上传图像并进行裁剪操作的功能。为了实现这一需求，使用了uniapp作为开发框架，并结合了we-cropper这一图像裁剪插件来实现图片裁剪的功能。

源码地址：https://github.com/we-plugin/we-cropper/

二、具体操作

2.1、在index.vue 页面点击头像上传获取临时路径 ，并跳转至cropper组件

  1. <template>
  2.    <view>
  3. 	  <view class="upload box" @click="chooseImage">
  4.       <label>上传图片</label>
  5.       <view class="right">
  6.         <view class="upload-box">
  7.           <image :src="touxiang" mode="widthFix"  :style="{width:imgSize,height:imgSize,'backgroundSize': 'cover','marginTop': imgMargin +'rpx'}" />
  8.           <text class="tips" v-show="isShow">点击上传</text>  
  9.         </view>
  10.       </view>
  11.     </view>
  12. 		<view style="position: fixed; top: 9999px;">
  13.       <canvas canvas-id="picCanvas" id='picCanvas' class="pic-canvas" :style="{width: imgWidth + 'px', height: imgHeight + 'px'}"></canvas>
  14.     </view>
  15. 	 </view>
  16. </template>
  17.  
  18. <script>
  19. 	export default {
  20. 		data() {
  21. 			return {
  22. 				touxiang: '/static/upload.png',
  23. 				isShow: true,
  24.                 imgSize: '128rpx',
  25.                 imgMargin: 30,
  26. 				imgWidth: 0,
  27.                 imgHeight: 0,
  28. 				isActionBtn: false,
  29. 			}
  30. 		},
  31. 		methods: {
  32. 			chooseImage(){
  33. 				uni.navigateTo({
  34. 				  url: "/pages/cropper/cropper?destWidth=200&rectWidth=200&fileType=jpg"
  35. 					})
  36. 				//接收cropper页面传递的图片路径
  37. 				uni.$on('Cropper', path => {
  38. 					if(path){
  39. 						// 上传图片方法
  40. 					   this.update(path);
  41. 					   this.imgSize = '98%'
  42. 					   this.imgMargin = 0
  43. 					   this.touxiang = path
  44. 					   this.isShow = false
  45. 					}
  46. 				});
  47. 			},
  48. 			update(filePath) {
  49.               this.touxiang = filePath
  50.               this.isActionBtn = true
  51.               //根据其他业务需求，调取接口，保存头像
  52. 			 // ......
  53.           },
  54. 		}
  55. 	 }
  56. </script>
  57.  
  58. <style lang="scss" scoped>
  59. 	 .upload {
  60.       display: flex;
  61.       box-sizing: border-box;
  62.       padding: 20rpx 30rpx;
  63.       width: 710rpx;
  64.       height: 300rpx;
  65.       justify-content: center;
  66.       margin-top: 20rpx;
  67.       position: relative;
  68.       label {
  69.         width: 158rpx;
  70.         color: #333333;
  71.         font-size: 30spx;
  72.       }
  73.       .right {
  74.         display: flex;
  75.         width: 492rpx;
  76.         height: 250rpx;
  77.         .upload-box {
  78.           display: flex;
  79.           flex-direction: column;
  80.           align-items: center;
  81.           justify-content: center;
  82.           width: 205rpx;
  83.           height: 100%;
  84.           background-color: #F0F0F0;
  85.           border-radius: 10rpx;
  86.           image {
  87.             margin-left: auto;
  88.             margin-right: auto;
  89.           }
  90.           text {
  91.             margin-top: 10rpx;
  92.             width: 100%;
  93.             font-size: 20spx;
  94.             color: #999999;
  95.             text-align: center;
  96.           }
  97.         }
  98.       }
  99.     }
  100. 		.pic-canvas {
  101.       width: 205px;
  102.       height: 250px;
  103.     }
  104. </style>

2.2、cropper组件进行图片裁剪操作

  1. <template>
  2. 	<view class="content">
  3. 		<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
  4. 			<canvas
  5. 				class="cropper"
  6. 				:disable-scroll="true"
  7. 				@touchstart="touchStart"
  8. 				@touchmove="touchMove"
  9. 				@touchend="touchEnd"
  10. 				:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
  11. 				canvas-id="cropper"
  12. 				id="cropper"
  13. 			></canvas>
  14. 			<canvas
  15. 				class="cropper"
  16. 				:disable-scroll="true"
  17. 				:style="{
  18. 					position: 'fixed',
  19. 					top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
  20. 					left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
  21. 					width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
  22. 					height: `${cropperOpt.height * cropperOpt.pixelRatio}`
  23. 				}"
  24. 				canvas-id="targetId"
  25. 				id="targetId"
  26. 			></canvas>
  27. 		</view>
  28. 		<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px',color:cropperOpt.boundStyle.color}">
  29. 			<view class="upload" @tap="uploadTap">选择图片</view>
  30. 			<view class="upload btn" @tap="uploadTap">重新选取</view>
  31. 			<view class="getCropperImage btn" :style="{ backgroundColor: cropperOpt.boundStyle.color }" @tap="getCropperImage(false)">完成</view>
  32. 		</view>
  33. 	</view>
  34. </template>
  35.  
  36. <script>
  37. import WeCropper from 'we-cropper';
  38. export default {
  39. 	props: {
  40. 		boundStyle: {
  41. 			type: Object,
  42. 			default() {
  43. 				return {
  44. 					lineWidth: 4,
  45. 					borderColor: 'rgb(245, 245, 245)',
  46. 					mask: 'rgba(0, 0, 0, 0.35)'
  47. 				};
  48. 			}
  49. 		}
  50. 	},
  51. 	data() {
  52. 		return {
  53. 			// 底部导航的高度
  54. 			bottomNavHeight: 50,
  55. 			originWidth: 200,
  56. 			width: 0,
  57. 			height: 0,
  58. 			cropper: '',
  59. 			cropperOpt: {
  60. 				id: 'cropper',
  61. 				targetId: 'targetCropper',
  62. 				pixelRatio: 1,
  63. 				width: 0,
  64. 				height: 0,
  65. 				scale: 2.5,
  66. 				zoom: 8,
  67. 				cut: {
  68. 					x: (this.width - this.originWidth) / 2,
  69. 					y: (this.height - this.originWidth) / 2,
  70. 					width: this.originWidth,
  71. 					height: this.originWidth
  72. 				},
  73. 				boundStyle: {
  74. 					color: '#04b00f',
  75.           mask: 'rgba(0,0,0,0.8)',
  76.           lineWidth: 1
  77. 				}
  78. 			},
  79. 			// 裁剪框和输出图片的尺寸，高度默认等于宽度
  80. 			// 输出图片宽度，单位px
  81. 			destWidth: 200,
  82. 			// 裁剪框宽度，单位px
  83. 			rectWidth: 200,
  84. 			// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
  85. 			fileType: 'jpg',
  86. 			src: '' // 选择的图片路径，用于在点击确定时，判断是否选择了图片
  87. 		};
  88. 	},
  89. 	onLoad(option) {
  90. 		let rectInfo = uni.getSystemInfoSync();
  91. 		this.width = rectInfo.windowWidth;
  92. 		this.height = rectInfo.windowHeight - this.bottomNavHeight;
  93. 		this.cropperOpt.width = this.width;
  94. 		this.cropperOpt.height = this.height;
  95. 		this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
  96.  
  97. 		if (option.destWidth) this.destWidth = Number(option.destWidth);
  98. 		if (option.rectWidth) {
  99. 			let rectWidth = Number(option.rectWidth);
  100. 			this.cropperOpt.cut = {
  101. 				x: (this.width - rectWidth) / 2,
  102. 				y: (this.height - rectWidth) / 2,
  103. 				width: rectWidth,
  104. 				height: rectWidth
  105. 			};
  106. 		}
  107. 		this.rectWidth = Number(option.rectWidth);
  108. 		if (option.fileType) this.fileType = option.fileType;
  109. 		// 初始化
  110. 		this.cropper = new WeCropper(this.cropperOpt)
  111. 			.on('ready', ctx => {
  112. 				// wecropper is ready for work!
  113. 			})
  114. 			.on('beforeImageLoad', ctx => {
  115. 				// before picture loaded, i can do something
  116. 			})
  117. 			.on('imageLoad', ctx => {
  118. 				// picture loaded
  119. 			})
  120. 			.on('beforeDraw', (ctx, instance) => {
  121. 				// before canvas draw,i can do something
  122. 			});
  123. 		// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
  124. 		uni.setNavigationBarColor({
  125. 			frontColor: '#ffffff',
  126. 			backgroundColor: '#000000'
  127. 		});
  128. 		uni.chooseImage({
  129. 			count: 1, // 默认9
  130. 			sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  131. 			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  132. 			success: res => {
  133. 				this.src = res.tempFilePaths[0];
  134. 				//  获取裁剪图片资源后，给data添加src属性及其值
  135. 				this.cropper.pushOrign(this.src);
  136. 			}
  137. 		});
  138. 	},
  139. 	methods: {
  140. 		touchStart(e) {
  141. 			this.cropper.touchStart(e);
  142. 		},
  143. 		touchMove(e) {
  144. 			this.cropper.touchMove(e);
  145. 		},
  146. 		touchEnd(e) {
  147. 			this.cropper.touchEnd(e);
  148. 		},
  149. 		getCropperImage(isPre = false) {
  150. 			if (!this.src) return this.$toast('请先选择图片再裁剪');
  151.  
  152. 			let cropper_opt = {
  153. 				destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
  154. 				destWidth: Number(this.destWidth),
  155. 				fileType: this.fileType
  156. 			};
  157. 			this.cropper.getCropperImage(cropper_opt, (path, err) => {
  158. 				if (err) {
  159. 					uni.showModal({
  160. 						title: '温馨提示',
  161. 						content: err.message
  162. 					});
  163. 				} else {
  164. 					if (isPre) {
  165. 						uni.previewImage({
  166. 							current: '', // 当前显示图片的 http 链接
  167. 							urls: [path] // 需要预览的图片 http 链接列表
  168. 						});
  169. 					} else {
  170. 						uni.$emit('Cropper', path);
  171. 						uni.navigateBack();
  172. 					}
  173. 				}
  174. 			});
  175. 		},
  176. 		uploadTap() {
  177. 			const self = this;
  178. 			uni.chooseImage({
  179. 				count: 1, // 默认9
  180. 				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  181. 				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  182. 				success: res => {
  183. 					self.src = res.tempFilePaths[0];
  184. 					//  获取裁剪图片资源后，给data添加src属性及其值
  185.  
  186. 					self.cropper.pushOrign(this.src);
  187. 				}
  188. 			});
  189. 		}
  190. 	}
  191. };
  192. </script>
  193.  
  194. <style scoped lang="scss">
  195. .content {
  196. 	background: rgba(255, 255, 255, 1);
  197. }
  198.  
  199. .cropper {
  200. 	position: absolute;
  201. 	top: 0;
  202. 	left: 0;
  203. 	width: 100%;
  204. 	height: 100%;
  205. 	z-index: 11;
  206. }
  207. .cropper-buttons {
  208. 	background-color: #000000;
  209. 	color: #eee;
  210. }
  211. .cropper-wrapper {
  212. 	position: relative;
  213. 	display: flex;
  214. 	flex-direction: row;
  215. 	justify-content: space-between;
  216. 	align-items: center;
  217. 	width: 100%;
  218. 	background-color: #000;
  219. }
  220. .cropper-buttons {
  221. 	width: 100vw;
  222. 	display: flex;
  223. 	flex-direction: row;
  224. 	justify-content: space-between;
  225. 	align-items: center;
  226. 	position: fixed;
  227. 	bottom: 0;
  228. 	left: 0;
  229. 	padding: 0 20rpx;
  230.     box-sizing: border-box;
  231. 	font-size: 28rpx;
  232. }
  233. .cropper-buttons .upload, .cropper-buttons .getCropperImage{
  234.     text-align: center;
  235. }
  236. .btn{
  237.     height: 30px;
  238.     line-height: 30px;
  239.     padding: 0 24rpx;
  240.     border-radius: 2px;
  241.     color: #ffffff;
  242. }
  243. </style>

2.3、在cropper组件中需要引入we-cropper第三方插件，有两种引入方式

 源码地址：https://github.com/we-plugin/we-cropper/

方式1：npm引入，然后在cropper组件中直接 import WeCropper from 'we-cropper';

方式2：在源码中找到dist文件夹下的we-cropper.js文件，创建utils文件夹，将we-cropper.js文件放入，cropper组件直接引入utils下的

2.4、效果呈现

 

 最后：

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