在 Chrome 应用中使用 Fabric.js答案

【问题标题】：Using Fabric.js in a Chrome app在 Chrome 应用中使用 Fabric.js
【发布时间】：2017-01-25 07:26:24
【问题描述】：

所以，我正在构建一个简单的视频编辑器。我正在使用 Fabric.js <script src="/js/fabric.js"></script> 来操作我正在编辑的画布。

我省略了它的序列化和解析器模型，但它仍然使用 eval 来处理引发错误的事情：

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:".

fabric.Canvas(String id) 仍然有效，但形状对象无效（例如，new fabric.Rect(); 抛出 Uncaught TypeError: fabric.Circle is not a constructor）

这是我的第一个 Chrome 应用，我不太明白发生了什么。如果有人能帮我弄清楚如何在这种环境中使用 Fabric，那就太好了。

提前致谢。

【问题讨论】：

您使用的是定制的面料？我听说它有时会遗漏重要的东西。你可以使用整个库，看看它是否有效？
已知错误：github.com/kangax/fabric.js/issues/1621

标签： javascript google-chrome html5-canvas fabricjs google-chrome-app

【解决方案1】：

Fabric 不符合 'unsafe-eval' CSP 的事实是 known issue。

因此，在应用程序或扩展程序中使用它的唯一方法是对其进行沙箱处理：在加载为沙箱的帧中执行所有操作，并使用postMessage 双向传递数据。

请参阅文档文章"Using eval in Chrome Extensions. Safely."

【讨论】：