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


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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
一个实用的php验证码类
2017/07/06 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python迭代和迭代器详解
2016/11/10 Python
对python Tkinter Text的用法详解
2018/10/11 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
公立医院改革实施方案
2014/03/14 职场文书
网络优化专员求职信
2014/05/04 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
计算机实训报告总结
2014/11/05 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
工程质量保证书
2015/05/09 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技