学习基于html和JavaScript的滑动图片拼图验证源码

news2025/7/11 14:59:38

  之前的文章《使用C#中的GDI+功能实现图片填充验证方式》中介绍过使用GDI+在Winform中实现图片拼图验证的思路,学了html中的canvas使用方式后,也可以照搬思路实现,只不过没有在Winform中方便。但是在网上看了不少基于html和JavaScript的滑动图片拼图验证的文章及实现代码,大部分的思路都是综合应用html+css+JavaScript实现的,并不是仅靠Canvas单个对象完成,网页程序中的实现思路和Winform差异还是比较大。
  鉴于作者学习html+css+JavaScript还比较水,尤其是css,因此本文主要是学习网上的源码并动手实现,然后记录一下实现的思路。本文学习参考文献1中的示例代码,并根据本机实际情况微调其中的源码,最终复现滑动图片拼图验证效果(主要是参考文献1中没有附带程序使用的图片,在百度图片中搜索了对应元素所需的图片,同时对元素尺寸调整了一下)。

  参考文献1的实现思路是用canvas、div和span三类元素拼出滑动图片拼图验证的界面,这和winform差得很多,winform是用GDI+在同一控件的不同区域绘制不同的内容,而在网页中实现时则变成了不同的区域由不同的元素组成,如下图所示,重要的组成元素清单如下表所示:
在这里插入图片描述

序号类型类或ID作用
1canvascanvas完整显示图片原图,并在原图上显示待拼图区域
2canvasblock显示拼图图片,浮于canvas上方,随滑块5的移动而移动,开始尺寸及内容与canvas保持一致,然后保存滑动拼图图片后宽度变窄
3divrefreshIcon刷新按钮,点了重置程序
4divbar-mask开始与5重叠,宽度随着5的移动变化,目的是大致显示滑块向右移动的距离
5divverSliderBlock滑块,响应鼠标按下、移动和按起事件,鼠标按起时判断拼图是否拼合,由于y方向没有变化,只需判断x方向的吻合情况即可
6spanslide显示提示信息,开始时提示向右滑动验证,鼠标按起时显示验证结果

  程序最重要的是滑块5,其它元素都随5的移动而变化。程序的大致运行逻辑如下:

  • 随机生成拼图图片左上角起始位置;
  • 在canvas和block中绘制图片,然后重新设置block的宽度,并在block中将还是方形的拼图图片从原始位置复制到左侧水平起始位置;
  • 在canvas中以填充方式绘制不规则的拼图区域,并在block中以剪切方式绘制不规则的拼图区域,此时页面中block只会显示剪切区域的图形,也即拼图图片;
  • 定义滑块5的鼠标按下、移动和按起事件响应函数;
  • 用户移动滑块5,松开鼠标时自动判断block和canvas中的拼图图片位置重合情况(小于10个像素),显示验证结果,并在1秒后自动重置程序。

  详细程序请到参考文献1中去参考,这里不列出来了,只是截了两张程序运行效果图,如下所示:
在这里插入图片描述
在这里插入图片描述

参考文献
[1]https://blog.csdn.net/Hhjian524/article/details/104294249?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-104294249-blog-117844286.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-104294249-blog-117844286.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/36682.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】栈的模拟和使用理解

学习目录栈(Stack)栈的概念栈的使用栈相关的应用场景栈的模拟实现中缀表达式 转 后缀表达式栈(Stack) 栈的概念 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作. 进行数据插入和删除操作的一端称为栈顶,另一端称为栈底&a…

关于vba代码运行时错误1004 应用程序定义或对象定义错误问题

一、错误描述 将Excel所有工作表,汇总到一个工作表中: 在thisworkbook中运行如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 Su…

大数据面试题(五):Hadoop优化核心高频面试题

文章目录 Hadoop优化核心高频面试题 一、Mapreduce 跑的慢的原因? 1、计算机性能 2、I/O 操作优化 二、Mapreduce优化方法 1、数据输入 2、map阶段 3、reduce阶段 4、IO传输 5、数据倾斜问题 6、常用的调优参数 三、HDFS小文件优化方法 1、HDFS小文件…

【MATLAB】常见语法结构和实用操作

目录 语法结构 循环(遍历)结构 函数结构 画图操作 绘制函数图像 ezplot figure多图绘制 创建多项式 按照系数创建多项式 利用多项式零点创建多项式 解方程组 语法结构 循环(遍历)结构 与其它编程语言类似,…

常用辅助类

CountDownLatch 应用场景:1.多线程任务汇总。2.多线程任务阻塞住,等待发令枪响,一起执行。 减法计数器 每次有线程调用,数量-1,当计数器归零,countDownLatch.await()就会被唤醒向下执行。 import java.uti…

【代码随想录】二刷-二叉树

