如何从 Blob 或 BlobURL 获取 dataURL

Question

我需要拍摄一个 div 的 ScreenShot 并需要将它发送到服务器（Java）进行存储。我公司项目中的现有代码使用 Html2Canvas.js 获取元素（div，body ...）并返回 base64 dataURI，它工作正常，但在 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"/>

这里我得到的 url 是 Blob-Url (blob:https%3A//fiddle.jshell.net/a5b366a2-ff0c-4c7b-9b20-a80395d7f536)，我可以将其用作 img src 或者如果我直接在一个新标签也正在打开。无论如何，是否可以从该对象 blob 的 URL 或 Blob 中获取这样的 base64 dataUri (data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7//wAAAAA)？

Answer 1

@thepio 关于如何从 Blob 获取 dataURI 是正确的：使用 aFileReader及其readAsDataURL()方法。
这将为您提供Blob/文件的base64 编码的dataURI 表示。

但是，让我们从您正在做的事情退后一步：
您正在使用hack来获取 HTML 标记的某种屏幕截图，使用 SVG 的foreignObject。

您绝对不需要 Blob 或 base64 版本来在<img>元素中显示这一点：
您只需要将 dataURI 的标头设置为'data:image/svg+xml; charset=utf8, '，然后附加您的 svg 标记，这将节省多达 30% 的数据大小。
不过，有些字符需要编码，因此您只需调用encodeURIComponent(yourSVGMarkup).

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" />

但这只会保存一个 svg 版本，它在 IE<11 中不起作用，因为这些浏览器不支持该foreignObject元素。

我想你想要的是一个光栅版本。

为此，您可以尝试使用drawImage方法在画布上绘制 svg ，然后调用画布的导出方法之一（toDataURL()或toBlob()）。

但这会污染 Safari 9 中的画布，因为它们foreignObject在 IE<Edge 上存在一些安全问题，而 svg 通常存在安全问题。污染画布将使其导出方法不可用，并且整个操作将失败。

此外，即使在支持它的浏览器中，还有一个很大的限制：

• 您在 dataURI 版本中的元素不在您的文档中，并且无法请求任何其他外部资源（CSS、字体、图像...），这意味着您需要附加它（或用于在将其转换为 dataURI 之前，svg 标记内的两个 lasts)。

也许不那么重要，但某些浏览器的默认样式会在某些元素（主要是输入）上消失。

所以在你的情况下，我会避免自己使用这个 hack。
获得 HTML 元素的光栅版本的唯一可接受的方法是使用画布绘制方法绘制它，就像 html2canvas 和其他库所做的那样。
所以我会尝试解决当前似乎不正常的问题。

如果您不需要光栅版本，最简单的方法是将 HTML 标记保存在您的数据库中，然后将其附加到您的文档中（但请确保您已清理它）。