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


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 学习笔记(四)
Dec 31 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
mongodb和php的用法详解
2019/03/25 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
JS如何设置元素样式的方法示例
2017/08/28 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
为什么使用接口?
2014/08/13 面试题
灵泰克Java笔试题
2016/01/09 面试题
中专毕业生自荐信
2013/11/16 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
京剧自荐信
2014/01/26 职场文书
乡下人家教学反思
2014/02/01 职场文书
市场专员岗位职责
2014/02/14 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
高中班主任寄语
2019/06/21 职场文书