微信小程序实现图片压缩


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 相关文章推荐
Js组件的一些写法
Sep 10 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
jquery选择器使用详解
Apr 08 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
详解webpack 热更新优化
Sep 13 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
Js四则运算函数代码
2012/07/21 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js验证上传图片的方法
2015/05/12 Javascript
js实现圆盘记速表
2015/08/03 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
layui的select联动实现代码
2019/09/28 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
解决Django连接db遇到的问题
2019/08/29 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python 如何快速复制序列
2020/09/07 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
出纳员岗位责任制
2014/02/11 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
整改落实自查报告
2014/11/05 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
举起手来观后感
2015/06/09 职场文书