微信小程序图片压缩（OK版）

小程序压缩图片，已验证OK！

一、wx.compressImage()

官方提供的图片压缩方法，亲测iOS有效，Android基本起不到压缩的效果，反而有时候会越压越大。

二、使用canvas画图

这是很多教程都有说到的方法，但是自己试过以后，发现很多坑并没有解决。
源码：Github
这是写好的一个库，可以直接使用。下面的内容对照源码去看。
这里说一下遇到的问题：

1、canvas的宽高

    this.page.setData({ //设置画板宽高
      canWidth: systemInfo.screenWidth,
      canHeight: systemInfo.screenHeight
    })

• 设置canvas的宽高的时候一定不要动态设定，要提前设置好，不要变动，不然会出现位置大小不对等莫名其妙的问题。

2、wx.canvasToTempFilePath() 方法的使用

    ctx.draw(false, __ => {
        wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: cW,
            height: cH,
            destWidth: cW,
            destHeight: cH,
            fileType: 'jpg',
            quality, 
            canvasId: 'compressCanvasId',
            fail: e => {
            },
            success: function success(res) {
            },
       });
    });

• wx.canvasToTempFilePath() 应当写在 CanvasContext.draw() 方法的回调当中，而不应该用延时；
• 参数x、y表示截取画布的位置，参数width、height表示截取画布的大小，而不是画布canvas的位置和大小。本库中是提前设置好canvas的宽高与屏幕大小一致，然后从左上角的零点开始截取你设定的大小，最大不会超过画布的宽高。若要截取完整的图片，这里的宽高应该与ctx.drawImage(src, 0, 0,width, height)中宽高一致；
• 参数destWidth、destHeight表示输出图片的宽高，默认的是截取画布的宽高width、height * 屏幕像素密度wx.getSystemInfoSync().pixelRatio(真机是正确的，模拟器不是)。这两个值我们可以设定我们想要的宽高，但并不是宽高越小图片size就越小；
• 参数fileType必须设定为'jpg'；
• 参数quality表示输出图片的质量，只有设定这个值才能使图片的size变小。