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


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 相关文章推荐
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
Jquery中map函数的用法
Jun 03 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
vue注册组件的几种方式总结
Mar 08 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
利用node.js开发cli的完整步骤
Dec 29 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Django自定义分页效果
2017/06/27 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python dataframe NaN处理方式
2019/12/26 Python
python怎么判断模块安装完成
2020/06/19 Python
pandas 数据类型转换的实现
2020/12/29 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
军训鉴定表自我鉴定
2014/02/13 职场文书
项目采购员岗位职责
2014/04/15 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
美术教师个人总结
2015/02/06 职场文书
交心谈心活动总结
2015/05/11 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
Python中递归以及递归遍历目录详解
2021/10/24 Python
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL