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


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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python中datetime模块参考手册
2017/01/13 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
总经理秘书岗位职责
2014/03/17 职场文书
企业法人代表证明书
2014/09/27 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android