微信小程序实现图片压缩


Posted in Javascript onDecember 03, 2019

本文实例为大家分享了微信小程序图片压缩的具体代码,供大家参考,具体内容如下

设计思路:

选择图片后调用微信压缩图片接口,压缩后接收压缩图片的临时地址,调用微信储存接口保存图片至本地。

参数:

imagesrc:图片地址
imgcount:是否选择图片
show_hidden:是否展示按钮

接口:

wx.chooseImage:选择图片
wx.compressImage:压缩图片
wx.saveImageToPhotosAlbum:保存图片至相册
wx.showToast:提示信息

wxml

<view>
 <view>
  <image src="{{imagesrc}}" style="width: 100%;" bindtap="chooseMyImage">
  </image>
 </view>
 <view class="textView">
 <text>
  (推荐使用jpg格式的图片)
 </text>
 </view>
 <view class="ImgOperateView">
 <button type="primary" bindtap="chooseMyImage">选择图片</button>
 <button type="primary" bindtap="MyImageCompression" style="{{show_hidden}}">压缩图片</button>
 </view>
</view>

js

// miniprogram/pages/ImgCompression/ImgCompression.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 imagesrc:"../../images/NoImage.jpg",
 imgcount:0,
 show_hidden: "display:none;",
 },

 //选择图片
 chooseMyImage:function () {
 var that = this;
 wx.chooseImage({
  count:1,
  success: function(res) {
  that.setData({
   imagesrc:res.tempFilePaths[0],
   imgcount:1,
   show_hidden:"display:block"
  }),
   wx.showToast({
   title: "已选择图片",
   })
  },

  fail: function() {
  wx.showToast({
   title:"请选择图片",
   icon:"none",
  })
  }
 })
 },

 //压缩图片
 MyImageCompression:function () {
 var that = this;
 if(that.data.imgcount == 1){
  wx.showToast({
  title: "正在压缩图片",
  icon:"loading",
  })

  wx.compressImage({
  src:that.data.imagesrc,
  quality:0,
  success: function(res) {
   wx.showToast({
   title: "压缩成功",
   });

   wx.saveImageToPhotosAlbum({
   filePath:res.tempFilePath,
   success:function(res) {
    wx.showToast({
    title: "已保存至相册",
    });
   }
   })
  },

  fail: function() {
   wx.showToast({
   title:"压缩失败",
   icon:"none",
   })
  }
  })
 }
 }
})

效果图:

微信小程序实现图片压缩

微信小程序实现图片压缩

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
js读写json文件实例代码
Oct 21 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 #Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 #Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 #Javascript
VUE 动态组件的应用案例分析
Dec 02 #Javascript
You might like
php购物网站支付paypal使用方法
2010/11/28 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python处理cookie详解
2014/02/07 Python
python发送邮件功能实现代码
2016/07/15 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
wxpython布局的实现方法
2019/11/01 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
电力培训心得体会
2014/09/02 职场文书
就业协议书怎么填
2014/09/15 职场文书
入党转正申请报告
2015/05/15 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python