微信小程序?qū)崿F(xiàn)圖片壓縮

更新時間：2019年12月03日 08:34:46 作者：chent_某位

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圖片壓縮，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序圖片壓縮的具體代碼，供大家參考，具體內(nèi)容如下

設(shè)計思路：

選擇圖片后調(diào)用微信壓縮圖片接口，壓縮后接收壓縮圖片的臨時地址，調(diào)用微信儲存接口保存圖片至本地。

參數(shù)：

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({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 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",
   })
  }
  })
 }
 }
})

效果圖：