BLOB URL не работает в Safari - PullRequest
Новая
       10

BLOB URL не работает в Safari

0 голосов
/ 28 августа 2018

Я использую D3 для создания графика и хочу экспортировать его в изображение, которое отлично работает во всех браузерах, кроме Safari. Код генерирует D3 SVG, который используется в BLOB, который используется в качестве изображения, который добавляется к холсту, который можно экспортировать. 

var blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
var url = window.URL.createObjectURL(blob);

// Put the svg into an image tag so that the Canvas element can read it in.
var img = d3.select('body').append('img')
 .attr('width', width)
 .attr('height', height)
 .node();

img.onload = function(){
  // Some method which is never called
}
img.src = url;

В Safari функция загрузки никогда не запускается, и элемент изображения также не отображает изображение. Я зарегистрировал и элемент BLOB-объекта, и URL-адрес, и оба выглядят нормально (если я вручную открываю URL-адрес BLOB-объекта в Safari, он загружает код SVG). Но он не будет отображаться как изображение, и поэтому я не могу его экспортировать.

Что-то, что я заметил, это то, что когда я проверяю элемент img и открываю src в новой вкладке, он открывается по URL https://www.mysite.nl/mypage/blob:https://www.mysite.nl/2a173f60-8b34-4b1c-894b-4ff6adcfe9fa

Так что по какой-то причине Safari интерпретирует URL-адрес BLOB как относительный, а не абсолютный. Кто-нибудь получил идею, как это исправить?

1 Ответ

0 голосов
/ 02 сентября 2018

Safari не нравится MIME-тип вашего BLOB-объекта.

Правильный - image/svg+xml заголовок кодировки бесполезен, и хотя я не уверен, что он на самом деле разрешен, он в любом случае бесполезен.

Удалите часть ;charset=utf-8 из опции type, и все будет в порядке: 

var blob = new Blob(['<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect y="0" width="100" height="100" rx="15" ry="15" x="0"></rect></svg>'], {
  type: 'image/svg+xml' // this is the only MIME for SVG
});
document.body.appendChild(
  new Image()
).src = URL.createObjectURL(blob);
...