首页网络编程JavaScriptjavascript技巧 → 正文内容 微信小程序图片压缩

微信小程序实现图片压缩

发布时间: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",
     })
    }
   })
  }
 }
})

效果图:

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

您可能感兴趣的文章:

相关文章
最新更新
业界资讯
网友评论