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


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的事件描述
Sep 08 Javascript
在JavaScript中实现命名空间
Nov 23 Javascript
JS高级笔记
Jul 13 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
javascript变量声明实例分析
Apr 25 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
js给table赋值的实例代码
Oct 13 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
php生出随机字符串
2017/07/06 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python日志模块logging简介
2015/04/13 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python自动12306抢票软件实现代码
2018/02/24 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
实习教师自我鉴定
2013/12/12 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
人事经理岗位职责
2014/04/28 职场文书
软件项目实施计划书
2014/05/02 职场文书
英语专业自荐书
2014/06/13 职场文书
数学教师个人总结
2015/02/06 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python
全新239军机修复记
2022/04/05 无线电
使用python绘制横竖条形图
2022/04/21 Python