JavaScriptを使用して、Webページ内にテキストや画像を含まない空の領域を検出する方法はありますか？Webページの空き領域を検出する方法
より正確には、ポイント[X、Y]が（赤でマーク）は、次の例のように、空白領域内にあるかどうかを確認する方法
編集：私は私の質問を作りたいです私は検索結果に（信頼できる）または（迷惑メール）とマークすると思われる拡張機能を構築しています。結果項目URLのテキストの最後にマーキングを入れたいと思います。 私は一般的なやり方でやりたいので、GoogleのWebページでしか動かないでしょう。例を以下に示します。
は、行列の要素
for(k=0;k < dom_elements.length;k++) {
for(i=dom_elements[k].y;i < dom_elements[k].length;i++) {
for(j=dom_elements[k].x;j < dom_elements[k].width;j++) {
matrix[i][j] = 1 ;
}
}
}
を描き、最後にmatrix[i][j]がゼロに設定されているかどうかをチェック助けたり、 1
1つのアプローチは、ウィンドウのスクリーンショットで作業することです。
html2canvasのようなライブラリを使用して、スクリーンショットをHTMLキャンバス要素に読み込むことができます。今
var pixelData = canvas.getContext('2d').getImageData(
event.offsetX,
event.offsetY, 1, 1)
.data;
の全て（または少なくとも最初の3つ）pixelDataのアイテムが255に等しい場合、それを：
次に、window.onclickに、座標クリックのRGBAの配列を取得するために、自動eventパラメータを使用しますこの点が白であることを意味します。もちろん
if (pixelData[0] == 255 && pixelData[1] == 255 && pixelData[2] == 255) {
// the clicked point is white,
// and if the background-color is white,
// it can be considered an empty point
}
、下側は、あなたがテストしているサイト、またはあなたがクリックする要素の背景色の背景色を知っている必要があることである。
あなたはのためにテストすることができますこのような本物のホワイトスペース：coordsは.xと.yプロパティを持つオブジェクトです
function isWhiteSpace(coords) {
var element = document.elementFromPoint(coords.x, coords.y);
var whitespace = $(document).add("body, html");
return (whitespace.get().indexOf(element) > -1) ? true : false;
}
。
document.elementFromPoint()は、hereを文書化し、 "実験技術" であるので、私はそれに私の人生を信頼しないでしょう。すべてのターゲットプラットフォームで完全にテストします。
あなたが求めるすべての白の完全な検出のために編集
は、isWhiteSpace()は、2段階の最初のでしょう。 2番目の段階は@ remdevtecのアプローチで実装されたisVisualWhiteSpace()です。
私のisWhiteSpace(coords)は安価であるため、最初に実行し、falseを返した場合にのみ高価なテストを実行します。あなたは||
var isWhite = isWhiteSpace(coords) || isVisualWhiteSpace(coords);
の保護プロパティを使用することができますしかし、あなたの本当の問題はisVisualWhiteSpace()を書くことになります。私はそれを助けることはできません。
ありがとう、私は本物の空白だけを望んでいないので、div.containerの内部にある場合、またはテキストエリア内の段落の間の空白スペースであっても検出したいと考えています。 – happyOasis
私はそれを知っていて、 "視覚的な"空白を検出するには、技術的な問題ではないにしても膨大な概念を持っていると思います。あなたが@ remdevtecの作業方法を得ることができたとしましょう。そして、おそらく "占有されていない"と "占有されている"空白を区別したいでしょう。たとえば、テキストを含むdivを考えてみましょう。 "O"か "P"のような白い文字を含むテキストの中で、検出したい白と白の間をどのように区別しますか？あなたは不可能な仕事をしているかもしれません。 –
何が「空」であると計算していますか？あなたの例を考えてみると、その赤い点は質問のテキストが含まれている同じdiv要素の一部である可能性が高く、そのdivの親要素です。 –
あなたはhtmlタグの間の空白を探しているようですが、わかりません。 – SidOfc
@SidneyLiebrand **タグ内であっても、空白を検出したいと思います。 （私の例のように、テキストエリア内で） – happyOasis