微信小程序实现图片压缩

 更新时间: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",
   })
  }
  })
 }
 }
})

效果图:

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

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

相关文章

  • JS防止网页被嵌入iframe框架的方法分析

    JS防止网页被嵌入iframe框架的方法分析

    这篇文章主要介绍了JS防止网页被嵌入iframe框架的方法,结合实例形式分析了针对不同浏览器防止网页被嵌入框架的相关注意事项与操作技巧,需要的朋友可以参考下
    2016-09-09
  • JavaScript 双位非运算(~~ 操作符)使用场景实例探索

    JavaScript 双位非运算(~~ 操作符)使用场景实例探索

    本文为大家介绍JavaScript中双位非运算 ~~, ~~ 操作符是一个强大且经常被忽视的特性,它提供了一种快速、简洁的方式来处理数字和执行类型转换,通常可以被用于数学计算和类型转换,我们先了解一下 ~~ 的基本概念和它的一些应用场景
    2024-01-01
  • Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

    Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

    这篇文章主要介绍了Taro UI开发小程序实现左滑喜欢右滑不喜欢效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • JS前端轻松导出Excel的通用方法详解

    JS前端轻松导出Excel的通用方法详解

    这篇文章主要介绍关于导出Excel通用方法的实用前端技巧,希望能够帮助大家更好地处理数据导出需求,接下来,我将为大家详细介绍这个方法和代码实现,需要的朋友可以参考下
    2023-09-09
  • TypeScript中使用类型断言的几种方式分享

    TypeScript中使用类型断言的几种方式分享

    在TypeScript中,类型断言用于告诉编译器某个变量的类型,这在我们确定变量的类型比编译器更准确时非常有用,本文给大家分享了几种TypeScript中使用类型断言方式,需要的朋友可以参考下
    2023-09-09
  • new Date()问题在ie8下面的处理方法

    new Date()问题在ie8下面的处理方法

    本节主要介绍了ie8下面处理 new Date()的问题,需要的朋友可以参考下
    2014-07-07
  • 基于Javascript倒计时效果

    基于Javascript倒计时效果

    这篇文章主要为大家详细介绍了基于Javascript倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Paypal支付不完全指北

    Paypal支付不完全指北

    这篇文章主要介绍了Paypal支付不完全指北,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • JS保留小数几种简单方法例子

    JS保留小数几种简单方法例子

    这篇文章主要给大家介绍了关于JS保留小数几种简单方法,在JS中保留小数的方法有很多,可以Math函数或者以字符串形式来进行处理,但在有的时候需要四舍五入,有时候不需要,需要的朋友可以参考下
    2023-10-10
  • JS中循环遍历数组的几种常用方式总结

    JS中循环遍历数组的几种常用方式总结

    文章主要总结了 JS 中循环遍历数组的十二种常用方式,包括 for 循环(普通和优化版)、forEach、map、filter、for…of、for…in、find、findIndex、some、every、reduce 等,并对它们的特点、语法、优缺点、适用场景及返回值等进行了详细说明,需要的朋友可以参考下
    2025-01-01

最新评论