微信小程序压缩图片，压缩图片质量非裁剪

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

//xwml
    <view>
        <button bindtap="chooseImage">选择图片</button>
    </view>
    <!-- 展示压缩后的图片 -->
    <view style="display: flex;justify-content: center;flex-direction: column">
        <image 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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

Page({
/** * 页面的初始数据 */
  data: {
     imagePath: '',
     quality: 0.2,
     cWidth: 0,
     cHeight: 0,
     timer: null
   },
 /** * 生命周期函数--监听页面加载 */
  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) {
            console.log(res.width, res.height)
        that.setData({
            cWidth: res.width,
            cHeight: res.height }, () => {
            // setData引起的页面渲染完成之后的回调函数
           // setData渲染是异步的 canvasToTempFilePath的时候canvas的大小可能还没有被重新设置
           that.getCanvasImg(result.tempFilePaths, res.width, res.height, that.data.quality);
        })
     }
  })
 }
})
},
  /** * 质量压缩 */
  getCanvasImg(tempFilePaths, canvasWidth, canvasHeight, quality) {
     var that = this;
     const ctx = wx.createCanvasContext('attendCanvasId');
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
     let pixelRatio = wx.getSystemInfoSync().pixelRatio ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight);
     ctx.draw(false, function () {
     that.data.timer = setTimeout(() => {
        wx.canvasToTempFilePath({
        canvasId: 'attendCanvasId',
        fileType: 'jpg', quality: quality,
        destWidth: canvasWidth,
        destHeight: canvasHeight,
        success: function success(res) {
        clearTimeout(that.data.timer)
        that.setData({
           imagePath: res.tempFilePath
        });
     },
     fail: function (e) {
     clearTimeout(that.data.timer)
     wx.showModal({ title: '提示', content: JSON.stringify(e),
     })
    }
   });
   }, 500)
  });
 },
   /** * 图片保存到相册 */
   save(e) {
      let that = this;
      wx.saveImageToPhotosAlbum({
          filePath: that.data.imagePath,
          success: function (res) {
         console.log('图片已保存');
     },
      fail: function (res) {
        console.log('保存失败');
    }
    })
   }
 })