画布在 LoadFromJson 后抛出污染错误

Posted 2023-03-25

【中文标题】画布在 LoadFromJson 后抛出污染错误

【英文标题】：canvas is throw error of tainted after LoadFromJson

【发布时间】：2019-05-15 09:21:33

【问题描述】：

我使用的是fabric js 1.7.22版

当图像以重复方式设置在织物js的矩形中时，在 第一次将使用 toJSON() 加载并保存到 JSON 中 并使用 todataUrl() 方法保存图像，但是当时在画布上调用 loadFromJson 方法时，此画布不可保存，因为它会抛出 tainted canvas 错误。

请帮帮我，

我已经在模式中设置了 crossOrigin，但它不起作用。并不是 在画布 JSON 中添加。

我为生成问题制作了一个小提琴：

[http://jsfiddle.net/Mark_1998/kt387vLc/1/][1]

产生问题的步骤：

点击“设置模式”

然后点击“保存画布”

然后点击“重新加载画布” // 从 JSON 加载画布

然后点击“保存画布”//导致画布被污染的问题

【问题讨论】：

Why can't I force download of tainted canvas and why is it a security issue?的可能重复

【参考方案1】：

这个问题已经在新版本的 fabricjs 中得到修复。如果你还在使用 1.7.20 覆盖 fabric.Pattern.prototype.toObject 和 fabric.Pattern.prototype.initialize，请在 sn-p 中查找代码。

var canvas = new fabric.Canvas('canvas', 
  height: 500,
  width: 500,
);
canvas.backgroundColor = '#ff0000';
canvas.renderAll();
var canvasJSON = ;

document.getElementById('setPat').addEventListener('click', function() 
  fabric.util.loadImage('https://cdn.dribbble.com/assets/icon-backtotop-1b04df73090f6b0f3192a3b71874ca3b3cc19dff16adc6cf365cd0c75897f6c0.png', function(image) 
    var pattern = new fabric.Pattern(
      source: image,
      repeat: 'repeat',
      crossOrigin: 'Anonymous'
    );
    var patternObject = new fabric.Rect(
      left: 0,
      top: 0,
      height: canvas.height,
      width: canvas.width,
      angle: 0,
      fill: pattern,
      objectCaching: false
    )
    canvas.add(patternObject);
  , null, 
    crossOrigin: 'Anonymous'
  );
)
document.getElementById('saveCanvas').addEventListener('click', function() 
  console.log('save canvas');
  canvasJSON = canvas.toJSON();
  var image = canvas.toDataURL("image/png", 
    crossOrigin: 'Anonymous'
  ); // don't remove this, i need it as thumbnail.
  //console.log('canvas.Json', canvasJSON);
  //console.log('image', image);
  canvas.clear();
  canvas.backgroundColor = '#ff0000';
  canvas.renderAll();
);
document.getElementById('reloadCanvas').addEventListener('click', function() 
  console.log('save canvas');
  canvas.loadFromJSON(canvasJSON, function() 
    canvas.set(
      crossOrigin: 'Anonymous'
    )
  );
  console.log('canvas.Json', canvasJSON);
);

//cross origin was not added in toObject JSON
fabric.Pattern.prototype.toObject = (function(toObject) 
  return function() 
    return fabric.util.object.extend(toObject.call(this), 
      crossOrigin: this.crossOrigin,
      patternTransform: this.patternTransform ? this.patternTransform.concat() : null
    );
  ;
)(fabric.Pattern.prototype.toObject);
//cross origin was not added while creating image
fabric.Pattern.prototype.initialize = function(options, callback) 
  options || (options = );

  this.id = fabric.Object.__uid++;
  this.setOptions(options);
  if (!options.source || (options.source && typeof options.source !== 'string')) 
    callback && callback(this);
    return;
  
  // function string
  if (typeof fabric.util.getFunctionBody(options.source) !== 'undefined') 
    this.source = new Function(fabric.util.getFunctionBody(options.source));
    callback && callback(this);
   else 
    // img src string
    var _this = this;
    this.source = fabric.util.createImage();
    fabric.util.loadImage(options.source, function(img) 
      _this.source = img;
      callback && callback(_this);
    , null, this.crossOrigin);
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<button id="setPat">
  Set pattern
</button>
<button id="saveCanvas">
  Save canvas
</button>
<button id="reloadCanvas">
  Reload CAnvas
</button>
<canvas id="canvas"></canvas>

【讨论】：

我非常感谢你。这对我来说是一个完美的解决方案。