Question

我有使用FabricJS运行PhantomJS的代码。它使用元素创建HTML5 Canvas，然后使用Canvas创建SVG。这在所有情况下都适用，除非Canvas使用PNG图像。如果Canvas使用SVG图像，则此问题不存在。它不是生成正确的SVG输出，而是输出空SVG，就像这样。

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="902" height="542" xml:space="preserve"><desc>Created with Fabric.js 1.5.0</desc><defs></defs></svg>

期待的是这个

的内容

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="902" height="542" xml:space="preserve"><desc>Created with Fabric.js 1.5.0</desc><defs></defs><g transform="translate(451 271)">
<image xlink:href="http://test2.holmescp.com/media/pdp/images/filename1446564883.png" x="-451" y="-271" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="902" height="542" preserveAspectRatio="none"></image></g></svg>

这是我的代码中最相关的部分。如果要求我会发布更多。

var pdc = PDC();
PDCExport = {

    // Lots of functions removed here because of irrelevance to question

    downloadSVG: function() {
        var self = this,
            canvasSvg = pdc.setCurrentCanvas(self.getActiveCanvas()).canvas.toSVG();
            return canvasSvg;
    }
}
// init function
PDCExport.init();
// Create SVG
console.log(PDCExport.downloadSVG());

如果我将其粘贴到Chrome Inspect Console中，我会得到空的SVG，但如果我用此替换最后一行。

setTimeout(function(){ 
    console.log(PDCExport.downloadSVG());
}, 3000);

它输出完整的SVG，在控制台中工作，但在PhantomJS中仍然失败。

我从setTimeout in Phantom.js看到setTimeout在PhantomJS中并不完全有效，在page.evaluate里面，我认为这就是我需要的。phantomjs not waiting for "full" page load和Why PhantomJS render page use window.setTimeout似乎建议PhantomJS应该能够在page.evaluate里面处理setTimeout。

我尝试使用how we can use evaluateAsync in phantomjs，但没有成功获得更好的结果。

我也尝试了一个单独的评估，但似乎它没有保留以前评估的记忆。

    return setTimeout(function(){ 
      return result = page.evaluate(function() {
        return PDCExport.downloadSVG() + '|' + 'test';
      });
    }, 3000);

我还尝试过像这样的手动setTimeout

var start_wait = new Date().getTime() / 1000;
var wait_time = 3;
var end_wait = start_wait + wait_time;
while (new Date().getTime() / 1000 < end_wait)
{
}
return PDCExport.downloadSVG() + '|' + 'test';

这些都没有奏效。如果需要，我会提供更多代码，但我的问题基本上就是这个。

如何让PhantomJS在page.evaluate内等待？

当PNG存在时，PhantomJS和FabricJS不会将Canvas转换为SVG

0 个答案: