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


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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
JavaScript基本编码模式小结
May 23 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
我的论坛源代码(三)
2006/10/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
Vue Components 数字键盘的实现
2019/09/18 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
详解Python中heapq模块的用法
2016/06/28 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python中count函数知识点浅析
2020/12/17 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
宣传部部长竞选演讲稿
2014/04/26 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
大学升旗仪式主持词
2015/07/04 职场文书