这篇文章主要介绍微信小程序怎么实现上传图片裁剪图片过程，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
有的时候我们上传头像，商品图片这些的时候有的希望上传的是自己想要的图片形状，吧图片宽高固定死的话，他又会变形，比列差不多的看起来没什么区别，不固定的话，他们会宽的高的不一样，看起来完全不舒服，不美观了。
所以想了个这样的办法，用这个裁剪工具，在选择图片的时候，就把图片的大小裁剪成自己想要的大小，这样就都一致了，下面我们来看看吧！
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
})
},以上是“微信小程序怎么实现上传图片裁剪图片过程”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
