URI данных для URL объекта с помощью createObjectURL в chrome/ff

Question

У меня есть 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.

ТИА.

Answer 1

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

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

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

Answer 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'));

Answer 3

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

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

Answer 4

Если кто-то хочет сохранить URI данных как изображение на сервере:

Передайте URI данных на сервер по почтовому запросу:

var imgData = canvas.toDataURL('image/png');
$.post("https://path-to-your-script/capture.php", {image: imgData},
    function(data) {
        console.log('posted');
});

Сохранить изображение: capture.php

$data = $_POST['image'];

// remove "data:image/png;base64," from image data.
$data = str_replace("data:image/png;base64,", "", $data);

// save to file
file_put_contents("/tmp/image.png", base64_decode($data));