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


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 post传递数组方法实现思路及代码
Apr 28 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
vue实现微信分享功能
Nov 28 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php 文件状态缓存带来的问题
2008/12/14 PHP
PHP比你想象的好得多
2014/11/27 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
理解JS事件循环
2016/01/07 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JS实现放大镜效果
2020/09/21 Javascript
python自动发邮件库yagmail的示例代码
2018/02/23 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
反邪教宣传工作方案
2014/05/07 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
金陵十三钗观后感
2015/06/04 职场文书
人民币使用说明书
2019/04/17 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python