Question

当我尝试从我的服务器添加图像时，Fabricjs 污染了画布

2015-03-24

1813

.htaccess canvas fabricjs

我想将服务器中的图像添加到画布，然后将其导出。但是我收到此错误：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我陷入这种困境已经一个多星期了，还没有找到解决办法。

这是我尝试过的方法：

将交叉来源设置为匿名：

var img = new Image();
img.onload = function () {
var imgInstance = new fabric.Image(img, {
scaleX: 1,
scaleY: 1
})
canvas.add(imgInstance);
}
img.src = event.target.result;
img.crossOrigin = 'Anonymous';
img.src = 'logo.svg'; // 我也尝试使用完整网址 http://example.com/logo.svg

没有成功。图像已应用于画布，但我无法导出它。

与 1) 相同，但使用 fabricjs 函数：

var src = "logo.svg"; // 也尝试使用 http://example.com/logo.svg

fabric.util.loadImage(src, function(img) {
var object = new fabric.Image(img);
object.set({
left: 0,
top: 0
});
object.hasRotatingPoint = true;
object.scaleX = object.scaleY = 1;
canvas.add(object);
canvas.renderAll();
}, null, {crossOrigin: 'Anonymous'});

使用服务器端 (php)。 不推荐。坏主意 。部分可行，但不行。

<?php
$path = 'http://nistorcristian.com/comixer/logo.svg';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/svg+xml;/' . $type . ';base64,' . base64_encode($data);
?>

fabric.Image.fromURL('<?=$base64?>', function(obj2) {
canvas.add(obj2);
});

设置 .htaccess：

<IfModule mod_headers.c>
Header 设置 Access-Control-Allow-Origin "*"
</IfModule>

或者：

<FilesMatch "\.(svg|svgz)$">
SetEnvIf Origin »
"^http(s)?://(.+\.)?(example\.com)$" origin_is=$0
Header 设置 Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

我尝试在我的 php 文件中定义 header：
```
header("Access-Control-Allow-Origin: *");
```

还是没运气。只要有办法就好了 :) 谢谢

Answer 1

好的...我刚刚发现。我在 fabricjs 的这个演示（ http://fabricjs.com/kitchensink/ ）中看到，他们能够导出 svg...所以我查看了他们的代码，看到了这个：

var addShape = function(shapeName) {

    console.log('adding shape', shapeName);

    var coord = getRandomLeftTop();

    fabric.loadSVGFromURL('../assets/' + shapeName + '.svg', function(objects, options) {

      var loadedObject = fabric.util.groupSVGElements(objects, options);

      loadedObject.set({
        left: coord.left,
        top: coord.top,
        angle: getRandomInt(-10, 10)
      })
      .setCoords();

      canvas.add(loadedObject);
    });
  };

我刚刚将其更改为在我的脚本上运行，现在一切正常。终于