0

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

向我展示的画布 在此处输入图像描述

jsfiddle

<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","originX":"left","originY":"top","left":1.62,"top":1.24,"width":96.75,"height":96.75,"fill":"#5c3ac1","stroke":"#000000","strokeWidth":1,"strokeDashArray":[null,null],"strokeLineCap":"null","strokeLineJoin":"null","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","path":[["m",23.772301,70.711601],["q",26.219601,18.007202,52.377899,0],["m",-46.695297,-35.564301],["c",0,-2.783001,2.2561,-5.039101,5.039101,-5.039101],["c",2.783001,0,5.039001,2.2561,5.039001,5.039101],["c",0,2.783001,-2.256004,5.038998,-5.039001,5.038998],["c",-2.783001,0,-5.039101,-2.255997,-5.039101,-5.038998],["m",30.9958,0],["c",0,-2.783001,2.2561,-5.039101,5.039097,-5.039101],["c",2.782997,0,5.039001,2.2561,5.039001,5.039101],["c",0,2.783001,-2.256004,5.038998,-5.039001,5.038998],["c",-2.782997,0,-5.039097,-2.255997,-5.039097,-5.038998],["m",-58.83381,14.467701],["l",0,0],["c",0,-26.716803,21.65821,-48.375012,48.375009,-48.375012],["c",26.716801,0,48.374996,21.658209,48.374996,48.375012],["c",0,26.716702,-21.658195,48.374996,-48.374996,48.374996],["c",-26.716799,0,-48.375009,-21.658295,-48.375009,-48.374996],["z"],["m",0,0],["l",0,0],["c",0,-26.716803,21.65821,-48.375012,48.375009,-48.375012],["c",26.716801,0,48.374996,21.658209,48.374996,48.375012],["c",0,26.716702,-21.658195,48.374996,-48.374996,48.374996],["c",-26.716799,0,-48.375009,-21.658295,-48.375009,-48.374996],["z"]],"pathOffset":{"x":49.991895500000005,"y":49.614993000000005}},{"type":"ellipse","originX":"left","originY":"top","left":22.5,"top":67,"width":32,"height":14,"fill":"#ff0000","stroke":"#ff0000","strokeWidth":null,"strokeDashArray":[null,null],"strokeLineCap":"null","strokeLineJoin":"null","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","rx":16.000001,"ry":7},{"type":"ellipse","originX":"left","originY":"top","left":43.5,"top":67,"width":33,"height":14,"fill":"#ff0000","stroke":"#ff0000","strokeWidth":null,"strokeDashArray":[null,null],"strokeLineCap":"null","strokeLineJoin":"null","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","rx":16.5,"ry":7}],"sourcePath":"assets/clipart/emoji/emoji-1.svg","identify":{"selectable":true,"type":"clipart"}}],"background":"#FFFFFF","backgroundImage":{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":760,"height":406,"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://dl.dropboxusercontent.com/u/7810832/steel-1.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"},"overlayImage":{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":760,"height":406,"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://dl.dropboxusercontent.com/u/7810832/mask_razor_power_l.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","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, function(objects, 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>
4

0 回答 0