小程序

帅比萌擦擦* 提交于 2021-02-08 19:57:37

有的时候我们上传头像,商品图片这些的时候有的希望上传的是自己想要的图片形状,吧图片宽高固定死的话,他又会变形,比列差不多的看起来没什么区别,不固定的话,他们会宽的高的不一样,看起来完全不舒服,不美观了。所以想了个这样的办法,用这个裁剪工具,在选择图片的时候,就把图片的大小裁剪成自己想要的大小,这样就都一致了,下面我们来看看吧!

 

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下载,放入随便一个文件夹中引入即可

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!