微信小程序中上传图片并进行压缩的实现代码


Posted in Javascript onAugust 28, 2018

小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍

今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值

微信小程序中上传图片并进行压缩的实现代码

先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传)

微信小程序中上传图片并进行压缩的实现代码

来来来,上代码

wxml代码

<button bindtap='chooseImageTap'>上传图片</button>
<button bindtap='saveImage'>保存</button>
<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>

当然最主要的还是js代码咯

var app = getApp()
Page({
 data: {
  logo: null,
 pics:[]
 },
 chooseImageTap: function () {
  let _this = this;
  wx.showActionSheet({
   itemList: ['从相册中选择', '拍照'],//下面显示的数组是拍照还是别的
   itemColor: "#f7982a",//显示文字的颜色
   success: function (res) {
    if (!res.cancel) {//选中判断
     if (res.tapIndex == 0) {
      _this.chooseWxImage('album')
     } else if (res.tapIndex == 1) {
      _this.chooseWxImage('camera')
     }
    }
   }
  })

 },
 // 绘制图片到canvas上
 chooseWxImage: function (type) {
  const ctx = wx.createCanvasContext('myCanvas')//画布
  var that = this;
  wx.chooseImage({//上传图片事件
   count: 9,//数量
   sizeType: ['original', 'compressed'],//original 原图,compressed 压缩图,默认二者都有
   sourceType: ['album', 'camera'], //album 从相册选图,camera 使用相机,默认二者都有
   success: function (res) {
    console.log(res)
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 100, 100)//成功选定第一张。后面的四个值分别是left,top,width,height,来控制画布上的图片的位置和大小
    ctx.draw()
   }
  })
  },
saveImage: function () {//这里触发图片上传的方法
  var pics = this.data.pics;
  app.uploadimg({
   url: 'https://........',//这里是你图片上传的接口
   path: pics//这里是选取的图片的地址数组
  });
 },

总结

以上所述是小编给大家介绍的微信小程序中上传图片并进行压缩的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
浅析javascript的return语句
Dec 15 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
layUI实现列表查询功能
Jul 27 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 #Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 #Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
对Vue table 动态表格td可编辑的方法详解
Aug 28 #Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 #Javascript
layui实现文件或图片上传记录
Aug 28 #Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python列表去重的二种方法
2014/02/14 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
django的autoreload机制实现
2020/06/03 Python
高校生生产实习自我鉴定
2013/09/21 职场文书
资产评估专业大学生求职信
2013/09/29 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
学期个人工作总结
2015/02/13 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis