1

我在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();
});
4

0 回答 0