Question

我想将服务器中的图像添加到画布然后将其导出。但是我得到了这个错误：

Uncaught SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布。

我已经陷入这种困境一个多星期了，并没有找到解决方案。

这是我尝试过的：

要将交叉原点设置为匿名：

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'; // I also tried with full url http://example.com/logo.svg

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

与1相同但使用fabricjs函数：

var src = "logo.svg"; // also tried with 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 set Access-Control-Allow-Origin "*"
</IfModule>

OR：

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

我试图在我的php文件中定义标题：
```
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);
    });
  };

我刚刚将其更改为我的脚本，现在可以了。最后

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

1 个答案: