Question

我正在尝试使用“Fabricjs”从URL加载图像，同时将图像添加到画布，我在其上应用了一些“过滤器”，这会在控制台中生成错误。

Security Error: The operation is insecure.

这是我的代码：

<div>
    <canvas id="c" width="500" height="500"></canvas>
</div>

<script type="text/javascript">
    (function() {
      var canvas = this.__canvas = new fabric.Canvas('c');
      var ImageURL = "https://www.google.co.in/images/srpr/logo11w.png";
        fabric.Image.fromURL(ImageURL, function(img) {
            img.filters.push(new fabric.Image.filters.RemoveWhite({threshold: 60, distance: 10}));
            img.applyFilters(canvas.renderAll.bind(canvas));
            canvas.add(img.set({ left: 50, top: 50, angle: 30 }).scale(0.5));
        });
    })();

</script>

请查看此jsFiddle链接。

Answer 1

您无法对从其他域加载的图片执行getImageData()。这可能会引发错误。

Answer 2

好像你得到了与CORS相关的（或类似的）错误。更多信息：http://www.html5rocks.com/en/tutorials/cors/

在Image上应用过滤器时出现Fabric.js错误

2 个答案: