微信小程序实现图片压缩


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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
vue 实现走马灯效果
Oct 28 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Python机器学习之决策树和随机森林
Jul 15 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
判断PHP数组是否为空的代码
2011/09/08 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
java关于string最常出现的面试题整理
2021/01/18 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
最新奶茶店创业计划书
2014/01/25 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
大专学生求职信
2014/07/04 职场文书
春游踏青活动方案
2014/08/14 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
前台岗位职责
2015/02/13 职场文书
父亲节感言
2015/08/03 职场文书
表扬信范文
2019/04/22 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python