Fabric.js从JSON加载画布后在Node服务器上创建图像

Fabric.js create image on Node server after loading canvas from JSON

本文关键字：Node 服务器 图像 创建 js JSON 加载 Fabric      更新时间：2023-09-26

过去几天我一直在绞尽脑汁想弄清楚这一点。在我正在编写的应用程序中，用户可以上传两张图像，一张覆盖另一张。将一个图像放在另一个图像的顶部后，他们单击一个按钮，画布将转换为JSON并发送到节点（express）服务器。然后，通过将JSON数据加载到画布，调用倍数为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），就会创建一个600x600px的图像，正如预期的那样。但是，当我将乘数设置为2时，为了获得更高分辨率的图像，只有生成的图像的右上四分之一包含从画布创建的图像。

截断的PNG图像

我在网上找到了一些资源，说这是以前版本的fabric中的一个问题，我也看到了其他人的解决方案，但似乎没有什么能解决我的问题。如有任何帮助、建议或资源，我们将不胜感激！

编辑也许我应该包括一个如何将JSON画布传递到服务器的示例：

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);

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

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

此外，我还将尺寸更改为我希望最终图像为的任何尺寸（在我的情况下为1200x1200）。

相关文章：