Question

重要说明：在localhost中正常工作，但在实时服务器上不能正常工作。（Godadddy）

问题：

Wordpress插件在＆＃34;预览＆＃34;时出错。单击了按钮，但没有在localhost上给出相同的错误。

错误：

未捕获DOMException：无法执行＆＃39; toDataURL＆＃39;上＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。

错误行：

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标头（不起作用！）

添加＆＃39; Access-Control-Allow-Origin：*＆＃39;在插件的页面顶部如下：

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

向图像添加crossorigin属性（不起作用）

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

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

Changin Fabric.js的版本（部分工作）

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

Answer 1

升级到1.7.9，并解决其他问题。

DOMException：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布

1 个答案: