Почему этот SVG-холдинг `blob:` URL портит холст в Chrome? - PullRequest
Новая
       8

Почему этот SVG-холдинг `blob:` URL портит холст в Chrome?

0 голосов
/ 12 июня 2018

Я делаю следующее:

  1. Создание документа SVG в виде строки
  2. Захват его в URL-адресе blob: с new Blob и createObjectURL
  3. Создайте из него объект fabric.Image, используя fromURL
  4. В обратном вызове fromURL вызовите canvas.add, чтобы добавить новый Image на холст

Это мой код: 

var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height = "200"><foreignObject width="100%" height="100%"><text xmlns = "http://www.w3.org/1999/xhtml" style = "font-size: 40px; color: #FFFFFF">Example</text></foreignObject></svg>';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});
var svgURL = window.URL.createObjectURL(svgBlob);
 fabric.Image.fromURL(svgURL,function(oIMG) {
   oIMG.crossOrigin = 'Anonymous';
   canvas.add(oIMG);
 });

Затем я пытаюсь getImageData:

var dataImage = context.getImageData(0,0,canvas.width,canvas.height).data;

В Chrome выдает ошибку:

Uncaught DOMException: не удалось выполнить 'getImageData' для 'CanvasRenderingContext2D': холст был испорчен данными из разных источников.

Это странно, потому что я никогда не использую какие-либоURL-адреса перекрестного происхождения, только blob: URL-адресов.

В Firefox это работает отлично.Похоже, проблема связана с Chrome.

1 Ответ

0 голосов
/ 14 июня 2018

Это известная ошибка в Chrome: Канва испорчена после рисования SVG, включая .Текущий обходной путь отмечен в этом потоке:

Кажется, что в то же время холст не испорчен, если то же изображение было загружено из URI данных.

Это обеспечиваетОбходной путь.

Вы можете превратить ваш BLOB-объект в data: URL через FileReader, например, так: 

var svg = '...';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});

var reader = new FileReader();
reader.readAsDataURL(svgBlob);

reader.onload = function(e) {
    var svgDataURL = e.target.result;
    fabric.Image.fromURL(svgDataURL, function(oIMG) {
        canvas.add(oIMG);
    });
}
...