解决微信小程序图片在pc端压缩没效果

这种压缩是通过canvas来完成的，所以需要在wxml里面增加canvas标签来完成。
本段代码支持两种压缩：
1、手机端微信小程序压缩
2、pc端小程序压缩（解决了pc端部分机型压缩失效的问题）
3、批量压缩的图片结果按照原始顺序排列

js部分：

var c = require("./common.js");
var toConsumableArray = require("./toConsumableArray.js");
function acquireImageList(e,self,callbackFunction) {
    var o = self.data.photos.length,
        e = self.data.maxCount;
    wx.chooseImage({
        count: e - o,
        sizeType: ["compressed"],
        sourceType: ["album"],
        success: function (o) {
            c.showLoading("图片压缩中");
            var tempFiles = o.tempFiles;
            // 超过2M的图片压缩后保存在这
            var compressArray = new Array();
            // 不压缩图
            var noCompressArray = new Array();
            var maxFilesCount = -1;
            for (var i = 0; i < tempFiles.length; i++) {
                if (tempFiles[i].size > 2024000) {
                    if (maxFilesCount == -1) {
                        maxFilesCount = 1;
                    } else {
                        maxFilesCount++;
                    }
                } else {
                    noCompressArray.splice(i, 0, tempFiles[i].path);
                }
            }
            self.setData({
                maxFilesCount: maxFilesCount
            });
            for (var i = 0; i < tempFiles.length; i++) {
                if (tempFiles[i].size > 2024000) {
                    //进行二次压缩
                    getImageInfoWH(tempFiles, i, compressArray, self,callbackFunction);
                }
            }
            if (noCompressArray.length > 0) {
                self.data.photos = [].concat(toConsumableArray(self.data.photos), toConsumableArray(noCompressArray)), self.setData({
                    photos: self.data.photos
                });
                if(callbackFunction!=null){
                    callbackFunction();
                }
                c.hideLoading();
            }
        },
        fail: function (e) {
            c.hideLoading();
        }
    });
    return e;
}
   function getImageInfoWH(tempFiles, i, map, s,callbackFunction) {
    wx.getImageInfo({
        src: tempFiles[i].path,
        success(res) {
            var fileIndex = i;
            //---------利用canvas压缩图片--------------
            var ratio = getApp().globalData.pixelRatio;
            var canvasWidth = res.width; //图片原始长宽
            var canvasHeight = res.height;
            while (canvasWidth > 1200 || canvasHeight > 1200) { // 保证宽高在850以内
                canvasWidth = Math.trunc(res.width / ratio);
                canvasHeight = Math.trunc(res.height / ratio);
            }
            switch (fileIndex) {
                case 0:
                    s.setData({
                        canvasWidth0: canvasWidth,
                        canvasHeight0: canvasHeight
                    })
                    break;
                case 1:
                    s.setData({
                        canvasWidth1: canvasWidth,
                        canvasHeight1: canvasHeight
                    })
                    break;
                case 2:
                    s.setData({
                        canvasWidth2: canvasWidth,
                        canvasHeight2: canvasHeight
                    })
                    break;
                case 3:
                    s.setData({
                        canvasWidth3: canvasWidth,
                        canvasHeight3: canvasHeight
                    })
                    break;
                case 4:
                    s.setData({
                        canvasWidth4: canvasWidth,
                        canvasHeight4: canvasHeight
                    })
                    break;
                case 5:
                    s.setData({
                        canvasWidth5: canvasWidth,
                        canvasHeight5: canvasHeight
                    })
                    break;
                case 6:
                    s.setData({
                        canvasWidth6: canvasWidth,
                        canvasHeight6: canvasHeight
                    })
                    break;
                case 7:
                    s.setData({
                        canvasWidth7: canvasWidth,
                        canvasHeight7: canvasHeight
                    })
                    break;
                case 8:
                    s.setData({
                        canvasWidth8: canvasWidth,
                        canvasHeight8: canvasHeight
                    })
                    break;

            }
            setTimeout(() => {
                //----------绘制图形并取出图片路径--------------
                canvasFunction(res, canvasWidth, canvasHeight, fileIndex, map, s,callbackFunction);
            }, 200);

        }
    });
}

function canvasFunction(res, canvasWidth, canvasHeight, fileIndex, map, s,callbackFunction) {
    var ctx = wx.createCanvasContext('canvas' + fileIndex);
    ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);
    ctx.draw(false, setTimeout(function () {
        var drawIndex = fileIndex;
        wx.canvasToTempFilePath({
            destWidth: canvasWidth,
            destHeight: canvasHeight,
            canvasId: "canvas" + drawIndex,
            success: function (res) {
                var lastIndex = drawIndex;
                map.splice(lastIndex, 0, res.tempFilePath);
                console.log('绘制完成', map.length, s.data.maxFilesCount);
                if (map.length == s.data.maxFilesCount) {
                    s.data.photos = [].concat(toConsumableArray(s.data.photos), toConsumableArray(map)), s.setData({
                        photos: s.data.photos
                    });
                    if(callbackFunction != null){
                        callbackFunction();
                    }
                  
                    c.hideLoading();
                }
            },
            fail: function (res) {
                console.log(res.errMsg);
            }
        });
    }, getApp().globalData.canvasContextDrawDelay));
}
/**
 * 单图压缩上传
 * @param {} tempFiles 
 * @param {*} type 
 * @param {*} map 
 * @param {*} self 
 * @param {*} assignmentUrlFunction 
 */
function compressOneThenCanvas(self, type, tempFile, canvasName, assignmentUrl) {
    wx.getImageInfo({
        src: tempFile,
        success(res) {
            //---------利用canvas压缩图片--------------
            var ratio = getApp().globalData.pixelRatio;
            var canvasWidth = res.width; //图片原始长宽
            var canvasHeight = res.height;
            while (canvasWidth > 900 || canvasHeight > 900) { // 保证宽高在850以内
                canvasWidth = Math.trunc(res.width / ratio);
                canvasHeight = Math.trunc(res.height / ratio);
                ratio += 0.1;
            }
            canvasAssignmentFunction(self, type, canvasWidth, canvasHeight);
            setTimeout(() => {
                //----------绘制图形并取出图片路径--------------
                canvasCompressImage(res, canvasName, canvasWidth, canvasHeight, self, type, assignmentUrl);
            }, 200);

        }
    });
}

function canvasAssignmentFunction(self, type, width, height) {
    if (type == 0) {
        self.setData({
            canvasCardFrontWidth: width,
            canvasCardFrontHeight: height
        })
    } else if (type == 1) {
        self.setData({
            canvasCardBackWidth: width,
            canvasCardBackHeight: height
        })
    } else if (type == 2) {
        self.setData({
            canvasCardHandWidth: width,
            canvasCardHandHeight: height
        })
    } else {
        self.setData({
            canvasNoteHandWidth: width,
            canvasNoteHandHeight: height
        })
    };

}

function canvasCompressImage(res, canvasName, canvasWidth, canvasHeight, self, type, assignmentUrl) {
    var ctx = wx.createCanvasContext(canvasName);
    ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);
    ctx.draw(false, setTimeout(function () {
        wx.canvasToTempFilePath({
            destWidth: canvasWidth,
            destHeight: canvasHeight,
            canvasId: canvasName,
            success: function (res) {
                uploadSmrz(res.tempFilePath, assignmentUrl, self, type);
            },
            fail: function (res) {
                console.log(res.errMsg);
            }
        });
    }, getApp().globalData.canvasContextDrawDelay));
}

toConsumableArray.js的代码：

下面展示一些 内联代码片。

function _toConsumableArray(r) {
    return arrayWithoutHoles(r) || iterableToArray(r) || unsupportedIterableToArray(r) || nonIterableSpread();
}
function arrayWithoutHoles(r) {
    if (Array.isArray(r)) return arrayLikeToArray(r);
}
function iterableToArray(r) {
    if ("undefined" != typeof Symbol && Symbol.iterator in Object(r)) return Array.from(r);
}
function unsupportedIterableToArray(r, e) {
    if (r) {
        if ("string" == typeof r) return arrayLikeToArray(r, e);
        var t = Object.prototype.toString.call(r).slice(8, -1);
        return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? arrayLikeToArray(r, e) : void 0;
    }
}
function arrayLikeToArray(r, a) {
    (null == a || a > r.length) && (a = r.length);
    for (var e = 0, n = new Array(a); e < a; e++) n[e] = r[e];
    return n;
}
function nonIterableSpread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
module.exports = _toConsumableArray;
module.exports = arrayWithoutHoles;
module.exports = iterableToArray;
module.exports = unsupportedIterableToArray;
module.exports = arrayLikeToArray;

wxml部分：
下面展示一些 内联代码片。

<canvas canvas-id="canvas0" style="width:{{canvasWidth0}}px; height: {{canvasHeight0}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas1" style="width:{{canvasWidth1}}px; height: {{canvasHeight1}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas2" style="width:{{canvasWidth2}}px; height: {{canvasHeight2}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas3" style="width:{{canvasWidth3}}px; height: {{canvasHeight3}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas4" style="width:{{canvasWidth4}}px; height: {{canvasHeight4}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas5" style="width:{{canvasWidth5}}px; height: {{canvasHeight5}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas6" style="width:{{canvasWidth6}}px; height: {{canvasHeight6}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas7" style="width:{{canvasWidth7}}px; height: {{canvasHeight7}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>
<canvas canvas-id="canvas8" style="width:{{canvasWidth8}}px; height: {{canvasHeight8}}px;position: absolute;left:-1000px;top:-1000px;  "></canvas>