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


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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP加密解密类实例分析
2015/04/20 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
input的focus方法使用
2010/03/13 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
js实现轮播图特效
2020/05/28 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
名片管理系统python版
2018/01/11 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Django框架视图介绍与使用详解
2019/07/18 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
高中自我评价分享
2013/12/05 职场文书
单位消防安全制度
2014/01/12 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
实习鉴定评语
2014/01/19 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
网管求职信
2014/03/03 职场文书
高中生操行评语
2014/04/25 职场文书
工作散漫检讨书
2014/09/16 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python