Fabric.js从JSON加载canvas后，在Node服务器上创build图像

过去几天里，我一直在试图弄清楚这个问题。 在我写的应用程序中，用户可以上传两个图像，一个覆盖另一个。 将一个图像放在另一个图像的顶部之后，他们点击一个button，canvas转换为JSON并发送到节点（快速）服务器。 然后通过将JSON数据加载到canvas重新创buildcanvas，使用乘数2调用toDataURL并将数据写入png文件。

router.post('/', function(req, res) { var canvas = fabric.createCanvasForNode(600, 600); canvas.loadFromJSON(req.body, function() { var dataUrl = canvas.toDataURL({ format: 'png', multiplier: 2 }); imageSrc = dataUrl.replace(/^data:image\/png;base64,/, ""); fs.writeFile('hello.png', imageSrc, 'base64', function(err) { console.log('Error: ' + err); }); }); 

如果我不使用乘数（即乘数为1），则会按预期创build600x600像素的图像。 但是，当我将倍数设置为2时，为了获得更高分辨率的图像，只有生成的图像的右上angular包含从canvas创build的图像。

PNG图像是截止的

我发现在线资源说这是以前版本的面料的一个问题，我已经看到别人的解决方法，但似乎没有解决我的问题。 任何帮助，build议或资源将不胜感激！

编辑也许我应该包括一个如何将JSONcanvas传递给服务器的示例：

 var json = JSON.stringify(canvas); var http = new XMLHttpRequest(); var url = '/designer'; http.open('POST', url, true); http.setRequestHeader('Content-type', 'application/json'); http.onreadystatechange = function () { if (http.readyState == 4 && http.status == 200) { alert(http.responseText); } }; http.send(json); 

Answer 1

对于其他人的参考，我添加了这两行：

 var ctx = canvas.getContext('2d'); ctx.scale(2,2); 

而且我也把尺寸改成了我想要的最终图像的尺寸（在我的例子中是1200×1200）。