新しいプロジェクトをやりたいので、簡単な画像検証コードを作成する予定です。
最初にアイデアについて話しましょう。サーバー側で、フォルダーから8枚の写真を見つけてから、8枚の写真を大きな写真にマージし、ユーザーの写真分類を生成して、子犬、ビールなどの8つの小さな写真で確認するための画像分類を生成します。ユーザーがログインしたら、選択した画像が実際にユーザーが選択したすべての座標に基づいて検証画像であるかどうかを判断します。
最初に2つのレンダリングを入れましょう：
ファイルの検索を簡単にするために、画像ファイルの構造は次のとおりです。
これにより、ユーザーが選択したい重要な写真の生成が容易になり、8つの小さな写真がある大きな写真に組み合わされます。
上記のコード：これは、8つの写真を選択し、各画像を選択するときに選択した写真が繰り返されないことを再帰的に保証します。
// 8画像を選択しますpublic static list <object> geteightimages（）{//各画像のパスを保存して、画像が繰り返されないことを確認します<string> paths = new arraylist <string>（）; file [] finalimages = new file [8]; list <Object> object = new ArrayList <Object>（）; // TIPS STRING [] TIPS = new String [8]; for（int i = 0; i <8; i ++）{//ランダムセカンダリディレクトリint dirindex = getRandom（secondaryDirnumbers）;ファイルseconvorydir = getFiles（）[dirindex]; //ヒントのヒントにランダムフォルダー名を保存[i] = scolationDir.getName（）; //セカンダリイメージディレクトリファイルでファイルを取得します[] Images = SeconvoryDir.ListFiles（）; int imageIndex = getRandom（Imagerandomindex）;ファイルImage = Images [ImageIndex]; //画像重複排除画像= dropsameImage（画像、パス、ヒント、i）; paths.add（image.getPath（））; finalimages [i] = image; } object.add（finalimages）; Object.Add（TIPS）;オブジェクトを返す;}これらの8つの画像を生成する際に、すべてのファイルカテゴリを配列に保存します。このカテゴリでは、乱数を使用して、カテゴリをキーカテゴリとして選択できます。これは、ユーザーが選択したいすべての写真です。配列は注文されるため、配列内の要素を通過して、各キー分類画像の位置を取得できます。これは、ユーザー検証中にマッチングするのに便利です。
//サブスクリプトではなく、どの画像が返されるかを取得します。 1から始まるコレクションの最初の要素は、チップpublic static list <object> getLocation（string [] tips）{list <object> locations = new ArrayList <Object>（）です。 //キー分類文字列のtip = getTip（TIPS）を取得します。 locations.add（tip）; int length = tips.length; for（int i = 0; i <length; i ++）{if（tip.equals（tips [i]））{locations.add（i+1）; }} return locations; }8枚の写真を選択した後、次のステップは写真をマージすることです。画像をマージするには、bufferedimageメソッド：setrgb（）メソッドを使用できます。理解していない場合は、詳細な手順があるAPIドキュメントを読むことができます。
public static void mergeimage（file [] finalimages、httpservletresponse応答）IoException {//画像bufferedimage mergeimage = new bufferedimage（800、400、bufferedimage.type_int_bgr）; for（int i = 0; i <8; i ++）{file image = finalimages [i]; bufferedimage bufferedimage = imageio.read（image）; int width = bufferedimage.getWidth（）; int height = bufferedimage.getheigh（）; //画像からRGBを読み取りますint [] imageBytes = new int [width*height]; ImageBytes = bufferedImage.getRgb（0、0、幅、高さ、ImageBytes、0、width）; if（i <4）{mergeimage.setrgb（i*200、0、width、height、yagebytes、0、width）; } else {mergeimage.setrgb（（i -4）*200、200、width、height、imagebytes、0、width）; }} imageio.write（mergeimage、 "jpg"、response.getOutputStream（））; //imageio.write(mergeimage、 "jpg"、destimage）; }コントローラーレイヤーで、最初にキー分類をセッションに保存し、ユーザーが画像分類を選択できるようにプロンプトと画像検証を作成します。次に、画像ストリームを応答に出力して、検証画像を生成します。
Response.setContentType（ "Image/jpeg"）; Response.setheader（ "Pragma"、 "no-cache"）; Response.setheader（ "Cache-Control"、 "no-cache"）; Response.setDateHeader（ "Expires"、0）; List <Object> object = ImagesElectedHelper.GetEightImages（）; file [] finalimages =（file []）object.get（0）; string [] tips =（string []）object.get（1）; //すべてのキーの画像位置、つまり、ユーザーがlist <Object> locations = imageselectedhelper.getLocation（TIPS）を選択する必要がある画像。 string tip = locations.get（0）.toString（）; System.out.println（tip）; session.setattribute（ "tip"、tip）; locations.remove（0）; int length = locations.size（）; for（int i = 0; i <length; i ++）{system.out.println（ "実際のキーイメージ場所："+locations.get（i））; } session.setattribute（ "locations"、locations）; imagemerge.mergeimage（finalimages、response）;JSPでは、ユーザークリック用の小さな画像タグを生成します。ユーザーが画像をクリックしたら、子Divタグを親divに追加し、相対として配置し、zindexを設定し、IMGタグをDivに追加し、絶対として配置します。ユーザーがクリックしたら、クリックイベントを取得し、クリックイベントに基づいてクリック座標を取得し、親Divの座標を差し引いて相対座標を取得できます。好みに応じて座標起点を決定できます。ここの座標起点は、8番目の写真の右下隅です。
<div> <br> <div id = "base"> <br> <img src = "<％= request.getContextPath（）％>/識別" onclick = "clickimg（event）" id = "bigpicture"> <br> </div> <br> <br> <br> </div> <br> <basiv = document（e） var topvalue = 0; var leftvalue = 0; var obj = basediv; while（obj）{leftvalue += obj.offsetLeft; topvalue += obj.offsettop; obj = obj.offsetparent; } // Firefoxがクリックイベントを取得できないという問題を解決しますvarclickevent = e？ e ：（ window.event？window.event：null）; var clickleft = clickevent.clientx + document.body.scrollleft -document.body.clientleft -10; var clicktop = clickevent.clienty + document.body.scrolltop -document.body.clienttop -10; var divid = "img_"+index ++; var divele = document.createelement（ "div"）; divele.setattribute（ "id"、divid）; divele.style.position = "relative"; divele.style.zindex = index; divele.style.width = "20px"; divele.style.height = "20px"; divele.style.display = "inline"; divele.style.top = clicktop -topvalue -150 + 10 + "px"; divele.style.left = clickleft -leftalue -300 + "px"; divele.setattribute（ "onclick"、 "remove（ '" + divid + "'）"）; beasediv.appendChild（divele）; var imgele = document.createelement（ "img"）; imgele.src = "<％= request.getContextPath（）％>/resources/timo.png"; imgele.style.width = "20px"; imgele.style.height = "20px"; imgele.style.top = "0px"; imgele.style.left = "0px"; imgele.style.position = "absolute"; imgele.style.zindex = index; divele.appendchild（imgele）; }ユーザーがログインを選択した後、サーバー側は選択されたユーザーの座標に基づいて判断を下します。
public list <integer> ispass（string result）{string [] xylocations = result.split（ "、"）; //ユーザーフォールズリスト<integer> list = new ArrayList <Integer>（）によって選択された座標を保存します。 //座標system.out.printlnの各セット（ "ユーザー選択写真の数："+xylocations.length）; for（string xylocation：xylocations）{string [] xy = xylocation.split（ "// | // |"）; int x = integer.parseint（xy [0]）; int y = integer.parseint（xy [1]）; // 8,4画間インターバルif（x> -75 && x <= 0）{if（y> -75 && y <= 0）{// no。 8 list.add（8）; } else if（y> = -150 && y <= -75）{// no。 4 list.add（4）; }} else if（x> -150 && x <= -75）{// 7,3画間インターバルif（y> -75 && y <= 0）{// no。 7 list.add（7）; } else if（y> = -150 && y <= -75）{// no。 3 list.add（3）; }} else if（x> -225 && x <= -150）{// 6,2画間インターバルif（y> -75 && y <= 0）{// no。 6 list.add（6）; } else if（y> = -150 && y <= -75）{// no。 2 list.add（2）; }} else if（x> = -300 && x <= -225）{// 5,1図間隔if（y> -75 && y <= 0）{// no。 5 list.add（5）; } else if（y> = -150 && y <= -75）{// no。 1 list.add（1）; }} else {return null; }} return list; }更新して新しい画像を生成します。 Ajaxはバイナリストリームをサポートしていないため、ネイティブXMLHTTPREQUESTオブジェクトを使用してHTML5 BLOBを追加して完成させることができます。
function refresh（）{var url = "<％= request.getContextPath（）％>/識別"; var xhr = new xmlhttprequest（）; xhr.open（ 'get'、url、true）; xhr.responsetype = "blob"; xhr.onload = function（）{if（this.status == 200）{var blob = this.response; // bigpicture.onload = function（e）{window.url.revokeobjecturl（bigpicture.src）; }; bigpicture.src = window.url.createobjecturl（blob）; }} xhr.send（）;検証コードの全体的なコードが完了しており、処理する詳細がまだいくつかあります。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。