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


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 EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
微信小程序实现人脸识别
May 25 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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高级对象构建 工厂模式的使用
2012/02/05 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python中的sort方法使用详解
2014/07/25 Python
详解Django框架中的视图级缓存
2015/07/23 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python如何写try语句
2020/07/14 Python
Django中ORM的基本使用教程
2020/12/22 Python
HTML5标签大全
2016/11/23 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
保安辞职信范文
2015/02/28 职场文书
辩护意见书
2015/06/04 职场文书
全新239军机修复记
2022/04/05 无线电