微信小程序实现图片压缩


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 面向对象 重载
May 13 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
js数组去重的方法汇总
Jul 29 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
移动节点的jquery代码
2014/01/13 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JavaScript Split()方法
2015/12/18 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
python取代netcat过程分析
2018/02/10 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
中学生自我鉴定
2014/02/04 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
创业计划书之宠物店
2019/09/19 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS