有的時候我們上傳頭像，商品圖片這些的時候有的希望上傳的是自己想要的圖片形狀，吧圖片寬高固定死的話，他又會變形，比列差不多的看起來沒什么區別，不固定的話，他們會寬的高的不一樣，看起來完全不舒服，不美觀了。
所以想了個這樣的辦法，用這個裁剪工具，在選擇圖片的時候，就把圖片的大小裁剪成自己想要的大小，這樣就都一致了，下面我們來看看吧！
wxml:
<view class="wancll-padded-15 wancll-bg-white wancll-font-size-14"> <view class="wancll-padded-l-5 wancll-padded-b-10">商品圖片:</view> <view class="comlist-image is-flex wancll-padded-l-5"> <view class='image-list' wx:if="{{imgs.length}}" wx:for="{{imgs}}" wx:key="key"> <zan-badge catchtap='deleltImage' data-id='{{index}}'>x</zan-badge> <view class='add-image' catchtap='previewImage' data-id='{{index}}'> <image class='up-img' src="{{item}}" mode="aspectFill" /> </view> </view> <view class='add-image' catchtap='addImage'>+</view> </view></view>wxss
.comlist-image{ display: flex; flex-wrap: wrap}.comlist-image .image-list{ margin-right: 20rpx;}.comlist-image .up-img{ width: 100rpx; height: 100rpx;}.comlist-image .add-image{ width: 100rpx; height: 100rpx; padding: 10rpx; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 5px; font-size: 50rpx;}js:
data: {imgs:[]} // 添加圖片 addImage() { if (this.data.imgs.length>=5){ APP.util.toast('商品圖片不能超過5張') return } wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['camera', 'album'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; wx.navigateTo({ url: "/pages/UploadImg/index?src=" + tempFilePaths }); } }); }, // 圖片預覽 previewImage(e) { let id = APP.util.getDataSet(e, 'id') wx.previewImage({ current: this.data.imgs[id], urls: this.data.imgs, }) }, // 刪除預覽圖片 deleltImage(e) { let id = APP.util.getDataSet(e, 'id') let arr = this.data.imgs arr.splice(id, 1); this.setData({ imgs: arr }) },將UploadImg.rar下載，放入/pages文件夾中
將weCropper.js下載，放入隨便一個文件夾中引入即可
新聞熱點
疑難解答
