如何从Blob或BlobURL获取数据URL

Question

我需要拍摄一个div的屏幕截图，并需要将其发送到服务器（Java）进行存储。我公司项目中的现有代码使用Html2Canvas。js获取元素的位置（div，body…）返回base64数据URI，它工作正常，但在Chrome中冻结了应用程序。因此，我正在寻找其他解决方案，并从堆栈溢出中找到以下代码。

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="height:200px;width:200px;background-color:red;font-size:40px">' +
             '<em></em> l ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             '</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
document.getElementById("image1").src=url;

<img id='image1' width="200px" height="200px"/>

在这里，我得到的网址是Blob-Url（blob：https://fiddle.jshell.net/a5b366a2-ff0c-4c7b-9b20-a80395d7f536），我可以用作img src，或者如果我直接在新标签中打开该网址，它也会打开。有没有从Blob URL或Blob对象中获取像这样的bas64 dataUri（data： Image/png； bas64， R0lGODlhEAAQAMQAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7///wAAAAA）？

Answer 1

您可以使用FileReader并按如下方式执行：

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="height:200px;width:200px;background-color:red;font-size:40px">' +
             '<em></em> l ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             '</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

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

var base64data;

var reader = new window.FileReader();
 reader.readAsDataURL(svg); 
 reader.onloadend = function() {
   base64data = reader.result; 
   document.getElementById("image1").src=base64data;
 }

html lang-html prettyprint-override"><img id='image1' width="200px" height="200px"/>

Answer 2

@关于如何从Blob获取数据URI，该IO是正确的：使用FileReader及其readAsDataURL（）方法
这将为Blob/文件提供base64编码的dataURI表示。

但是，让我们从你正在做的事情中退一步：
你正在使用HAKE获取某种HTML标记的屏幕截图，使用SVG的OutGeNobIbjts。

您绝对不需要Blob，也不需要base64版本在

var svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" style="height:200px;width:200px;background-color:red;font-size:40px">' +
  '<em></em> l ' +
  '<span style="color:white; text-shadow:0 0 2px blue;">' +
  'I\'m white'+
  '</span>' +
  '</div>' +
  '</foreignObject>' +
  '</svg>';

var dataURI = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgString);

img.src = dataURI;

<img id="img" />