在图片上面添加一个图片，实现12306验证码的选择并获取相关坐标的功能

最新推荐文章于 2023-12-01 21:08:17 发布
最新推荐文章于 2023-12-01 21:08:17 发布
阅读量2.9k 收藏 1
点赞数 1
分类专栏： 其他 文章标签： 验证码 图片 12306 布局 获取坐标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch_jcak/article/details/50365543
版权

先看一下布局吧                                

然后是布局代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/gamearea"
    >
    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="#386f96">
        <ImageView
            android:id="@+id/user_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TV"
            android:layout_alignParentLeft="true"
            android:layout_alignTop="@+id/TV"
            android:src="@drawable/sub_title_back" />

        <TextView
            android:id="@+id/TV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:text="登录"
            android:textSize="20sp"
            android:textColor="#FFFFFF"/>
    </RelativeLayout>

    <RelativeLayout

        android:layout_below="@id/title"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <LinearLayout
            android:id="@+id/login"
            android:layout_width="fill_parent"
            android:orientation="vertical"
            android:layout_height="100dp"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin">
            <LinearLayout
                android:id="@+id/name_linearlayout"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:text="账号："
                    android:textSize="20dp"
                    android:gravity="center"/>
                <EditText
                    android:id="@+id/edit_name"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
            <LinearLayout
                android:id="@+id/password_linearlayout"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:text="密码："
                    android:textSize="20dp"
                    android:gravity="center"/>
                <EditText
                    android:id="@+id/edit_password"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:password="true"/>
            </LinearLayout>

        </LinearLayout>

            <ImageView
                android:id="@+id/Image"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:scaleType="fitCenter"
                android:layout_below="@id/login"
                android:layout_centerHorizontal="true"
                />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Image"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin">
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="登录"
            android:id="@+id/button_login"

            android:layout_centerHorizontal="true"
            android:background="#2894FF"
            android:layout_marginTop="23dp"
            />
        </RelativeLayout>

    </RelativeLayout>
</RelativeLayout>

相对来说布局还是普通的布局，只是参考了一下12306的点击验证码的功能啦。。。

接下来是Java代码

因为我们要把笑脸加上去，所以我们在Java中就不采用这种方法直接关联.XML文件了

而是用init（）函数的方法，其中的bitmap就是我们要显示出来的验证码，其他的就是我们XML中的一些控件了

这里要注意了，例如button_load=(Button)view.findViewById(R.id.button_login);此时控件都是继承View的，所以在这里要加上view。


public void init(Bitmap bitmap){
        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);
        LayoutInflater inflater =(LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.activity_login_, null);
        image=(ImageView)view.findViewById(R.id.Image);
        image.setImageBitmap(bitmap);
        layout.addView(view);
        setContentView(layout, layoutParams);
        edit_name=(EditText)view.findViewById(R.id.edit_name);
        edit_password=(EditText)view.findViewById(R.id.edit_password);
        button_load =(Button)view.findViewById(R.id.button_login);
        back=(ImageView)view.findViewById(R.id.user_back);
        toucharea=(RelativeLayout)view.findViewById(R.id.gamearea);

    }

然后就是添加一个笑脸的ImageView了

这里出现的一些数字的运算那些变量都是为了让那个验证码图片显示出来是它原始的宽高比例，首先我们在布局中已经设定好ImageView的宽为fill_parent，高为wrap_parent。然后要获取ImagView的相对屏幕的实际坐标及宽高以及我们Bitmap的在屏幕中显示的宽高进行必要的运算。且在这里为每一个产生的ImageView设置了点击事件，在点击后消除改坐标点的笑脸图片。

//点击验证码生成一个选择图标
    public void showselect(int x,int y) {
        final ImageView im=new ImageView(this);
        Resources res=getResources();
        bmp= BitmapFactory.decodeResource(res, R.drawable.select_verifying);
        im.setImageBitmap(bmp);
//        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
//                ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(40,40);
        params.setMargins(x,y,0,0);
        im.setLayoutParams(params);
        layout.addView(im);
        layout.postInvalidate();
        im.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                int[] location = new int[2];
                im.getLocationOnScreen(location);
                int x1 = location[0];
                int y1 = location[1];
                layout.removeView(im);
                layout.postInvalidate();
                float check_x=(x1+15-(imageright-bitmapWidth)/2)/multiple;
                float check_y=(y1+15-imageview_y-((bitmapHeighet*3)/19))/ multiple;
                removeSelect(check_x+"");
                removeSelect(check_y+"");
            }
        });
    }


再然后就是。。。自己看了，挺简单的

public class login_Activity extends Activity {
    ImageView image;
    Button button_load; //登录
    ImageView back;        //返回按钮
    RelativeLayout toucharea;
    Bitmap b_image;
    Bitmap bmp;
    int imageright,imageleft,imagetop,imagebottom;
    int imageview_y=0;
    float bitmapHeighet=0;
    float bitmapWidth=0;
    float multiple;//multiple为实际显示出来的图片是原始图片的多少倍
    EditText edit_name;
    EditText edit_password;
    RelativeLayout layout;
    String editname="";
    String editpassword="";
    List<String> blist = new ArrayList<String>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        layout=new RelativeLayout(this);


        Resources res_image=getResources();
        b_image= BitmapFactory.decodeResource(res_image, R.drawable.getpasscodenew);
        init(b_image);//将获取验证码的bitmap放入函数


        image.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                float x = event.getRawX();
                float y = event.getRawY();
                int[] location = new int[2];
                image.getLocationOnScreen(location);
                int x1 = location[0];
                imageview_y = location[1];
                imageleft = image.getLeft();
                imageright = image.getRight();
                imagetop = image.getTop();
                imagebottom = image.getBottom();
                bitmapHeighet = b_image.getHeight();
                bitmapWidth = b_image.getWidth();
                multiple = bitmapWidth / 293;//multiple为实际显示出来的图片是原始图片的多少倍
//                System.out.println("图片各个角Left：" + image.getLeft() + "Right：" + image.getRight() + "Top：" +
//                        image.getTop() + "Bottom：" + image.getBottom() + "h:" + bitmapHeighet + "w"
//                        + bitmapWidth);
//                Toast.makeText(getApplicationContext(), "X:" + x + "Y:" + y, Toast.LENGTH_LONG).show();
//                System.out.print("X:" + x + "Y:" + y);
                if (y > (imageview_y + 15 + (bitmapHeighet * 3) / 19) && y < (imageview_y + bitmapHeighet-15)) {
                    if ((x > (imageright - bitmapWidth) / 2 + 15) && x < (bitmapWidth + (imageright - bitmapWidth) / 2) - 15) {
                        float Add_x = (x - (imageright - bitmapWidth) / 2) / multiple;
                        float Add_y = (y - imageview_y - ((bitmapHeighet * 3) / 19))/ multiple;
                        addSelect(Add_x + "");
                        addSelect(Add_y + "");
                        showselect((int) x - 15, (int) y - 50 - 15);
                    }
                }
                return false;
            }
        });

最后就是处理一下点击获取的折算后的坐标，和消除取消点击的坐标啦。。。。 

//把折算后的坐标加入list
    public void addSelect(String st){
        blist.add(st);
        System.out.print("hahahaha" + blist);
    }
    //把用户取消选择的数据删除
    public void removeSelect(String st){
        for (int i = 0; i < blist.size(); i++) {
            if ((blist.get(i)).equals(st)) {
                blist.remove(i);
            }
        }
    }

也很简单的，是不是，以上就是这个功能的代码了，有不足的地方自己修正，哈哈哈


帅帅的锅
关注
专栏目录
【Python爬虫教程】进阶篇-07 点触验证码的识别
仲君Johnny的博客
02-22 1412
摘要：点触验证码识别思路，初始化，获取，识别。
从12306谈起验证码的架构
xidajiancun
01-14 192
最近和众屌丝一样，在12306上面刷着春节回家的票。与她大战无数个回合之后，终于抢到了一张回家的高铁票，不断感慨最近人品还不错。当前，在使用12306的过程中，充满很多的心酸，念叨了铁道部的亲人很多次（罪过），其中最让人纠结的一项即是：验证码。 12306采用验证码， 无疑是一种很不错的措施，可以在一定程度上阻止了黄牛们的疯狂行为，不过也给正常使用验证码的童鞋带了个很头痛的问题，在选座提...
最新最全实现一个12306的图片验证功能
zuodingquan666的博客
07-13 391
前言：自己做一个毕设，在做到登录功能的时候，发现还落下一个图片验证的功能实现，自己想了想，干脆自己实现一下吧。 1.功能的设计 话不多说，先上uml图 2.数据库的实现 在这里解释一下字段的意思： id：这个就不用解释了 img_url:图片的地址（图片我都放在nginx下了） img_type：图片类型 接下来，我们就需要将图片的地址放入数据库中（懒得写后台上传，后面会写的，写了再更新博问吧，兄弟们） 录入后的结果如下： 3.后端实现 到现在终于到我们后端了，我们来...
我妈问我12306购票时为啥需要图片验证码
GitChat
08-25 488
如何给别人讲清楚图片验证码的原理，通过打比方的方式通俗易懂解释图片验证码的作用及原理。
12306验证图片集合。
xiaotao_1的博客
04-30 1596
直接放链接：这里 或者：这里，推荐下载上面的那个，那是原地址。 一共有将近100个种类，1万多张图片。
12306验证码具体坐标
Dream_ling的博客
01-02 1450
如图：整张图片的大小是：293*190     单位：像素（包括下述） 锦旗二字相对大图的范围是（117,0）~（258,29） 长：141，宽：29 第一排第一张小图片的范围是（5,41）~（72,108） 长：67，宽：67 间距都是5px 第二排第一张小图片的范围是（5,41+5+67）~（72,41+5+67+67） 长：67，宽：67 间距都是5px 第一排第二张小图片的范围...
python+pyqt实现12306图片验证效果
12-24
标题中的“python+pyqt实现12306图片验证效果”指的是使用Python语言和PyQt库来模拟12306网站上的图形验证码显示功能。PyQt是一个用于开发GUI应用的Python绑定库，它提供了丰富的组件和工具，使得开发者可以方便地...
爬虫开发03--图片验证码和模拟登陆
nikeylee的博客
10-27 1665
图片验证码 模拟登陆 代理IP
从零实现一款12306抢票软件（二）
最新发布
张小方的博客
12-01 677
本文接上一篇文章《当然，这里需要说明一下的就是，由于全国的火车站点信息文件比较大，我们程序解析起来时间较长，加上火车站编码信息并不是经常变动，所以，我们我们没必要每次都下载这个station_name.js，所以我在写程序模拟这个请求时，一般先看本地有没有这个文件，如果有就使用本地的，没有才发http请求向12306服务器请求。因为我们这里目的是为了模拟http请求做买火车票相关的操作，而不是技术方面本身，所以为了快速实现我们的目的，我们就使用curl库。
12306抢票软件实现（二）
热门推荐
zjt980452483的博客
07-25 1万+
近期好多人私信我，能不能需要分享完整代码。为了帮助大家，我以及将代码整理和教学视频我已经上传了CSDN，欢迎私信交流，共同学习共同进步：代码及视频下载地址 求给五星好评，谢谢啦 前面已经介绍了实现登录12306（https://blog.csdn.net/zjt980452483/article/details/81167765），如果想实现免输入验证码的话，可以借助一些打码平台，这个部分大家可...
c# 前后端 点选图片验证码 源码
06-15
C# mvc实现的点选图片验证码,图片在服务端生成,服务端校验.一部分代码也是参考了网上开源的资料.自己完善后共享给大家.
Android 仿12306.zip
07-10
Android 仿12306可实习 我的联系人，SharedPreferences、Fragment使用
JAVA生成验证码，存放在redis做验证
lq6812574的博客
10-10 975
import com.owinfo.utils.basetools.OwinfoStringUtil; import org.springframework.data.redis.core.RedisTemplate; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.awt.image.RenderedImage; import java.io.ByteAr.
android仿12306图片验证码选择——自定义控件
yehaojiett的博客
01-22 1470
安卓自定义控件——图片选择器大家好，最近公司的项目需求，顺手撸了一个自定义控件，顺便和大家分享一下。 （白心为选中状态） 可以自定义行的数量与列的数量，会根据传值自适应 可以配合volley完成网络自动读图 简单的回调，得到点击反馈，也可直接获得所点击的值 用处： 选择图片的验证码（某数字APP） 相亲网用于选择心仪的对象 等…… 感觉自己萌萌哒 没事，我就卖个萌 代码块xml <com
仿12306的图片验证码
weixin_30497527的博客
04-13 392
由于要做一个新项目，所以打算做一个简单的图片验证码。 先说说思路吧：在服务端，从一个文件夹里面找出8张图片，再把8张图片合并成一张大图，在8个小图里面随机生成一个要用户验证的图片分类，如小狗、啤酒等。在前端，访问这个页面时，把图片加载上去，用户在图片上选择提示所需要的图片，当用户点登陆时，根据用户选择的所有坐标判断所选的图片是不是实际上的验证图片。 先放两张效果图: 为了让文件查找比较简...
模拟登录之图片验证
木木的博客
06-05 1399
一些网站在登录时需要手动进行图片验证，这其实并不是针对反爬而进行的处理，然而的确增加了爬虫爱好者的麻烦。本文以中国铁路12306为例，教你如何用python做图片验证！
12306图片验证码效果实现
LightLu
08-31 3385
效果如下：原理：从服务器获取的图片上，我们画上自己的图片，然后再显示出来。核心代码如下在处理imageview点击事件前做如下操作： Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.yanzheng);//获取背景图片bitmap对象 Bitmap bm3 = BitmapFactory.decodeR
仿12306铁路客服服务中心登录验证码效果
zhangge3663的博客
09-09 280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>铁路客服服务中心</title> <link rel="icon" type="image/x-icon" href="http://www.12306.cn/mormhweb/images/favicon.ico"> <style> ..
Python PIL实现12306验证码图像分割与识别教程
"该资源主要介绍了如何使用Python的PIL库来识别12306图片验证码中的物品，包括图片的打开、显示、裁剪等基本操作，并给出了实战例子进行图像分割保存。此外，还提及了利用百度平台接口进行更复杂的图像识别。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值