结构js – 生成的图像中的对象的位置与canvas中的不同

我正在尝试使用Fabric js来生成一些带有文本的图像。 但由于某种原因，生成的图像中文本的位置与canvas中的不一致。 以下是canvas中的图像：

但生成的图像如下所示：

我给canvas的尺寸是881×640，与我给图片的输出尺寸相同。

这是我目前在我的代码中做的。

我从URL中将背景图像添加到canvas中。 但在此之前，我首先将图像的大小调整为与canvas大小相同：

fabric.Image.fromURL(image_source, function(oImg) { oImg.width = canvas.width; oImg.height = canvas.height; canvas.add(oImg); }); 

然后，我将canvas.toJSON()调用的string化结果发送给节点js服务器，以使用AJAX生成图像：

 $.post('http://host:1212', {'canvas': JSON.stringify(canvas.toJSON())}); 

在服务器端，我加载对象并创build图像：

 var out = fs.createWriteStream(__dirname + '/uploads/' + file_name); var body = ''; request.on('data', function(data){ body += data; }); request.on('end', function(){ var request_params = qs.parse(body); //set to same size as the canvas on the client side var canvas = fabric.createCanvasForNode(881, 640); canvas.loadFromJSON(request_params.canvas, function(){ canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk){ out.write(chunk); }); stream.on('end', function(){ //close filestream out.end(); }); }); 

任何想法哪里可以我错了？

Answer 1

也许你应该尝试添加canvas.calcOffset（）：

 fabric.Image.fromURL(image_source, function(oImg) { oImg.width = canvas.width; oImg.height = canvas.height; canvas.add(oImg); //HERE canvas.calcOffset() }); 

Answer 2

我有同样的问题。 原来在fabric.js中有一个在节点上渲染的bug。 在这里阅读： https : //github.com/kangax/fabric.js/issues/1754 。

要解决这个问题，请看node_modules / fabric / dist / fabric.js – 19376行

 _getLeftOffset: function() { // if (fabric.isLikelyNode) { // return 0; // } return -this.width / 2; } 

就像上面那样，注释掉if（fabcir.isLikelyNode）…

这为我修好了。