Question

在最近几天我试图解决这个问题，我一直绞尽脑汁。在我写的应用程序中，用户可以上传两个图像，一个覆盖另一个。将一个图像放在另一个图像之上后，单击一个按钮，画布将转换为JSON并发送到节点（快速）服务器。然后通过将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），则会按预期创建600x600像素的图像。但是当我将乘数设置为2时，为了获得更高分辨率的图像，只有生成的图像的右上角四分之一包含从画布创建的图像。

PNG image that is cutoff

我发现在线资源说明在以前版本的结构中存在问题而且我已经看过其他人＆＃39;解决方法，但似乎没有什么能解决我的问题。任何帮助，建议或资源将不胜感激！

EDIT 也许我应该包含一个如何将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);

Answer 1

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

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

同样我也将尺寸更改为我想要最终图像的尺寸（在我的情况下为1200x1200）。

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

1 个答案: