微信小程序实现上传图片裁剪图片过程解析

来源：懂视网责编：小采时间：2020-11-27 21:51:59

微信小程序实现上传图片裁剪图片过程解析

微信小程序实现上传图片裁剪图片过程解析:有的时候我们上传头像，商品图片这些的时候有的希望上传的是自己想要的图片形状，吧图片宽高固定死的话，他又会变形，比列差不多的看起来没什么区别，不固定的话，他们会宽的高的不一样，看起来完全不舒服，不美观了。所以想了个这样的办法，用这个裁剪工具

推荐度：

点击下载本文 文档为doc格式

导读微信小程序实现上传图片裁剪图片过程解析:有的时候我们上传头像，商品图片这些的时候有的希望上传的是自己想要的图片形状，吧图片宽高固定死的话，他又会变形，比列差不多的看起来没什么区别，不固定的话，他们会宽的高的不一样，看起来完全不舒服，不美观了。所以想了个这样的办法，用这个裁剪工具

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

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

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

微信小程序实现上传图片裁剪图片过程解析

推荐度：

点击下载本文 文档为doc格式

标签：图片微信小程序实现

热门焦点

微信小程序实现上传图片裁剪图片过程解析

微信小程序实现上传图片裁剪图片过程解析

微信小程序实现上传图片裁剪图片过程解析

最新推荐

猜你喜欢

热门推荐