URI данных для URL-адреса объекта с createObjectURL в chrome/ff

У меня есть base64 строка изображения. Как я могу преобразовать это в URL-адрес объекта? Цель состоит в том, чтобы попытаться посмотреть, будет ли мой svg-редактор работать быстрее, введя URL-адрес Blob в DOM вместо очень большой строки base64. Это используется только для редактирования SVG. При сохранении URL-адреса объектов снова преобразуются в base64.

Размер изображения обычно составляет 0,5 МБ или больше.

Что я пробовал:

var img = ...; //svg <image>
var bb = new BlobBuilder();
var dataStr = img.getAttributeNS(XLINKNS, 'href'); //data:image/jpeg;base64,xxxxxx
//dataStr = dataStr.replace(/data:.+;base64,/i, ''); //Strip data: prefix - tried both with & without
//dataStr = window.atob(dataStr); //tried both with & without

bb.append(dataStr);
var blob = bb.getBlob
img.setAttributeNS(XLINKNS, 'xlink:href', window.URL.createObjectURL(blob)); //blob:xxx

Вместо этого я получаю искаженное изображение jpeg.

ТИА.

Ответ 1

Преобразовать URI данных в файл, а затем добавить в FormData

Ответ в указанном выше вопросе работает. Мне просто нужно получить мою функцию blob сверху, и изображение будет отображаться просто отлично.

Я предполагаю, что я упустил часть обработки строки в кодировке base64. String.charCodeAt() - ответ.

Ответ 2

Попробуйте этот код.

function dataURItoBlob(dataURI) {
  var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for (var i = 0; i < binary.length; i++) {
     array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: mime});
}

и используйте его так:

var objecturl = URL.createObjectURL(dataURItoBlob('your data url goes here'));

Ответ 3

Что произойдет, если вы хотите показать html в iframe?

iframe.src = "data:text/html,"+encodeURIComponent( window.btoa(text) );