Question

我尝试使用html2canvas捕获多个图片并使用JSZip

压缩它们

目前我正在使用JQuery数组的承诺来实现这一目标：
（代码详细信息对于回答不是很重要，只是为了让您了解我的解决方案）

$scope.loopCanvas = function (zip) {
    var deferreds = [];
    var zip = new JSZip();
    for (let i = 0; i < numberOfInnerDivs; i++) {
        var deferred = $.Deferred();
        deferreds.push(deferred.promise());
        $scope.generateCanvas(i, zip, deferred);
    }

     $.when.apply($, deferreds).then(function () {
        zip.generateAsync({ type: "blob" })
            .then(function (content) {
                var link = document.createElement('a');
                blobLink = window.URL.createObjectURL(content);
                link.addEventListener('click', function (ev) {
                    link.href = blobLink;
                    link.download = 'page' + ($scope.currentPage + 1) + '-date' + $scope.dateSearch + '.zip';
                }, false);
                link.click();
                magnaMainService.LoadingIcon.hide();
            });
    });
}

function generateCanvas(i, zip, deferred){

    html2canvas(document.querySelector("#card-" + $scope.object.id)).then(canvas => {
        zip.file($scope.object[i].name + ".png", canvas.toDataURL().substr(canvas.toDataURL().indexOf(',') + 1), { base64: true });
        deferred.resolve();
    });
}

一切正常，但每次迭代html2canvas一次又一次地加载字体，css文件和图像，其中有些甚至不需要。

我有20个图像循环和（每次迭代加载400KB）*（20次迭代）。

问题：
有没有办法在一次html2canvas迭代中生成所有分离的图像，或者只加载一次样式，或以某种方式加载较少的数据？

每次循环迭代加载html2canvas资源

0 个答案: