Поскольку я хочу сделать новый проект, я планирую сделать простой код проверки изображений.
Давайте сначала поговорим об этой идее: на стороне сервера найдите 8 изображений из папки, затем объедините 8 изображений в большую картину и случайным образом генерируйте классификацию изображений для пользователей, чтобы проверить на 8 небольших изображениях, таких как щенки, пиво и т. Д. На передней части, при доступе к этой странице, загрузите изображение, и пользователь выбирает изображение, необходимое на изображении. Когда пользователь входит в систему, определите, на самом деле выбранное изображение на основе всех координат, выбранных пользователем.
Давайте сначала поместим два визуализации:
Чтобы облегчить поиск файла, структура файла изображения может быть следующей:
Это облегчает генерацию ключевых изображений, которые пользователь хочет выбрать, и объединяет их в большую картину с 8 маленькими картинками.
Код выше: это следует выбрать 8 изображений и рекурсивно убедиться, что выбранные изображения не будут повторяться при выборе каждого изображения.
// Выберите 8 изображений общедоступный статический список <object> getEightimages () {// Сохранить путь каждого изображения, который вы получаете, чтобы убедиться, что изображение не будет повторено list <string> paths = new ArrayList <string> (); File [] finalimages = новый файл [8]; List <Object> object = new ArrayList <Object> (); // Сохранить советы String [] tips = new String [8]; for (int i = 0; i <8; i ++) {// Получить случайный вторичный каталог int dirindex = getrandom (вторичные инициалы); File SecondaryDir = getFiles () [dirindex]; // Сохранить имя случайной папки в советах к советам [i] = SecondaryDir.getName (); // Получить файл во вторичном файле каталогов изображений [] Images = secondatorDir.listFiles (); int ImageIndex = getRandom (ImagerAndomindex); File Image = Images [imageIndex]; // изображение дедупликации Image = DropSameImage (изображение, пути, советы, i); paths.add (image.getPath ()); finalimages [i] = image; } object.add (finalimages); Object.Add (tips); Возврат объект;}При создании этих 8 изображений сохраните все категории файлов в массиве. В этой категории вы можете использовать случайные числа для выбора категории в качестве ключевой категории, которая является всеми изображениями, которые пользователь хочет выбрать. Поскольку массив заказан, вы можете пересекать элементы в массиве, чтобы получить местоположение каждого ключевого классификационного изображения, что удобно для сопоставления во время проверки пользователя.
// Получить местоположение, какое изображение возвращается, а не подписан. Начиная с 1, первым элементом коллекции является Tip Public Static List <object> getLocation (String [] tips) {list <Object> locations = new ArrayList <object> (); // Получить ключевую классификационную строку tip = getTip (tips); локации. ADD (TIP); int length = tips.length; для (int i = 0; i <length; i ++) {if (tip.equals (tip [i])) {locations.add (i+1); }} return Locations; }После выбора 8 картинок следующим шагом является объединение картинок. Для объединения изображений вы можете использовать метод BufferedImage: setRgb (). Если вы этого не понимаете, вы можете прочитать документацию API, которая имеет подробные инструкции.
Public Static Void MergeImage (файл [] finalimages, httpservletresponse) бросает ioException {// Читать изображение BufferedImage mergeimage = new BufferedImage (800, 400, bufferemage.type_int_bgr); for (int i = 0; i <8; i ++) {file image = finalimage [i]; BufferedImage bufferedImage = imageio.read (image); int width = bufferedimage.getwidth (); int height = bufferedimage.getheight (); // Читать rgb с изображения int [] imagebytes = new int [ширина*высота]; ImageBytes = bufferedImage.getRgb (0, 0, ширина, высота, ImageBytes, 0, ширина); if (i <4) {mergeimage.setrgb (i*200, 0, ширина, высота, ImageBytes, 0, ширина); } else {mergeimage.setrgb ((i -4)*200, 200, ширина, высота, изображения, 0, ширина); }} Imageio.write (mergeimage, "jpg", response.getOutputStream ()); //Imageio.write(mergeimage, "jpg", destimage); }В уровне контроллера сначала сохраните классификацию ключей в сеансе и сделайте подсказки и проверку изображений для пользователей для выбора классификации изображений. Затем выведите поток изображения в ответ, чтобы сгенерировать проверку изображения.
response.setContentType ("Image/jpeg"); response.setheader ("pragma", "без Cache"); response.setheader («Контроль кэша», «без каша»); response.setDateHeader («истекает», 0); List <Object> object = ImagesElectedHelper.getEightImage (); File [] finalimages = (file []) object.get (0); String [] tips = (string []) object.get (1); // местоположение изображений всех клавиш, то есть изображение, которое пользователь должен выбрать List <object> locations = ImagesElectedHelper.getLocation (tips); Строка TIP = местоположение. Get (0) .ToString (); System.out.println (tip); session.setattribute («Tip», Tip); локации.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 (FinalImage, ответ);В JSP генерируйте небольшие теги изображения для кликов пользователей. Когда пользователь нажимает на изображение, добавьте дочернюю тег в родительский Div, позиционируйте его как относительный, и установите Zindex, а затем добавьте тег IMG в DIV, позиционируйте его как абсолютное. Когда пользователь нажимает, вы можете получить событие Click, получить координаты щелчка на основе события Click, а затем вычесть координаты родительского DIV, чтобы получить относительные координаты. Вы можете определить происхождение координат в соответствии с вашими предпочтениями. Координатное происхождение здесь - правый нижний угол 8 -го изображения.
<div> <br> <div id = "base"> <br> <img src = "<%= request.getContextPath ()%>/идентификация" onclick = "clickImg (event)" id = "bigpicture"> <br> </div> <br> <br> </div> <br> <br> function clickImg (e) {vareviv = gitebretb var topValue = 0; var LeftValue = 0; var obj = основанный; while (obj) {LeftValue += obj.offsetleft; TopValue += obj.OffSetTop; obj = obj.offsetParent; } // Решить проблему, которую Firefox не может получить Click Events 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", divid); divele.style.position = "относительный"; 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 - LeftValue - 300 + "px"; divele.setattribute ("onclick", "remove ('" + divid + "')"); Basediv.appendChild (дивиле); 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) {// Нет. 8 list.add (8); } else if (y> = -150 && y <= -75) {// Нет. 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) {// Нет. 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) {// Нет. 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) {// Нет. 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; // выпустить Blob после загрузки успешно BigPicture.onload = function (e) {window.url.revokeobjecturl (bigpicture.src); }; bigpicture.src = window.url.createobjecturl (blob); }} xhr.send ();Общий код кода проверки был завершен, и есть еще некоторые детали, которые нужно обрабатывать.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.