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


Posted in Javascript onAugust 22, 2019

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

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

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

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

Javascript 相关文章推荐
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
PHP PDO操作总结
Nov 17 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
js 数据类型判断的方法
Dec 03 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 #Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 #Javascript
node express使用HTML模板的方法示例
Aug 22 #Javascript
vue中使用v-model完成组件间的通信
Aug 22 #Javascript
layui动态表头的实现代码
Aug 22 #Javascript
深入理解令牌认证机制(token)
Aug 22 #Javascript
聊聊鉴权那些事(推荐)
Aug 22 #Javascript
You might like
PHP学习之字符串比较和查找
2011/04/17 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Python合并字符串的3种方法
2015/05/21 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
常用的10个Python实用小技巧
2020/08/10 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
菜篮子工程实施方案
2014/03/08 职场文书
幼儿园招生广告
2014/03/19 职场文书
汽修专业自荐信
2014/07/07 职场文书
房屋维修申请报告
2015/05/18 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
2016年少先队活动总结
2016/04/06 职场文书
八年级作文之感恩
2019/11/22 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS