如何從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"/> 

我在這里獲得的網址是Blob-Url（blob：https％3A // fiddle.jshell.net / a5b366a2-ff0c-4c7b-9b20-a80395d7f536），我可以將其用作img src或直接在其中打開該網址一個新的標簽頁也正在打開。 無論如何，是否可以從blob對象中獲取像這樣的base64 dataUri（data：image / png; base64，R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o / XBs / fNwfjZ0frl3 / zy7 //// wAAAAA Blob）？

Answer 1

@thepio關於如何從Blob獲取dataURI是正確的：使用FileReader及其readAsDataURL()方法。
這將為您提供Blob /文件的base64編碼的 dataURI表示形式。

但是，讓我們退后一步：
您正在使用hack使用SVG的foreignObject來獲取HTML標記的屏幕截圖。

您絕對不需要Blob，也不需要base64版本在<img>元素中顯示此內容：
您只需要將dataURI的標頭設置為'data:image/svg+xml; charset=utf8, ' '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標記內）。

也許不太重要，但是某些元素（主要是輸入）上某些瀏覽器的默認樣式將消失。

因此，就您而言，我將避免使用此技巧。
獲得HTML元素的光柵版本的唯一可接受的方法是使用畫布繪制方法進行繪制，就像html2canvas和其他庫一樣。
因此，我將嘗試解決似乎不正常的當前問題。

如果不需要光柵版本，最簡單的方法是將HTML標記保存在數據庫中，然后將其附加到文檔中（但請確保已將其清除）。

Answer 2

您可以使用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; } 

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

文檔說了有關readAsDataURL ：

開始讀取指定Blob的內容，完成后，result屬性包含一個數據：表示文件數據的URL。