Question

我有一个图像的base64字符串。如何将其转换为对象URL？目的是通过向DOM注入Blob URL而不是非常大的base64字符串来尝试查看我的svg编辑器是否更快。这仅用于编辑SVG。保存时，对象URL将再次重新转换为base64。

图像大小通常为0.5 MB或更大。

我尝试了什么：

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图像。

TIA。

Answer 1

试试这段代码。

<div class="sidebar">
  <ul class="nav flex-column m-0">
    <li class="nav-item py-2">
      <a class="nav-link" href="#">
        <i class="fa fa-envelope-open" aria-hidden="true"></i>
        <span class="pl-1">Item</span>
      </a>
<nav class="navigation">
  <ul class="mainmenu">
  <li><a href=""><span class="sr-only"></span>Home</a></li>
    <li><a href="">About</a>
      <ul class="submenu">
        <li><a href="">Team</a></li>
        <li><a href="">Contact Us</a>
          <ul class="submenu1">
            <li><a href="">Phone</a></li>
            <li><a href="">Email</a></li>
            <li><a href="">Fax</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Our Products</a></li>
  </ul>
</nav>    </li>
  </ul>
</div>

并像这样使用

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});
}

Answer 2

Convert Data URI to File then append to FormData

上述问题的答案有效。我只需要从上面的函数中获取我的blob，图像将呈现得很好。

我想我忽略了base64编码字符串的字符串处理部分。答案是String.charCodeAt()。

Answer 3

如果你想在iframe中显示html会怎样？

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

使用chrome / ff中的createObjectURL对象URL的数据URI

4 个答案: