从“外部”源将图像加载到画布并保存答案

【问题标题】：Load image to canvas from 'external' source and save it从“外部”源将图像加载到画布并保存
【发布时间】：2015-05-23 23:49:32
【问题描述】：

我想做的是从我的服务器加载图像并将其添加到画布，然后我想保存它。

将图像添加到画布。完毕当我按下保存时，它会抛出一个错误。

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

我在这里和谷歌上搜索了一些关于这个错误的信息，但我无法解决它。

我正在将 crossOrigin 设置为 Anonymous，因为我阅读了我需要做的事情。

var src = "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'});

然后我读到我必须在 .htaccess 中添加一些规则。

Access-Control-Allow-Origin header

所以我在我的域上创建了一个 .htaccess，其中包含以下几行：

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

然后我检查了 mod_setenvif.c 和 mod_headers.c 是否启用：

<?php if (strpos(shell_exec('/usr/local/apache/bin/apachectl -l'), 'mod_headers.c') !== false) {
    echo 'Yes';
}else{
    echo 'No';
} ?>

对于两者我都得到“是”。

任何建议都会很棒。

谢谢

编辑：

我正在尝试将图像从我的服务器添加到画布。

【问题讨论】：

标签： javascript php .htaccess fabricjs

【解决方案1】：

在我看来，您没有正确引用该图像，因为您需要一个完整的 Web URL 才能访问该图像。举个例子：

var src = "http://www.mywebserver.com/images/logo.svg";

您不应该需要跨源或 .htaccess 修改。您的最终代码应类似于：

var src = "http://www.mywebserver.com/images/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();    
}

【讨论】：

我遇到了同样的错误：未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

【解决方案2】：

设置crossOrigin: 'Anonymous' 将解决这个被污染的画布问题。

例子：

fabric.util.loadImage('sample.png', function(img) {
 ....
}, null, {crossOrigin: 'Anonymous'});

参考： https://github.com/kangax/fabric.js/issues/1386

【讨论】：