Question

我有一个使用Fabric.js的画布，用户可以在其中移动图像进行设计。如何从每个单独的对象获取所有数据，以便我可以在图像编辑器中重新创建它？

画布看起来像这样：

的 HTML 的

<div id="CanvasContainer">
    <canvas id="Canvas" width="270" height="519"></canvas>
</div>

的 JAVASCRIPT 的

//Defining Canvas and object array
var canvas = new fabric.Canvas('Canvas');
var canvasObject = new Array();

//When clicked
$(document).ready(function () {
    $("#Backgrounds img").click(function () {
        var getId = $(this).attr("id");

        //adding all clicked images
        var imgElement = document.getElementById(getId);
        var imgInstance = new fabric.Image(imgElement, {
            left: 135,
            top: 259,
            width: 270,
            height: 519
        });
        //Corner color for clicked images
        imgInstance.set({
            borderColor: 'white',
            cornerColor: 'black',
            transparentCorners: false,
            cornerSize: 12
        });
        canvas.add(imgInstance);
    });
});

$(document).ready(function () {
    $("#Extras img").click(function () {
        var getId = $(this).attr("id");

        //adding all clicked images
        var imgElement = document.getElementById(getId);
        var imgInstance = new fabric.Image(imgElement, {
            left: 135,
            top: 259,
            width: 270,
            height: 519
        });
        //Corner color for clicked images
        imgInstance.set({
            borderColor: 'white',
            cornerColor: 'black',
            transparentCorners: false,
            cornerSize: 12
        });
        canvas.add(imgInstance);
    });
});

//SideOptions------------
function deleteObject(){
    canvas.remove(canvas.getActiveObject());
}
function layerUpObject(){
    canvas.bringForward(canvas.getActiveObject());
}
function layerDownObject(){
    canvas.sendBackwards(canvas.getActiveObject());
}
function layerTopObject(){
    canvas.bringToFront(canvas.getActiveObject());
}
function layerBottomObject(){
    canvas.sendToBack(canvas.getActiveObject())
}

谢谢：）

编辑：基本上，我想要src，位置，比例，旋转。我猜其他数据也可能是好的，但这4个是最重要的。

Answer 1

有方法toObject()和toJSON()。

查看here如何序列化画布。

示例：

var canvas = new fabric.Canvas('c');
JSON.stringify(canvas); // '{"objects":[],"background":"rgba(0, 0, 0, 0)"}'
// or
// JSON.stringify(canvas.toJSON());

用户完成移动后如何获取有关Fabric.js画布的所有信息？

1 个答案: