javascript - 使用 JavaScript 从 msSaveBlob 对象客户端创建 GIF

Question

我有一个 Vue 应用程序，它只是一个 OpenLayers 地图，我可以使用从官方文档中获取的以下函数将其保存为图像。

exportMap: function () {
            this.map.once('rendercomplete', function () {
                const mapCanvas = document.createElement('canvas');
                const divElement = document.querySelector(".map");
                mapCanvas.width = divElement.offsetWidth;//size[0];
                mapCanvas.height = divElement.offsetHeight;//size[1];
                const mapContext = mapCanvas.getContext('2d');
                Array.prototype.forEach.call(
                document.querySelectorAll('.ol-layer canvas'),
                function (canvas) {
                    if (canvas.width > 0) {
                    const opacity = canvas.parentNode.style.opacity;
                    mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                    const transform = canvas.style.transform;
                    const matrix = transform
                        .match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line
                        .split(',')
                        .map(Number);
                    CanvasRenderingContext2D.prototype.setTransform.apply(
                        mapContext,
                        matrix
                    );
                    mapContext.drawImage(canvas, 0, 0);
                    }
                }
                );
                if (navigator.msSaveBlob) {
                navigator.msSaveBlob(mapCanvas.msToBlob(), 'firework_experiment.png');
                } else {
                const link = document.getElementById('image-download');
                link.href = mapCanvas.toDataURL();
                link.click();
                }
            });
            this.map.renderSync();
        }
    }

这个想法是循环我的 WMS 层的时间（只是一个循环，重新渲染地图有限次数），并在每一步保存图像window.sessionStorage，我将从中取回它们并使用少数几个库中的任何一个从图像列表中创建 .GIF。所有这些都将在客户端完成。这看起来很老套，但在理论上对我来说是合理的，但我是 Web 开发的新手，很想知道有更好的方法来解决我的问题。我的问题是，如果没有更好的方法来做到这一点，我将如何将msSaveBlob()函数中的图像存储到window.sessionStorage?

标签： javascriptimagevue.jsopenlayerssession-storage