微信小程序实现上传图片裁剪图片过程解析

有的时候我们上传头像，商品图片这些的时候有的希望上传的是自己想要的图片形状，吧图片宽高固定死的话，他又会变形，比列差不多的看起来没什么区别，不固定的话，他们会宽的高的不一样，看起来完全不舒服，不美观了。

所以想了个这样的办法，用这个裁剪工具，在选择图片的时候，就把图片的大小裁剪成自己想要的大小，这样就都一致了，下面我们来看看吧！

wxml:

view class=' wancll-padded-15 wancll-BG-white wancll-font-size-14 ' view class=' wancll-padded-l-5 wancll-padded-B- 10 '商品图片：/view class=' com list-image is-flex wancll-padded-l-5 ' view class=' image-list ' wx : if=' { { imgs。length } } ' wx : for=' { { imgs } } ' wx : key=' key ' Zan-badge catch tap=' deleltImage ' data-id=' { { index } } ' x/Zan-badge view class=' add-image ' catch tap=' preview pimage ' data-1。com list-image { display : flex；flex-wrap: wrap} .comlist-image .图像列表{右边距： 20 rpx}.comlist-image .向上-img { width : 100 rpx；高度： 100 rpx}.comlist-image .add-image { width : 100 rpx；高度： 100 rpxpadd : 10 rpxdisplay : flex justice-内容中心：align-items:居中；border: 1px固体# cccborder-radius : 5px；font-size : 50 rpx}js:

data: {imgs:[]} //添加图片addImage(){ if(this。数据。imgs。长度=5){ app。乌提尔。祝酒词('商品图片不能超过5张)返回} wx.chooseImage({ count: 1，sizeType: ['原始'，'压缩']，//可以指定是原图还是压缩图，默认二者都有sourceType: ['相机','相册'],//可以指定来源是相册还是相机，默认二者都有成功：函数(res) { //返回选定照片的本地文件路径列表，tempFilePath可以作为图片标签的科学研究委员会属性显示图片var tempfile path=RES . tempfile path；wx。navigateto({ URL : '/page/UploadImg/index？src=' tempfile path })；} });}, //图片预览预览图像(e){ let id=app。乌提尔。getdataset(e，' id ')wx。预览图像({ current : this。数据。imgs[id]，urls: this.data.imgs，}) }，/删除预览图片deleltImage(e){ let id=app。乌提尔。getdataset(e，' id ')让arr=this。数据。imgs arr。拼接(id，1)；this.setData({ imgs: arr }) }，将UploadImg.rar下载，放入\页面文件夹中

将weCropper.js下载，放入随便一个文件夹中引入即可