fabric js-生成圖像中的對象的位置與畫布中的對象的位置不同

Question

我正在嘗試使用Fabric js生成一些帶有文本的圖像。 但是由於某種原因，文本在生成的圖像中的位置與畫布中的文本不一致。 這是它在畫布中的外觀圖像：

但是生成的圖像如下所示：

我給畫布的尺寸為881x640，與我給圖像的輸出尺寸相同。

這是我當前在代碼中所做的事情。

我正在將背景圖片從URL添加到畫布中。 但是在做之前，我首先將圖像調整為與畫布相同的尺寸：

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

然后，我將canvas.toJSON()調用的字符串化結果發送到節點js服務器以使用AJAX生成圖像：

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

然后在服務器端加載對象並創建圖像：

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中存在一個錯誤，無法在節點上進行渲染。 在這里閱讀有關內容： 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）...

這為我解決了。