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


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 相关文章推荐
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
js实现百度搜索提示框
Feb 05 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
使用node.JS中的url模块解析URL信息
Feb 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
图解上海144收音机
2021/03/02 无线电
PHP开发框架总结收藏
2008/04/24 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
一些mootools的学习资源
2010/02/07 Javascript
jquery插件之easing使用
2010/08/19 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
使用js画图之画切线
2015/01/12 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
Python实现的HMacMD5加密算法示例
2018/04/03 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python多线程分块读取文件
2019/08/29 Python
python 追踪except信息方式
2020/04/25 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python通过format函数格式化显示值
2020/10/17 Python
python中time包实例详解
2021/02/02 Python
印刷工程专业应届生求职信
2013/09/29 职场文书
毕业生求职简历中的自我评价
2013/10/18 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
个人年终总结结尾
2015/03/06 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
React更新渲染原理深入分析
2022/12/24 Javascript