You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用FabricJS加载Canvas JSON内容失败,请求技术帮助

问题:FabricJS加载JSON文件后Canvas无内容显示

我有一个基于FabricJS设计的JSON文件,对应的设计效果如下:
设计截图

我希望将该JSON文件加载到Canvas中,查阅资料得知可通过loadFromJSON方法实现,于是编写了如下代码:

JavaScript代码

var canvas = new fabric.Canvas('canvas');

$("#setGraph").click(function(){
  
  var settings = {
    "url": "https://amz-rekognition.s3.amazonaws.com/json/demo2.json",
    "method": "GET",
    "timeout": 0
    };

  jQuery.ajax(settings).done(function (response) {
    
    var json = JSON.stringify(response);
    console.log(json);
    canvas.clear();
    canvas.loadFromJSON(json, function() {
       canvas.renderAll(); 
    },function(o,object){
       console.log(o,object)
    })

  });

});

CSS代码

#canvas{border:1px solid #CCC;}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<script src="https://amz-rekognition.s3.amazonaws.com/json/fabric.curvedText.js"></script>
<canvas id="canvas" width="216" height="216"></canvas>
<button type="button" id="setGraph">insert graph</button>

但点击按钮后,Canvas中并未显示任何对象,结果如下:
结果截图

恳请提供技术帮助。

内容的提问来源于stack exchange,提问作者NekoLopez

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 20:33:00