canvas.loadFromJSON() 加载空画布

问题描述

下面是我的代码。它在这里工作正常 我正在将画布 JSON 保存到数据库并从数据库中获取 JSON 并尝试在页面上呈现它，但它显示的是一个空画布。

向我展示的画布

<script src="{{URL::to('/admin/plugins/bower_components/jquery/dist/jquery.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>      
<script>      
$(function(){
    console.log('Inside preview ')  
    var canvas = new fabric.Canvas('canvas');
    //canvas.clear();
    var json = '{"objects":[{"type":"path-group","originX":"left","originY":"top","left":292,"top":79.33,"width":100,"height":100,"fill":"","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":2.15,"scaleY":2.15,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","paths":[{"type":"path","left":1.62,"top":1.24,"width":96.75,"height":96.75,"fill":"#5c3ac1","stroke":"#000000","strokeDashArray":[null,null],"strokeLineCap":"null","strokeLineJoin":"null","scaleX":1,"scaleY":1,"path":[["m",23.772301,70.711601],["q",26.219601,18.007202,52.377899,0],["m",-46.695297,-35.564301],["c",-2.783001,2.2561,-5.039101,5.039101,-5.039101],2.783001,5.039001,5.039101],-2.256004,5.038998,-5.039001,5.038998],-2.255997,-5.038998],30.9958,5.039097,2.782997,-2.782997,-5.039097,-58.83381,14.467701],["l",-26.716803,21.65821,-48.375012,48.375009,-48.375012],26.716801,48.374996,21.658209,48.375012],26.716702,-21.658195,-48.374996,48.374996],-26.716799,-48.375009,-21.658295,-48.374996],["z"],["z"]],"pathOffset":{"x":49.991895500000005,"y":49.614993000000005}},{"type":"ellipse","left":22.5,"top":67,"width":32,"height":14,"fill":"#ff0000","stroke":"#ff0000","strokeWidth":null,"rx":16.000001,"ry":7},"left":43.5,"width":33,"rx":16.5,"ry":7}],"sourcePath":"assets/clipart/emoji/emoji-1.svg","identify":{"selectable":true,"type":"clipart"}}],"background":"#FFFFFF","backgroundImage":{"type":"image","left":0,"top":0,"width":760,"height":406,"fill":"rgb(0,0)","src":"https://dl.dropBoxusercontent.com/u/7810832/steel-1.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetorSlice":"meet"},"overlayImage":{"type":"image","src":"https://dl.dropBoxusercontent.com/u/7810832/mask_razor_power_l.png","meetorSlice":"meet"}}';
    tmp = JSON.stringify(json);
    canvas.loadFromJSON(tmp,canvas.renderAll.bind(canvas));
    canvas.loadFromJSON(tmp,function(objects,options) {
        canvas.renderAll();
        setTimeout(function(){
            canvas.backgroundImage=0;
            canvas.clear();
            canvas.renderAll();
            setTimeout(function(){
                canvas.loadFromJSON(tmp,options) {
                    canvas.renderAll();
                    canvas.setActiveObject(canvas.item(0));
                });

            },3000);
        },3000);
        console.log('Load canvas');
        
    });
});
</script>    
<canvas id="canvas" width="770" height="820" style="border:1px solid #000000;"></canvas>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvas fabricjs fabricjs2