我正在尝试使用 Fabric js 生成一些带有文本的图像。但由于某种原因,生成图像中文本的位置与 Canvas 中的文本位置不一致。这是 Canvas 中的图像:
但是生成的图片看起来是这样的:
我给 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/