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


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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
浅谈vue的第一个commit分析
Jun 08 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 ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
sina的lightbox效果。
2007/01/09 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python实现二分法算法实例
2015/02/02 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python求解汉诺塔游戏
2020/07/09 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
化工专业大学生职业生涯规划书
2014/01/14 职场文书
社区志愿者活动方案
2014/08/18 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
Python 阶乘详解
2021/10/05 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技