使用 signature_pad canvas 库生成的图片太大。但又没有提供方法来压缩。

当然这是根据你canvas的画布大小决定的，某些原因导致我的画布就得是那么大。

随随便便一个图片转化为base64 之后就是200kb-300kb。所以得想办法压缩。

思路就是把生成的base64 图片再一次放入canvas 中 ，然后等比缩小4倍即可。

save () {    if (this.$refs.signature.isEmpty() === false) {        // https://github.com/WangShayne/vue-signature        var png = this.$refs.signature.save();        this.compressedPicture(png, _ => {            console.log(_);        })    }},compressedPicture (url, callback) {    var canvas = document.createElement('canvas');     var ctx = canvas.getContext('2d');     var img = new Image;     img.onload = function(){        console.log(img.width);        var width = img.width;        var height = img.height;        // 按比例压缩4倍        var rate = (width < height ? width / height : height / width) / 4;        canvas.width = width * rate;         canvas.height = height * rate;         ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);         var dataURL = canvas.toDataURL('image/jpeg');         callback.call(this, dataURL);         canvas = null;         console.log(dataURL);    };    img.src = url},