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です：私はできる午前（ブロブのhttps％3A // fiddle.jshell.net/a5b366a2-ff0c-4c7b-9b20-a80395d7f536） img srcとして使用するか、または新しいタブでそのURLを直接開くこともできます。 このBLOB URLまたはBlobオブジェクトから、base64 dataUriをこのように取得する方法はありますか（data：image/png; base64、R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7 //// wAAAAA）

Answer 1

あなたはFileReaderのを使用して、このようにそれを行うことができます：指定されたBLOBの内容を読み出す

開始、一度完成：

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言いますresult属性には、ファイルのデータを表すdata：URLが含まれています。 FileReaderとそのreadAsDataURL()メソッドを使用します。

Answer 2

@thepioは、BLOBからdataURIを取得する方法についての権利です。
これは、BLOB /ファイルのbase64で符号化されたのdataURIを提供します。

しかし、あなたがやっていることから、バックステップを見てみましょう：あなたはを使用している
あなたのHTMLマークアップのスクリーンショットのいくつかの種類を取得するためにをハック、SVGのforeignObjectを使用。

あなたは絶対<img>要素でこれを表示するためにブロブ、またbase64でバージョンを必要としない：これは、最大保存されます
はあなただけ'data:image/svg+xml; charset=utf8, 'にごdataURIのヘッダーを設定してから、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" />

しかし、これは、これらのブラウザはforeignObject要素をサポートしていませんでしたので、IE < 11では動作しませんSVGのバージョンを、保存されます。

あなたが望むのはラスターバージョンだと思います。

drawImageメソッドを使用してキャンバスにあなたのsvgを描画し、キャンバスの書き出しメソッド（toDataURL()またはtoBlob()）の1つを呼び出すことができます。

しかし、Safari 9にキャンバスが汚れてしまうのは、foreignObjectというセキュリティ上の問題があり、一般的にはsvgのセキュリティに問題があったIE < Edgeです。キャンバスを汚すと、エクスポートメソッドが使用できなくなり、操作全体が失敗します。

また、もそれをサポートするブラウザで、他の大きな制限があります：dataURIバージョン内部

• あなたの要素は、ドキュメントの外にあり、かつ他の外部リソースを要求することができません（CSS、フォント、画像など）。これは、svgマークアップ内にdataURIに変換する前に、それを追加する必要があることを意味します（2つの最後にdataURIでエンコードされたバージョン）。

多分あまり重要ではないかもしれませんが、ブラウザのデフォルトのスタイリングは一部の要素（ほとんどの入力）で消えてしまいます。

あなたのケースでは、私はこのハックを使用することを控えています。
HTML要素のラスターバージョンを取得するには、html2canvasや他のライブラリと同様にキャンバス描画メソッドを使用して描画するだけです。
だから私は今の問題を解決しようとします。

ラスタバージョンが必要ない場合、最も簡単な方法は、HTMLマークアップをデータベースに保存してから文書に追加することです（きれいにしてください）。