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


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 操作下拉列表框实现代码
Feb 22 Javascript
JavaScript 事件系统
Jul 22 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
Vue.js实战之组件的进阶
Apr 04 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python requests.post带head和body的实例
2019/01/02 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
《都江堰》教学反思
2014/02/07 职场文书
2014年教师节寄语
2014/08/11 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
高中地理教学反思
2016/02/19 职场文书