Fabric.js Bild auf Node-Server nach dem Laden von Canvas von JSON erstellen

Question

Ich habe mein Gehirn in den letzten paar Tagen versucht, dies herauszufinden. In der App, die ich schreibe, kann ein Benutzer zwei Bilder hochladen, eines das andere überlagert. Nachdem sie ein Bild übereinander gelegt haben, klicken sie auf eine Schaltfläche und die Zeichenfläche wird in JSON konvertiert und an einen Knoten- (Express-) Server gesendet. Die Zeichenfläche wird dann neu erstellt, indem die JSON-Daten in die Zeichenfläche geladen werden, toDataURL mit einem Multiplikator von 2 aufgerufen wird und die Daten in eine PNG-Datei geschrieben werden.

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

Wenn ich nicht einen Multiplizierer verwenden (d.h. Multiplizierer 1), ein 600x600px Bild erzeugt wird, wie erwartet. Aber wenn ich den Multiplikator auf 2 setze, um ein Bild mit höherer Auflösung zu erhalten, enthält nur das obere rechte Viertel des erzeugten Bildes das Bild, das von der Leinwand erstellt wurde.

PNG image that is cutoff

Ich habe Online-Ressourcen gefunden, die sagen, dass dies war ein Problem in früheren Versionen von Stoff und ich habe andere Workarounds gesehen, aber nichts scheint mein Problem zu beheben. Jede Hilfe, Beratung oder Ressourcen würden sehr geschätzt werden!

EDIT Vielleicht sollte ich ein Beispiel umfassen, wie ich die JSON Leinwand an den Server übergeben:

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

Als Referenz jemand anderem, habe ich diese beiden Zeilen:

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

Neben Ich änderte auch die Dimensionen auf alle Dimensionen, die das endgültige Bild haben sollte (in meinem Fall 1200 x 1200).