这篇文章主要为大家详细介绍了微信小程序实现图片压缩,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

设计思路:

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

参数:

imagesrc:图片地址
imgcount:是否选择图片
show_hidden:是否展示按钮

接口:

wx.chooseImage:选择图片
wx.compressImage:压缩图片
wx.saveImageToPhotosAlbum:保存图片至相册
wx.showToast:提示信息

wxml

<view>
 <view>
  <image src="{{imagesrc}}" bindtap="chooseMyImage">
  </image>
 </view>
 <view>
 <text>
  (推荐使用jpg格式的图片)
 </text>
 </view>
 <view>
 <button type="primary" bindtap="chooseMyImage">选择图片</button>
 <button type="primary" bindtap="MyImageCompression">压缩图片</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",
   })
  }
  })
 }
 }
})

效果图:

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

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

最新资讯
瑞幸咖啡道歉发布道歉声明:涉事高管及员工已停职

瑞幸咖啡道歉发布道歉

涉嫌财务造假,瑞幸咖啡在官方微博发布道歉声明称涉事高
周五收盘瑞幸咖啡再跌近16%

周五收盘瑞幸咖啡再跌

周五收盘,瑞幸股价再次大跌15.94%,报5.38美元。中国证监
贝索斯捐1亿美元 用于为受疫情影响的家庭提供食物

贝索斯捐1亿美元 用于

亚马逊总裁捐1亿美元,用于为受疫情影响的家庭提供食物]
B站4月4日暂停所有直播内容 当日更新番剧延期至5日

B站4月4日暂停所有直

哔哩哔哩发布暂停直播和番剧更新的公告,以悼念抗击新冠
瑞幸咖啡股价大幅震荡是否应该被退市?专家分析来了

瑞幸咖啡股价大幅震荡

华尔街上不少投资者质疑瑞幸咖啡是否应该被退市。有分
瑞幸暴雷背后:三只基金踩雷,中金和香椽遭打脸

瑞幸暴雷背后:三只基金

瑞幸咖啡暴雷引发的连锁反应,根据2019年年报显示共牵连
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大