微信小程序怎么实现上传图片裁剪图片过程-创新互联

这篇文章主要介绍微信小程序怎么实现上传图片裁剪图片过程，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了铁锋免费建站欢迎大家使用！

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

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

wxml:

 商品图片:
 
  
   x
   
    
   
  
  +
 

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
  })
 },

以上是“微信小程序怎么实现上传图片裁剪图片过程”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

名称栏目：微信小程序怎么实现上传图片裁剪图片过程-创新互联
文章出自：http://6mz.cn/article/diocds.html