Como quero fazer um novo projeto, pretendo fazer um código de verificação de imagem simples.
Vamos falar sobre a idéia primeiro: no lado do servidor, encontre 8 imagens de uma pasta, depois mescla as 8 imagens em uma imagem grande e gerar aleatoriamente uma classificação de imagem para os usuários verificarem nas 8 figuras pequenas, como filhotes, cerveja etc. na figura, ao acessar esta página, carregar a imagem e selecionar o usuário a imagem exigida na imagem. Quando o usuário faz login, determine se a imagem selecionada é realmente uma imagem de verificação com base em todas as coordenadas selecionadas pelo usuário.
Vamos colocar duas renderizações em primeiro lugar:
Para facilitar a pesquisa de arquivos, a estrutura do arquivo de imagem pode ser a seguinte:
Isso facilita a geração das principais imagens que o usuário deseja escolher e combine -as em uma imagem grande com 8 figuras pequenas.
Código acima: é para selecionar 8 imagens e garantir recursivamente que as imagens selecionadas não sejam repetidas ao selecionar cada imagem.
// Selecione 8 imagens Lista estática pública <BetExtImages () {// Salvar o caminho de cada imagem que você obtém para garantir que a imagem não seja repetida na lista <String> caminhos = new ArrayList <String> (); Arquivo [] finalimages = novo arquivo [8]; List <ject> object = new ArrayList <ject> (); // Salvar dicas string [] Tips = new String [8]; para (int i = 0; i <8; i ++) {// obtenha diretório secundário aleatório intIIndex = getRandom (secundyDirnumbers); Arquivo secundárioDir = getFiles () [Dirindex]; // Salve o nome da pasta aleatória em dicas para dicas [i] = secundyDir.getName (); // Obtenha o arquivo no arquivo de diretório de imagem secundário [] imagens = secundydir.listfiles (); int imageIndex = getRandom (imagerandomIndex); Imagem de arquivo = imagens [imageIndex]; // imagem de desduplicação da imagem = DropSameImage (imagem, caminhos, dicas, i); paths.add (image.getPath ()); finalimages [i] = imagem; } object.add (finalimages); object.add (dicas); objeto de retorno;}Ao gerar essas 8 imagens, salve todas as categorias de arquivos em uma matriz. Nesta categoria, você pode usar números aleatórios para selecionar uma categoria como uma categoria de chave, que são todas as imagens que o usuário deseja selecionar. Como a matriz é encomendada, você pode atravessar os elementos da matriz para obter a localização de cada imagem de classificação -chave, o que é conveniente para a correspondência durante a verificação do usuário.
// Obtenha o local, qual imagem é retornada, não o subscrito. A partir de 1, o primeiro elemento da coleção é a tip public static list <ject> getLocation (string [] tips) {list <bject> locations = new ArrayList <ject> (); // Obtenha a dica da string de classificação da chave = gettip (dicas); locations.add (dica); int length = tips.length; for (int i = 0; i <comprimento; i ++) {if (tip.equals (tips [i])) {locations.add (i+1); }} retornar locais; }Depois de selecionar 8 fotos, o próximo passo é mesclar as fotos. Para mesclar imagens, você pode usar o método bufferiMage: Método setRGB (). Se você não entende, pode ler a documentação da API, que possui instruções detalhadas.
public static void MerGeImage (FILE [] FinalImages, HttpServletResponse Response) lança IoException {// Leia o Image BufferEdImage MergeImage = New BufferImage (800, 400, BufferImage.Type_Int_Bgr); for (int i = 0; i <8; i ++) {file image = finalImages [i]; BufferImage bufferImage = imageio.read (imagem); int width = bufferiMage.getWidth (); int height = bufferiMage.getHeight (); // leia rgb da imagem int [] imageBytes = new int [largura*altura]; ImageBytes = bufferImage.getRgb (0, 0, largura, altura, imageBytes, 0, largura); if (i <4) {MergeImage.SetRGB (i*200, 0, largura, altura, imageBytes, 0, largura); } else {MergeImage.SetRGB ((i -4)*200, 200, largura, altura, imageBytes, 0, largura); }} Imageio.Write (MergeImage, "JPG", Response.getOutputStream ()); //Imageio.write(mergeImage, "jpg", destimage); }Na camada do controlador, primeiro salve a classificação principal na sessão e faça avisos e a verificação da imagem para os usuários escolherem a classificação da imagem. Em seguida, produza o fluxo de imagem para a resposta para gerar a imagem de verificação.
Response.setContentType ("Image/jpeg"); Response.setheader ("Pragma", "sem cache"); Response.setheader ("Cache-Control", "No-Cache"); Response.SetDateHeader ("Expira", 0); List <ject> object = ImagesElectedHelper.GeteightImages (); Arquivo [] finalimages = (file []) object.get (0); String [] TIPS = (String []) object.get (1); // Os locais da imagem de todas as teclas, ou seja, a imagem de que o usuário deve selecionar List <Becjat> locations = ImagesElectedHelper.getLocation (TIPS); Dica de string = locations.get (0) .ToString (); System.out.println (Tip); session.setAttribute ("TIP", dica); locations.remove (0); int length = locations.size (); for (int i = 0; i <comprimento; i ++) {System.out.println ("Localização real da imagem da chave:"+locations.get (i)); } session.setAttribute ("Locais", locais); ImageMerge.MergeImage (Finalimages, resposta);No JSP, gerar pequenas tags de imagem para cliques de usuários. Quando o usuário clicar na imagem, adicione uma tag infantil à Div, posicione -a como relativa e defina o Zindex e adicione uma tag IMG à div, posicione -a como absoluta. Quando o usuário clicar, você pode obter o evento de clique, obtenha as coordenadas de clique com base no evento de clique e subtraia as coordenadas da Div pai para obter as coordenadas relativas. Você pode determinar a origem coordenada de acordo com suas preferências. A origem coordenada aqui é o canto inferior direito da 8ª imagem.
<div> <br> <div id = "base"> <br> <img src = "<%= request.getContextPath ()%>/identificar" onclick = "clickimg (event)" id = "bigpicture"> <br> <br> <br> <br> <br> </div> <br> <br> clickimg (e) {var baseado) {var baseado) <br Basedby) <br Basedby) <br Basedby) <br Basedby) <br> <br Basedby) <br> <br baseou -se) (ebraftby) <br> <br> <broutby); var topValue = 0; var de leftValue = 0; var obj = baseado; while (obj) {leftValue += obj.offsetleft; topValue += obj.offsetTop; obj = obj.offsetParent; } // Resolva o problema de que o Firefox não pode obter eventos de cliques var clickevent = 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 divle = document.createElement ("div"); DivEle.setAtAttribute ("ID", Divid); DivEle.style.Position = "relativo"; divele.style.zindex = index; divle.style.width = "20px"; divle.style.Height = "20px"; divele.style.display = "inline"; divele.style.top = clicktop - topValue - 150 + 10 + "px"; divle.style.left = clickleft - leftValue - 300 + "px"; DivEle.setAtAttribute ("OnClick", "Remover ('" + Divid + "')"); Basediv.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 = "absoluto"; imgele.style.zindex = index; DivEle.AppendChild (imgele); }Depois que o usuário seleciona o login, o lado do servidor faz julgamento com base nas coordenadas do usuário selecionadas.
Lista pública <Teger> isPass (String Result) {String [] xylocations = resultado.split (","); // Salvar em quais imagens as coordenadas selecionadas pela lista de quedas do usuário <Teger> list = new ArrayList <Teger> (); // cada conjunto de coordenadas System.out.println ("Número de fotos selecionadas do usuário:"+xylocations.length); para (string xylocation: xylocações) {string [] xy = xylocation.split ("// | // |"); int x = integer.parseint (xy [0]); int y = integer.parseint (xy [1]); // 8,4 intervalo de imagem 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 intervalo de imagem se (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) {// intervalo de imagem 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 intervalo de imagem if (y> -75 && y <= 0) {// no. 5 list.Add (5); } else if (y> = -150 && y <= -75) {// no. 1 list.Add (1); }} else {return null; }} Lista de retorno; }Atualize para gerar uma nova imagem. Como o AJAX não suporta fluxos binários, você pode usar o objeto XMLHTTPREQUEST nativo para adicionar o Blob HTML5 para concluí -lo.
function refresh () {var url = "<%= request.getContextPath ()%>/identificar"; var xhr = novo xmlHttPrequest (); xhr.open ('get', url, true); XHR.RESPONSETYPE = "BLOB"; xhr.onload = function () {if (this.status == 200) {var blob = this.Response; // libere blob após carregar com sucesso bigpicture.onload = function (e) {window.url.revokeObjecturl (bigpicture.src); }; bigpicture.src = window.url.createObjecturl (blob); }} xhr.send ();O código geral do código de verificação foi concluído e ainda existem alguns detalhes a serem processados.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.