学习fabric.js对象转json存储并通过json转对象添加到画布中

最新推荐文章于 2024-08-29 08:56:49 发布

徊忆羽菲

最新推荐文章于 2024-08-29 08:56:49 发布

阅读量3k

点赞数

分类专栏： Fabric.js Html Javascript 文章标签： javascript json fabric

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/127241239

版权

Html 同时被 3 个专栏收录

261 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

Fabric.js

17 篇文章

订阅专栏

对象转json

关键代码：

canvas.toJSON();

index.html代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">


    <title>Fabric.js 上传图片保存</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

    <style>
        div#container {
            padding: 30px;
            font-family: 'verdana', lucida;
        }

        input {
            background-color: #ccc;
            padding: 0;
            width: 300px;
            color: #777;
        }

        a {
            color: #777;
            display: block;
            background-color: #ccc;
            width: 300px;
            padding: 0;
            margin-top: 2px;
            text-decoration: none;
        }
    </style>

</head>
<body>

<div id="container">
    <canvas id="imageCanvas" width="300" height="300"></canvas>
    <a id="lnkDownload" href="#">Save image</a>
</div>


<script src="script.js"></script>

</body>
</html>

script.js 代码

var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(240,240,240)',
    includeDefaultValues: false // 指示toObject/toDatalessObject是否应该包含默认值，如果设置为false，则优先于对象值

});

canvas.setWidth(600);
canvas.setHeight(600);
// 矩形
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'orange',
    width: 100,
    height: 100
})
canvas.add(rect);

// 圆角矩形
var rect2 = new fabric.Rect({
    left: 300,
    top: 100,
    fill: 'yellowgreen',
    width: 100,
    height: 100,
    rx: 20,
    ry: 20
})
canvas.add(rect2);

// 圆形
var circle = new fabric.Circle({
    radius: 50,
    fill: 'green',
    left: 200,
    top: 200,
    controls: false, // 不可编辑
    hasControls: false, // 控件将不显示，并且不能用于操作对象
});

canvas.add(circle);

// 使用 IText，可编辑文本
var text = new fabric.IText(
    '雷猴啊，双击打几个字试下~',
    {
        fontFamily: 'Comic Sans'
    }
)
canvas.add(text);


var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e) {
    console.log('toJSON==', canvas.toJSON());
    console.log('toObject==', canvas.toObject()); // 输出序列化的内容 
}

JSON对象直接渲染到画布

注意，会清除当前画布内容

方法一

canvas.loadFromJSON(rectJSON, canvas.renderAll.bind(canvas));

方法二

canvas.loadFromJSON(rectJSON, canvas.renderAll.bind(canvas), function(o, object) {
    // `o` = json object
    // `object` = fabric.Object instance
    // ... do some stuff ...
});

加载json到画布代码

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">


    <title>Fabric.js 加载json</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
 
</head>
<body>

<div id="container">
    <canvas id="imageCanvas" width="300" height="300"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>

script.js

var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(240,240,240)',
    includeDefaultValues: false // 指示toObject/toDatalessObject是否应该包含默认值，如果设置为false，则优先于对象值
});

canvas.setWidth(800);
canvas.setHeight(800);

var rectJSON = '{"objects":[{"type":"rect","left":50,"top":253,"width":100,"height":100,"fill":"orange"},{"type":"rect","left":449,"top":257,"width":100,"height":100,"fill":"yellowgreen","rx":20,"ry":20},{"type":"circle","left":248,"top":246,"width":100,"height":100,"fill":"green","radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"i-text","left":77,"top":153,"width":509.67,"height":52.43,"text":"雷猴啊，双击打几个字试下~","fontFamily":"Comic Sans","styles":{}}],"background":"rgb(240,240,240)","backgroundImage":{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":1080,"height":1920,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","src":"https://file.mendianzhang.com/Advertising/20211223HH241220211223HH2412.jpg","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}}';

//方法一：
//canvas.loadFromJSON(rectJSON, canvas.renderAll.bind(canvas));

//方法二：
canvas.loadFromJSON(rectJSON, canvas.renderAll.bind(canvas), function(o, object) {
    // `o` = json object
    // `object` = fabric.Object instance
    // ... do some stuff ...
});

在这里插入图片描述