微信小程序怎么實現(xiàn)上傳圖片裁剪圖片過程

這篇文章主要介紹微信小程序怎么實現(xiàn)上傳圖片裁剪圖片過程，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個細(xì)節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及成都三維植被網(wǎng)等，在成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。

有的時候我們上傳頭像，商品圖片這些的時候有的希望上傳的是自己想要的圖片形狀，吧圖片寬高固定死的話，他又會變形，比列差不多的看起來沒什么區(qū)別，不固定的話，他們會寬的高的不一樣，看起來完全不舒服，不美觀了。

所以想了個這樣的辦法，用這個裁剪工具，在選擇圖片的時候，就把圖片的大小裁剪成自己想要的大小，這樣就都一致了，下面我們來看看吧！

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'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
   sourceType: ['camera', 'album'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
   success: function (res) {
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths;
    wx.navigateTo({
     url: "/pages/UploadImg/index?src=" + tempFilePaths
    });
   }
  });

 },
 // 圖片預(yù)覽
 previewImage(e) {
  let id = APP.util.getDataSet(e, 'id')
  wx.previewImage({
   current: this.data.imgs[id],
   urls: this.data.imgs,
  })
 },
 // 刪除預(yù)覽圖片
 deleltImage(e) {
  let id = APP.util.getDataSet(e, 'id')
  let arr = this.data.imgs
  arr.splice(id, 1);
  this.setData({
   imgs: arr
  })
 },

以上是“微信小程序怎么實現(xiàn)上傳圖片裁剪圖片過程”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：微信小程序怎么實現(xiàn)上傳圖片裁剪圖片過程
鏈接URL：http://muchs.cn/article26/jpdsjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、軟件開發(fā)、Google、網(wǎng)站策劃、用戶體驗、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)