用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

【微信小程序】圖片壓縮-純質量壓縮,非長寬裁剪壓縮

Rolan 2019-8-26 00:06

原理:利用canvas來實現,將圖片繪制到canvas上,然后canvas轉圖片時,微信提供的一個方法wx.canvasToTempFilePath(Object object, Object this),此方式可以指定生成圖片的質量,下圖是從官方API截的圖:其中qualit ...

原理:利用canvas來實現,將圖片繪制到canvas上,然后canvas轉圖片時,微信提供的一個方法wx.canvasToTempFilePath(Object object, Object this),此方式可以指定生成圖片的質量,下圖是從官方API截的圖:

其中quality可以指定圖片的質量,quality的值越小,圖片越模糊,通過此方法可以實現圖片的壓縮

注意:

1.quality設置只對jpg格式的圖片有效,使用時要將fileType設置為“jpg”, 此舉可能會導致其它格式的圖片變為jpg格式

2.透明背景的png圖片,繪制到canvas上使用此方式導出的圖片是黑色背景,有需求的話是需要canvas先設置背景色的,請小伙伴們注意爬坑。
復制代碼

有了這個參數,壓縮就簡單很多了,下面是代碼:

wxml

<view>
  <button bindtap="chooseImage">選擇圖片</button>
</view>

<!-- 展示壓縮后的圖片 -->
<view style="display: flex;justify-content: center;flex-direction: column">
  <image width="50" mode="widthFix" src="{{imagePath}}"></image>
</view>

<button wx:if="{{imagePath.length>0}}" bindtap="save">點擊下載壓縮后的圖片</button>

<!-- 用來渲染的canvas --> 
<canvas canvas-id='attendCanvasId' class='myCanvas' style='width:{{cWidth}}px;height:{{cHeight}}px;position: fixed;top: -9999px;left: -9999px;'></canvas>
復制代碼

js

Page({
  data: {
    imagePath: '',
    quality: 0.2
  },
  onLoad: function (options) {
  
  },
  /**
  * 選項添加圖片事件
  */
  chooseImage: function (e) {
    var that = this;
    wx.chooseImage({
      sizeType: ['compressed'],  //可選擇原圖或壓縮后的圖片
      sourceType: ['album', 'camera'], //可選擇性開放訪問相冊、相機
      success: result => {
        wx.getImageInfo({
          src: result.tempFilePaths[0],
          success: function (res) {
            that.setData({
              cWidth: res.width,
              cHeight: res.height
            })
            that.getCanvasImg(result.tempFilePaths, res.width, res.height, that.data.quality, function (res) {
              that.setData({
                imagePath: res.tempFilePath
              });
            });
          }
        })
      }
    })
  },
  /**
   * 質量壓縮
   */
  getCanvasImg(tempFilePaths, canvasWidth, canvasHeight, quality, callback) {
    var that = this; 
    const ctx = wx.createCanvasContext('attendCanvasId');
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight);
    ctx.draw(false, function () {
      wx.canvasToTempFilePath({
        canvasId: 'attendCanvasId',
        fileType: 'jpg',
        quality: quality,
        success: function success(res) {
          callback && callback(res)
        }, fail: function (e) {
          wx.showToast({
            title: '圖片上傳失敗,請重新上傳!',
            icon: 'none'
          })
        }
      });
    });
  },
  /**
   * 圖片保存到相冊
   */
  save(e) {
    let that = this;
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success: function (res) {
        console.log('圖片已保存');
      },
      fail: function (res) {
        console.log('保存失敗');
      }
    })
  },
})
復制代碼

注意點:

  1. 注意設置canvas-id='attendCanvasId'
  2. canvas要離屏渲染,就是移出屏幕之外,但是元素還是顯示的,position: fixed;top: -9999px;left: -9999px; 不能使用 display: none; 這樣是獲取不到canvas元素的。

最后

h5頁面中也有提供這樣的方法

例如這樣子:

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
ctx.drawImage(imagePath, 0, 0, w, h);
canvas.toDataURL('image/jpeg', quality);
復制代碼

需要的小伙伴也可以自己研究研究哈...

ok, 結束, :clap:

鮮花
鮮花 (1)
雞蛋
雞蛋

剛表態過的朋友 (1 人)

分享至 : QQ空間
收藏
原作者: orangleLi 來自: 掘金
不朽的浪漫援彩金
台湾宾果28计划 绝密公式算单双99 11选5玩法前三组 皇冠比分8.99822 查询 河南地方麻将 福建31选7 意甲积分射手榜 好运快3计划和值单双 11选5开奖 股票买卖交易规则 麻将来了官方下载 北京快乐8官网开奖记录 河南体彩快赢481胆拖 黑龙江十一选五遗漏 一分十一选五实力微信群 辽宁35选7走势图