Como quiero hacer un nuevo proyecto, planeo hacer un código de verificación de imagen simple.
Hablemos primero sobre la idea: en el lado del servidor, busque 8 imágenes de una carpeta, luego fusionemos las 8 imágenes en una imagen grande y genere aleatoriamente una clasificación de imágenes para que los usuarios verifiquen en las 8 imágenes pequeñas, como cachorros, cerveza, etc. en el extremo frontal, al acceder a esta página, cargar la imagen y el usuario selecciona la imagen requerida en la imagen. Cuando el usuario inicie sesión, determine si la imagen seleccionada es en realidad una imagen de verificación basada en todas las coordenadas seleccionadas por el usuario.
Ponamos dos representaciones primero:
Para facilitar la búsqueda de archivos, la estructura del archivo de imagen puede ser la siguiente:
Esto facilita la generación de las imágenes clave que el usuario desea elegir, y combínelas en una imagen grande con 8 imágenes pequeñas.
Código de arriba: Esto es para seleccionar 8 imágenes y asegúrese de recursivamente que las imágenes seleccionadas no se repitan al seleccionar cada imagen.
// Seleccione 8 imágenes Public Static List <ject> getEightImages () {// Guarde la ruta de cada imagen que pueda asegurarse de que la imagen no se repita la lista <tring> rutas = new ArrayList <String> (); Archivo [] finalImages = nuevo archivo [8]; Lista <S Object> Object = New ArrayList <S Object> (); // Guardar la cadena [] tips = new String [8]; para (int i = 0; i <8; i ++) {// Obtener directorio secundario aleatorio int Archivo secundario = getFiles () [dirindex]; // Guardar el nombre de la carpeta aleatoria en consejos a consejos [i] = SecondAyDir.getName (); // Obtenga el archivo en el archivo del directorio de imágenes secundario [] imágenes = SecondAyDir.ListFiles (); int ImageIndex = getRandom (ImagerAndomIndex); Archivo de archivo = imágenes [imageIndex]; // Imagen de deduplicación = dropsameImage (imagen, rutas, consejos, i); raths.Add (image.getPath ()); FinalImages [i] = imagen; } object.Add (FinalImages); Object.Add (consejos); Objeto de retorno;}Al generar estas 8 imágenes, guarde todas las categorías de archivos en una matriz. En esta categoría, puede usar números aleatorios para seleccionar una categoría como una categoría clave, que son todas las imágenes que el usuario desea seleccionar. Dado que se solicita la matriz, puede atravesar los elementos en la matriz para obtener la ubicación de cada imagen de clasificación de clave, que es conveniente para la coincidencia durante la verificación del usuario.
// Obtener la ubicación, qué imagen se devuelve, no el subíndice. A partir de 1, el primer elemento de la colección es la lista pública de la lista estática <S Object> getLocation (String [] TIPS) {List <ject> ubicaciones = new ArrayList <ject> (); // Get Key Classificación String Tip = GetTip (consejos); ubicaciones.add (consejo); int longitud = tips.length; para (int i = 0; i <longitud; i ++) {if (tip.equals (tips [i])) {ubicaciones.add (i+1); }} ubicaciones de retorno; }Después de seleccionar 8 imágenes, el siguiente paso es fusionar las imágenes. Para fusionar imágenes, puede usar el método BufferedImage: SETRGB () Método. Si no lo entiende, puede leer la documentación de la API, que tiene instrucciones detalladas.
Public static void MergeImage (archivo [] FinalImages, HttpServletResponse Respuesta) lanza IOException {// Lea la imagen BufferedImage MergeImage = New BufferedImage (800, 400, BufferedImage.Type_INT_BGR); for (int i = 0; i <8; i ++) {archivo de archivo = finalimages [i]; BufferedImage BufferedImage = ImageIO.Read (Image); int width = bufferedImage.getWidth (); int hight = bufferedImage.getheight (); // Leer RGB de la imagen int [] imageBytes = new int [width*altura]; imageBytes = bufferedImage.getRgb (0, 0, ancho, altura, imageBytes, 0, ancho); if (i <4) {MergeImage.setRgb (i*200, 0, ancho, altura, imageBytes, 0, ancho); } else {MergeImage.setRgb ((i -4)*200, 200, ancho, altura, imageBytes, 0, ancho); }} ImageIO.Write (MergeImage, "jpg", respuesta.getOutputStream ()); //Imageio.write(mergeImage, "JPG", Destimage); }En la capa del controlador, primero guarde la clasificación de clave en la sesión e indique las indicaciones y verificación de imágenes para que los usuarios elijan la clasificación de imágenes. Luego emita la transmisión de la imagen a la respuesta para generar la imagen de verificación.
respuesta.setContentType ("Image/jpeg"); respuesta.setheader ("Pragma", "No-Cache"); Respuesta.setheader ("Cache-Control", "No-Cache"); respuesta.setDateHeader ("expiras", 0); Lista <S Object> Object = ImageElectedHelper.GetGeLeTimages (); File [] finalImages = (file []) object.get (0); String [] tips = (string []) object.get (1); // Las ubicaciones de imágenes de todas las teclas, es decir, la imagen que el usuario debe seleccionar la lista <pect> ubicaciones = imágeneselectedHelper.getLocation (consejos); String tip = ubicaciones.get (0) .ToString (); System.out.println (TIP); session.SetAttribute ("TIP", TIP); ubicaciones.remove (0); int longitud = lugar.size (); for (int i = 0; i <longitud; i ++) {system.out.println ("ubicación de imagen de clave real:"+ubicaciones.get (i)); } session.SetAttribute ("ubicaciones", ubicaciones); Imagemerge.mergeImage (finalimage, respuesta);En JSP, genere pequeñas etiquetas de imagen para clics de usuario. Cuando el usuario haga clic en la imagen, agregue una etiqueta de Div Child al Div Parent, colóquela como relativa y configure Zindex y luego agregue una etiqueta IMG al DIV, colóquela como absoluta. Cuando el usuario hace clic, puede obtener el evento de clics, obtener las coordenadas de clics basadas en el evento de clic y luego reste las coordenadas del DIV principal para obtener las coordenadas relativas. Puede determinar el origen de coordenadas de acuerdo con sus preferencias. El origen coordinado aquí es la esquina inferior derecha de la octava imagen.
<Div> <br> <div id = "base"> <br> <img src = "<%= request.getContextPath ()%>/identificar" onClick = "clickimg (event)" id = "bigPicture"> <br> </div> <br> <br> </div> <br> <br> de la función clickimg (e) {var basado = documento. var topvalue = 0; var LeftValue = 0; var obj = basado; while (obj) {LeftValue += obj.offsetleft; topvalue += obj.offsettop; obj = obj.OffSetParent; } // Resolver el problema de que Firefox no puede obtener eventos de clic 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 divele = document.createElement ("div"); divele.SetAttribute ("id", dividido); divele.style.position = "relativo"; divele.style.zindex = index; divele.style.width = "20px"; divele.style.height = "20px"; divele.style.display = "en línea"; divele.style.top = clicktop - topvalue - 150 + 10 + "px"; divele.style.left = clickleft - LeftValue - 300 + "Px"; divele.setAttribute ("onClick", "eliminar ('" + divid + "')"); Baseiv.appendChild (Divele); var imgele = document.createElement ("img"); imgele.src = "<%= request.getContextPath ()%>/recursos/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); }Después de que el usuario selecciona el inicio de sesión, el lado del servidor hace un juicio en función de las coordenadas del usuario seleccionadas.
Lista pública <integer> ispass (resultado de cadena) {string [] xylocations = result.split (","); // Guardar en qué imágenes las coordenadas seleccionadas por la lista de caídas del usuario <integer> list = new ArrayList <Integer> (); // Cada conjunto de coordenadas System.out.println ("Número de imágenes seleccionadas por el usuario:"+xylocations.length); for (string xylocation: xylocations) {string [] xy = xylocation.split ("// | // |"); int x = integer.parseInt (xy [0]); int y = integer.parseInt (xy [1]); // 8,4 Intervalo de imagen 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 imagen 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 Intervalo de imagen 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 imagen 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; }Actualice para generar una nueva imagen. Dado que AJAX no admite transmisiones binarias, puede usar el objeto xmlhttprequest nativo para agregar html5 blob para completarlo.
function refresh () {var url = "<%= request.getContextPath ()%>/identificar"; var xhr = new xmlhttprequest (); xhr.open ('get', url, verdadero); xhr.responseType = "blob"; xhr.onload = function () {if (this.status == 200) {var blob = this.Response; // Libere Blob después de cargar correctamente BigPicture.Onload = function (e) {window.url.revoKeObjectUrl (bigPicture.src); }; bigPicture.src = window.url.createObjectUrl (blob); }} xhr.send ();El código general del código de verificación se ha completado, y todavía hay algunos detalles para procesarse.
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.