0

現在、ウェブクリッピングクローム拡張機能を作成しようとしています。

私は2つのオプションを検討しました

  1. html2canvasを使用して選択した要素のhtmlをcanvas要素にレンダリングし、オプションで、 canvas2imageを使用して画像ファイルとして保存します。

  2. 2番目のオプションは、選択した要素の内部htmlとそのスタイルを取得し、クリップボードに要素を再現することです。

どちらの方法でも、最初にユーザーが選択ボックスなどをドラッグして要素をグラフィカルに選択できるようにする必要がありますが、その方法を実際に理解することはできません。可能な解決策は何ですか？

ちなみに、上記の2つの方法の実現可能性についていくつかの意見をいただければ幸いです。

ありがとう ：）

4

2 に答える 2

2 
var selection = document.getSelection();
var range = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
var html = div.innerHTML;
return html;

これで仕事は終わりです:)。通常のテキスト、画像、YouTubeビデオでもテスト済み:)。

于 2012-09-14T17:16:49.653 に答える
1

コメントでの会話のとおり。ユーザー選択から画像を取得するためのソリューションを投稿しています

ユーザーが選択したコンテンツを解析した後に画像を取得する手順は次のとおりです

すでに述べたように、これを使用して選択したHTMLを取得します

 $sel = document.commandDispatcher.focusedWindow.getSelection();

これで、ユーザー選択の完全なinnerHTMLと、それを処理するために文字列にシリアル化する必要のあるタグと属性が得られました。

var node = sel.getRangeAt(0).cloneContents();       
var htmlContent = new XMLSerializer().serializeToString(node);

後でjavascriptDOMパーサーを使用してhtmlcontentを解析します

各要素をループして画像タグを取得します

このような

 var parser = new DOMParser();
 var xmlDoc = parser.parseFromString(htmlContent, "text/xml");

解析するforeach画像タグ

 var image_src = xmlDoc.getElementsByTagName("img")[0].getAttribute("src");

これで、変数image_srcは、選択された画像ユーザーの実際の完全なsrcパスを保持します</ p>

于 2012-09-14T16:56:43.267 に答える