холст - ошибка броска испорченного после LoadFromJson - PullRequest
Новая
       21

холст - ошибка броска испорченного после LoadFromJson

0 голосов
/ 14 декабря 2018

Я использую ткань JS версии 1.7.22

, когда изображение устанавливается в виде прямоугольника в прямоугольнике из ткани JS, при первом запуске оно будет загружено и сохранено в JSON с помощью toJSON () и сохранено.изображение с использованием метода todataUrl (), но при вызове метода canvas canvas для метода loadFromJson в то время этот холст невозможно сохранить, поскольку он выдает ошибку tainted canvas.

Помогите,

Я уже установилCrossOrigin в шаблоне, но он не работает.и не добавлено в холст JSON.

Я создал одну скрипку для создания проблемы: 

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

Шаги для создания проблемы:

нажмите «Установить шаблон»

затем нажмите «сохранить холст»

, затем нажмите «перезагрузить холст» // загрузить холст из JSON

, затем нажмите «сохранить холст» // вызвать проблему испорченного холста

1 Ответ

0 голосов
/ 14 декабря 2018

Эта проблема уже исправлена ​​в новой версии fabricjs.Если вы все еще используете 1.7.20 для переопределения fabric.Pattern.prototype.toObject и fabric.Pattern.prototype.initialize, найдите код во фрагменте. 

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>
...