微信小程序实现图片压缩

 更新时间:2019年12月03日 08:34:46   作者:chent_某位  
这篇文章主要为大家详细介绍了微信小程序实现图片压缩,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

设计思路:

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

参数:

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写出Tabs标签页的实例代码

    原生JavaScript写出Tabs标签页的实例代码

    这篇文章主要介绍了原生JavaScript写出Tabs标签页的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 5个javascript的数字格式化函数分享

    5个javascript的数字格式化函数分享

    Javascript没有任何内建的格式化函数,这里我们通过Google收集了5个javascript的数字格式化函数,希望对于大家的web开发能够带来方便
    2011-12-12
  • js中for in语句的用法讲解

    js中for in语句的用法讲解

    这篇文章主要介绍了js中for in语句的用法讲解,本文用多个实例讲解了for in语句的用法及适合场景,需要的朋友可以参考下
    2015-04-04
  • 深入浅析JavaScript中的scrollTop

    深入浅析JavaScript中的scrollTop

    这篇文章主要介绍了深入浅析JavaScript中的scrollTop的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • PHP实现本地图片上传和验证功能

    PHP实现本地图片上传和验证功能

    这篇文章主要为大家详细介绍了PHP实现本地图片上传和验证功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 扩展IE中一些不兼容的方法如contains、startWith等等

    扩展IE中一些不兼容的方法如contains、startWith等等

    扩展IE中一些不兼容的方法如contains方法、startWith方法等等,下面是具体的实现代码,喜欢的朋友可以参考下
    2014-01-01
  • 原生js实现表单的正则验证(验证通过后才可提交)

    原生js实现表单的正则验证(验证通过后才可提交)

    这篇文章主要给大家介绍了关于如何利用原生js实现表单的正则验证,所有验证都通过后提交按钮才可用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • javascript获取隐藏元素(display:none)的高度和宽度的方法

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
    2014-06-06
  • js取得当前网址

    js取得当前网址

    用js获取当前网页的网址,平时一直用location.href;下一篇我会把document.url和location.href对比一下
    2008-05-05
  • js+canvas绘制矩形的方法

    js+canvas绘制矩形的方法

    这篇文章主要介绍了js+canvas绘制矩形的方法,涉及JavaScript调用html5的canvas组件绘制图形的相关技巧,需要的朋友可以参考下
    2016-01-01

最新评论