二叉树 《代码随想录》 二叉树的遍历方式 深度优先遍历: 前序遍历(递归法、迭代法): 中左右中序遍历(递归法、迭代法): 左中右后序遍历(递归法、迭代法): 左右中 广度优先遍历: 层序遍历(迭代法) 二叉树的定义 struct TreeNode{int val;TreeNode* left;TreeNode* right;TreeN…

无线传感器网络:网络层

文章目录Challenges for RoutingEnergy EfficiencyScalabilityAddressingRobustnessTopologyApplicationRouting MetricsQuality-of-Service (QoS)Minimum HopEnergyMinimum energy consumed per packetMaximum time to network partitionMaximum average energy capacityMaxim…

Java并发-操作系统,进程,线程,并行并发?

我们首先来看看,三者之间的关系,从图中可以看到 操作系统是包含多个进程的容器;而每个进程又是容纳多个线程的容器。什么是进程?官方定义: 进程(baiProcess)是计算机中的程序关于某数据集合上的…

详解:网络虚拟化卸载加速技术的演进

在传统的应用场景中,服务器资源过剩情况普遍,为了充分利用服务器资源,产生了虚拟化技术。虚拟化技术以牺牲部分效率为代价提升了资源的使用率,将原来需要硬件完成的工作,通过软件模拟的方式,满足多个云租户…

初识Qt Quick

讲讲最近几年Qt的热门技术Quick这一块了。 啥是Qt? 哦,这是一个宣称可以跨任意平台,开发各种场景应用软件的开发框架。从三个维度来讲,就是开发库framework,集成开发平台IDE,以及成熟的开发思维模式。 Q…

CAS:82055-94-5,Azide-PEG-Azide,N3-PEG-N3,叠氮聚乙二醇叠氮试剂供应

1、名称 英文:Azide-PEG-Azide,N3-PEG-N3 中文:叠氮-聚乙二醇-叠氮 2、CAS编号:82055-94-5 3、所属分类:Azide PEG 4、分子量:可定制,叠氮-PEG-叠氮 2000、叠氮peg叠氮 1000、叠氮-聚乙二醇…

org.activiti.bpmn

org.activiti.bpmn目录概述需求:设计思路实现思路分析1.BpmnAutoLayout2.BPMNLayout参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait for ch…

Mybatis概述

1 概述 原来是Apache的一个开源项目,叫iBatis, 2010年6月这个项目由 Apache Software Foundation 迁移到了 Google Code,随着开发团队转投Google Code 旗下,从 iBatis3.0正式更名为MyBatis。 MyBatis 是一款优秀的持久层框架,对j…

容器卷挂载的秘密

什么是容器卷 数据卷 (Data Volumes )是一个可供容器使用的特殊目录,它将主机操作系统目录直接映射进容器,类似于 Linux 中的 mount 行为。 容器挂载原理 containerd创建的容器里的数据存储在下面的目录中 [rootmaster01 httpb…

【C/C++】万字图文详解C语言文件操作 完美装饰课设大作业

目标导航 写在前面 为什么使用文件? 什么是文件? 程序文件 数据文件 认识文件名 文件的打开和关闭 文件指针 文件的打开和关闭 1.以"r"(只读)的方式打开文件 2.以"w"(只写)…

Java#24(常见API--2)

目录 一.Rantime Runtime表示当前虚拟机的运行环境 Runtime常用方法 扩展:对象克隆 二.Objects Objects是一个对象工具类,提供了一些操作对象的方法 一.Rantime Runtime表示当前虚拟机的运行环境 Runtime常用方法 方法名 作用 publi…

葡萄糖-聚乙二醇-链霉亲和素|Streptavidins-PEG-Glucose|链霉亲和素-PEG-葡萄糖

链霉亲和素(streptavidin下称SA)是与亲和素(avidin下称AV)是一种蛋白质,链霉亲和素是四聚体蛋白,大小为66KDa。一分子链霉亲和素可以高度特异性地与四分子生物素结合,两者之间的亲和力较为强烈。链霉亲和素分子由4条相同的肽链组成&#xff0…

delete-by-query和复合查询

根据term,match等查询方式去删除大量的文档 Ps:如果你需要删除的内容,是index下的大部分数据,推荐创建一个全新的index,将保留的文档内容,添加到全新的索引 # delete-by-query POST /sms-logs-index/sms-lo…

毕业设计-基于机器视觉的颜色目标识别

目录 前言 课题背景和意义 实现技术思路 什么是彩色空间 怎么利用彩色空间 颜色识别的过程 读取图片进行hsv色域转换 对图片特定颜色识别 本地摄像头对视频流进行颜色识别 实现效果图样例 前言 📅大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后…

Python基础-面向对象编程之特性(property)

Python面向对象编程之特性(property) 一、统一访问原则 通常,我们访问实例或类的属性时,将返回所存储的相关值。而特性(property)是一种特殊的属性,访问它时会计算它的值。 请看下面的例子: import mat…