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


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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
javascript静态的url如何传递
May 03 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
Vue声明式渲染详解
May 17 Javascript
详解webpack打包vue时提取css
May 26 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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数组生成html下拉列表的方法
2015/07/20 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
JS面向对象编程浅析
2011/08/28 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
详解vue路由
2020/08/05 Javascript
利用python查看数组中的所有元素是否相同
2021/01/08 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
品管员岗位职责
2013/11/10 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
师说教学反思
2014/02/07 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
终止劳动合同协议书
2014/04/14 职场文书
信息技术课后反思
2014/04/27 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
花坛标语大全
2014/06/30 职场文书
群众路线调研报告范文
2014/11/03 职场文书
结婚主持人致辞
2015/07/28 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA