如何从Blob或BlobURL获取dataURL [英] How to get dataURL from Blob or BlobURL

问题描述

我需要一个div的ScreenShot，需要发送到服务器（Java）存储。我公司项目中的现有代码使用Html2Canvas.js，它获得元素（div，body ...）和返回的base64的数据，它的工作正常，但冻结Chrome中的应用程序。所以我寻找一些其他解决方案，发现下面的代码从堆栈溢出。

I need to take a ScreenShot of a div and need to send it to server(Java) to store.The existing code in my company project used Html2Canvas.js where it's getting the element(div,body ...) and returning the base64 dataURI, it's working fine but freezing the application in Chrome. So i am looking for some other solution and found the below code from stack overflow.

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或如果我直接打开那个url一个新的标签它也打开。
是否还有从这个blob URL或Blob对象获取base64数据uri（数据：image / png; base64，R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o / XBs / fNwfjZ0frl3 / zy7 //// wAAAAA）？

Here url i am getting is Blob-Url (blob:https%3A//fiddle.jshell.net/a5b366a2-ff0c-4c7b-9b20-a80395d7f536) which i am able to use as img src or if i directly open that url in a new tab it's also opening. Is there anyway to get the base64 dataUri like this (data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAA) from that blob URL or Blob object ?

推荐答案

@thepio是如何从一个Blob获取一个dataURI是正确的：使用 FileReader 其 readAsDataURL（） 方法。

这将为您提供Blob /文件的 base64编码 dataURI表示。

@thepio is right about how to get a dataURI from a Blob : use a FileReader and its readAsDataURL() method.
This will give you a base64 encoded dataURI representation of the Blob/File.

但是，让我们从你正在做的事情中退一步：

您正在使用 hack 来获取HTML标记的某种屏幕截图，使用SVG的 foreignObject 。

But, let's take a step back from what you are doing :
You are using a hack to get some kind of a screenshot of your HTML markup, using SVG's foreignObject.

你绝对不需要Blob，也不需要base64版本显示在< img> 元素中：

你只需要将dataURI的标头设置为'data：image / svg + xml; charset = utf8，'，然后附加你的svg标记，这将保存高达30％的数据大小。

有些字符需要编码，所以你可以调用 encodeURIComponent（yourSVGMarkup）。

You absolutely don't need the Blob, nor the base64 version to show this in an <img> element :
You just need to set the header of your dataURI to 'data:image/svg+xml; charset=utf8, ' and then append your svg markup, this will save up to 30% of data size.
Some characters need to be encoded though, so you can just call 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 元素。

But this will only save an svg version, which won't work in IE<11 since these browsers didn't support the foreignObject element.

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

I guess that what you want is a raster version.

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

For this, you could try to draw your svg on a canvas, using the drawImage method, and then call one of the canvas' export methods (toDataURL() or toBlob()).

但这会污染Safari 9中的画布，因为它们有一些安全问题， foreignObject 边缘有一个安全问题与svg一般。

But this will taint the canvas in Safari 9, since they have some security issue with foreignObject and on IE<Edge which had a security issue with svg in general. Tainting the canvas will make its export methods unavailable, and the whole operation a failure.

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

Also, even in browsers that would support it, there is an other big limitation :

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

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

Maybe less important but some browser's default styling will disappear on some elements (mostly inputs).

所以在你的情况下，以使用此黑客。

获取HTML元素的光栅版本的唯一可接受的方法是使用画布绘制方法绘制，就像html2canvas和其他库一样。

所以我会尝试修复当前的问题，这似乎不正常。

So in your case, I would refrain myself to use this hack.
The only acceptable way to get a raster version of your HTML elements is to draw it using the canvas drawing methods, just like html2canvas and other libraries do.
So I would try to fix the current issue which doesn't seem normal.

如果你不需要一个光栅版本，最简单的方法是只保存HTML标记在你的数据库，然后将它附加在你的文档（一定要清理它，虽然）。

If you don't need a raster version, the easiest way is to just save the HTML markup in your db, then append it in your document (be sure you cleaned it though).

这篇关于如何从Blob或BlobURL获取dataURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！