Question

我在fabricjs中遇到canvas.loadFromDatalessJSON（savedDataDLJSON）的问题。当我的画布与我的简单矩形一切都很好，但当我添加img（简单图像），画布不想加载（矩形和图像），我没有任何错误。所以我显示了json，我认为这是正常的，我将src更改为'my_link_to_image'但是图像src是正确的。

{"objects":[{"type":"rect","originX":"center","originY":"center","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"image","originX":"center","originY":"center","left":314,"top":101,"width":70,"height":70,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"http://my_link_to_image","filters":[]}],"background":"cyan"}

保存并加载点击事件

    $("#save").click(function() {
    savedDataDLJSON = JSON.stringify(canvas.toDatalessJSON())
    canvas.clear();
});

$("#load").click(function(){
    console.log(savedDataDLJSON);
    canvas.loadFromDatalessJSON(savedDataDLJSON);
    canvas.renderAll();
});

Fabricjs并没有加载画布

0 个答案: