我有一个使用 Fabric.js 的 Canvas ,用户可以在其中移动图像来进行设计。如何从每个单独的对象中获取所有数据,以便可以在图像编辑器中重新创建它?
Canvas 看起来像这样:
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 个是最重要的。
最佳答案
有方法toObject()
和toJSON()
。
看here如何序列化 Canvas 。
示例:
var canvas = new fabric.Canvas('c');
JSON.stringify(canvas); // '{"objects":[],"background":"rgba(0, 0, 0, 0)"}'
// or
// JSON.stringify(canvas.toJSON());
关于javascript - 用户完成移动后如何获取有关 Fabric.js Canvas 的所有信息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20031063/