由 JSON 导入时 FabricJs 图像未加载答案

【问题标题】：FabricJs image not loading when imported by JSON由 JSON 导入时 FabricJs 图像未加载
【发布时间】：2015-02-15 06:29:03
【问题描述】：

我正在尝试使用 fabricjs 将一些图像加载到画布上。在使用 JSON.stringify(canvas);.

之前，它们已经由 fabricjs 导出

这是我用来导入 JSON 对象的代码：

var canvas = this.__canvas = new fabric.Canvas('c');
var json2 = {"objects":[{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":257,"height":258,"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":"http://fabricjs.com/article_assets/9.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":""};

canvas.loadFromJSON(json2, canvas.renderAll.bind(canvas));

当我对 rect 对象执行相同操作时，它会很好地加载。只有图像没有被加载。我在这里添加了一个示例小提琴：http://jsfiddle.net/waaqk9tr/5/

这里有什么问题？

【问题讨论】：

标签： json image loading fabricjs

【解决方案1】：

服务器 fabricjs.com 不允许跨域请求。如果您查看浏览器的网络检查器或控制台，您将看到错误：

[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.
    fromObject (fabric.min.js, line 5)
    (anonymous function) (fabric.min.js, line 1)
    forEach
    enlivenObjects (fabric.min.js, line 1)
    _enlivenObjects (fabric.min.js, line 3)
    loadFromJSON (fabric.min.js, line 3)
    (anonymous function) (_display, line 39)
    j (jquery.min.js, line 2)
    add (jquery.min.js, line 2)
    ready (jquery.min.js, line 2)
    onload (_display, line 26)

您可能只是在玩玩，实际上并不需要从 fabricjs.com 加载图像。如果你这样做了，那么你将不得不采用一种变通方法。您会看到，您的浏览器发送一个 Origin 标头，其中包含运行您的 javascript 的站点域（在本例中为 jsfiddle.net），您无法修改该标头。然后服务器fabricjs.com 看到标头并拒绝请求。

一种解决方法是通过服务器代理图像请求。或者为了好玩，您可以尝试在单独的浏览器选项卡中打开 http://fabricjs.com/article_assets/9.png 以放入浏览器的 HTTP 缓存中，然后再次运行 fiddle，这会导致图像从缓存中加载。这对我有用，我在画布上看到了小狗，但这不是一个合法的解决方案。

【讨论】：