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


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鼠标经过不停滑动的问题
Mar 03 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
js实现简单的随机点名器
Sep 17 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 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
收音机术语解释
2021/03/01 无线电
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
CI框架Session.php源码分析
2014/11/03 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
php 可变函数使用小结
2018/06/12 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
小学雷锋月活动总结
2014/07/03 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
汇报材料怎么写
2014/12/30 职场文书
百万英镑观后感
2015/06/09 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL