javascript - fabric js - 生成图像中的对象与 Canvas 中的对象具有不同的定位

标签 javascript node.js canvas fabricjs

我正在尝试使用 Fabric js 生成一些带有文本的图像。但由于某种原因,生成图像中文本的位置与 Canvas 中的文本位置不一致。这是 Canvas 中的图像:

enter image description here

但是生成的图片看起来是这样的:

enter image description here

我给 Canvas 的大小是 881x640,它和我给图像的输出大小一样。

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

我正在从 URL 将背景图像添加到 Canvas 中。但在我这样做之前,我首先将图像调整为与 Canvas 大小相同:

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

然后我将 canvas.toJSON() 调用的字符串化结果发送到 Node 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();
  });
});

我有什么地方可能出错的想法吗?

最佳答案

也许你应该尝试添加 canvas.calcOffset() :

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

      //HERE
      canvas.calcOffset()

});

关于javascript - fabric js - 生成图像中的对象与 Canvas 中的对象具有不同的定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25321346/

相关文章:

javascript - RGraph 折线图上特定点的不同颜色

javascript - 如何从另一个angularjs刷新一个 Controller 的计数器值

javascript - 断言所有复选框都被选中

javascript - 所有 Node.js/Express 路由在托管服务器上返回 404

node.js - babel 安装失败,客户端路径丢失

javascript - 行未从 HTML5 Canvas 中清除

javascript - HTML Canvas 和正确显示的小问题?

javascript - regeneratorRuntime 未定义,我可以用 Gulp 解决这个问题吗?

关于排序功能的 Javascript 语法帮助

javascript - 如何在新的 es6 模块语法中表达此 Node 导出