减慢 domtoimage js 的时间

Question

我正在使用 domtoimage 库将 html（带有大量 CSS）转换为图像。

实际上我需要高清晰度图像用于打印目的（600 DPI）。因此，我将 html 缩放（缩放）到 6.25(600/96) 倍，然后使用 domtoimage 捕获它。按照我的计划，我很成功。我的图像分辨率很高，打印清晰度也令人满意。

但问题在于优化。 domtomimage 花费的时间太长。我知道这个问题是由于 html 缩放造成的，但我需要高分辨率图像。

有什么办法可以加快捕捉速度吗？我的主要重点是减少图书馆捕获和创建图像所花费的时间。

注：

1. 我也尝试过使用 phantom JS，但它不支持某些 css 属性。
2. 我也尝试过 html2canvas，它也有一些 CSS 属性的限制

仅供参考，我已添加缩放属性来绘制函数

function draw(domNode, options) {
        return toSvg(domNode, options)
            .then(util.makeImage)
            .then(util.delay(100))
            .then(function (image) {
                var canvas = newCanvas(domNode);
               // canvas.getContext('2d').drawImage(image, 0, 0);
                var ctx = canvas.getContext('2d');
                if(options.scale){
                    ctx.scale(6.25,6.25);
                }
                ctx.drawImage(image, 0, 0);
                return canvas;
            });

        function newCanvas(domNode) {
            var canvas = document.createElement('canvas');
             if(options.scale){
                 canvas.width = options.width || 6.25 * util.width(domNode); 
                 canvas.height = options.height || 6.25 * util.height(domNode); 
             }
             else{
                canvas.width = options.width || util.width(domNode);
                canvas.height = options.height || util.height(domNode);     
             }

            if (options.bgcolor) {
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = options.bgcolor;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }

            return canvas;
        }
    }

Answer 1

通过跳过字体重新渲染过程，我可以将图像生成过程加快数倍。我不确定您想要捕获什么内容，但如果它不是特定于字体的，我会根据其他几个用户的建议分叉和编辑该库，它对我有用。它还帮助我摆脱了许多由于 CORS 而失败的 XHR 请求，并且目前适用于所有浏览器。

查看：https://github.com/venkat4541/dom-to-image

根据您的字体使用情况，这可能适合您，也可能不适合您。希望有帮助。