微信小程序之批量上传并压缩图片的实例代码


Posted in Javascript onJuly 05, 2018

具体内容如下所示:

首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取

这个canvas不能隐藏,否则没效果,可以将其移至屏幕外。

<canvas canvas-id='attendCanvasId' class='myCanvas'></canvas>

然后呢,就是.js文件里面的方法了

// 点击加_压缩
 takePhoto: function () {
  var that = this;
  let imgViewList = that.data.imgViewList; //这个是用来承载页面循环展示图片的
   //拍照、从相册选择上传
   wx.chooseImage({
    count: 4,  //这个是上传的最大数量,默认为9
    sizeType: ['compressed'],  //这个可以理解为上传的图片质量类型(官方给的),虽然没什么卵用,要不然还要我们自己写压缩做什么
    sourceType: ['album', 'camera'],  //这个是图片来源,相册或者相机
    success: function (res) {
     var tempFilePaths = res.tempFilePaths  //这个是选择后返回的图片列表
     that.getCanvasImg(0, 0, tempFilePaths);  //进行压缩
    } 
   });
 },
 //压缩并获取图片,这里用了递归的方法来解决canvas的draw方法延时的问题
 getCanvasImg: function (index,failNum, tempFilePaths){
  var that = this;
  if (index < tempFilePaths.length){
   const ctx = wx.createCanvasContext('attendCanvasId');
   ctx.drawImage(tempFilePaths[index], 0, 0, 300, 150);
   ctx.draw(true, function () {
    index = index + 1;//上传成功的数量,上传成功则加1
    wx.canvasToTempFilePath({
     canvasId: 'attendCanvasId',
     success: function success(res) {
      that.uploadCanvasImg(res.tempFilePath);
      that.getCanvasImg(index,failNum,tempFilePaths);
     }, fail: function (e) {
      failNum += 1;//失败数量,可以用来提示用户
      that.getCanvasImg(inedx,failNum,tempFilePaths);
     }
    });
   });
  }
 },
 //上传图片
 uploadCanvasImg: function (canvasImg){
  var that = this;
  let imgViewList = that.data.imgViewList;
  var tempImg = canvasImg;
  wx.uploadFile({
   url: app.d.fileServer,//文件服务器的地址
   filePath: tempImg,
   formData: {
    paramPath: "gift"
   },
   name: 'file',
   success: function (res) {
    var json2map = JSON.parse(res.data);
    imgViewList.push(app.d.imageUrlFix + json2map[0].fileUrl);
    that.setData({
     imgViewList: imgViewList,
    })
   }
  })
 },

总结

以上所述是小编给大家介绍的微信小程序之批量上传并压缩图片的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 #Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 #Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 #Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 #Javascript
微信小程序实现左右联动的实战记录
Jul 05 #Javascript
vue实现自定义多选与单选的答题功能
Jul 05 #Javascript
You might like
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
理解javascript封装
2016/02/23 Javascript
Json解析的方法小结
2016/06/22 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
JavaScript实现图片放大预览效果
2020/11/02 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python列表解析配合if else的方法
2018/06/23 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
自荐信格式
2013/12/01 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
服务标兵事迹材料
2014/05/04 职场文书
终止合同协议书范本
2016/03/22 职场文书