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

Question

重要提示：在本地主机上工作正常，但在实时服务器上不行。 (Godaddy)

问题：

Wordpress plugin is giving an error when "preview" button clicked which is not giving the same error on localhost.

错误：

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

错误行：

var data = canvasObj.toDataURL()

canvasObj的初始化：

canvasObj= new fabric.Canvas('wtd_background_image');

正在将图像设置为 canvasObj:

  function wtd_load_bg_image( img_url ) 
  {    
    if( img_url )
    {
      var bg_img = new Image(); 
      bg_img.setAttribute('crossOrigin', '');
      bg_img.onload = function()
      {
        canvasObj.setBackgroundImage(bg_img.src, canvasObj.renderAll.bind(canvasObj), {
          originX: 'left',
          originY: 'top',
          left: 0,
          top: 0
        });
      };      
      bg_img.src = img_url;
    }      
  }

我在网上找到的解决方案，但没有用：

修改 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>

添加 PHP Header（没用！）

将 'Access-Control-Allow-Origin: *' 添加到插件页面的顶部，如下所示：

<?php
require_once('../../../../wp-load.php');
//header('HTTP/1.1 200 OK');
header('Access-Control-Allow-Origin: *');
get_header();

向图像添加 crossorigin 属性（无效）

我在上面的图像中添加了以下代码

bg_img.setAttribute('crossOrigin', '');

更改 Fabric.js 的版本（部分有效）

将 Fabric.js 版本从 1.2.0 更改为其他版本，此错误消失，但出现新错误。所以我不喜欢。

Answer 1

升级到1.7.9，解决其他问题

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

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

javascript

jquery

dom

fabricjs