教你使用Matlab制作图形验证码生成器(app designer)
目录
- 1字符图片生成
- 2刷新按钮生成
- 3图片处理
- 3.1图像任意方向拉伸
- 3.2字符边缘
- 3.3图像处理部分代码
- 4线条和散点生成
- 5关于图像存储
- 6关于验证码对比
- 7完整代码
突然发现cla函数也可以应用到app designer控件上,因而对部分内容做出更改,将绘制隐藏像素刷新的方式改为用cla
原
hold(acAxes,'off'); image(acAxes,[-1,0],[-1,0],ones(1,1,3),'visible','off'); hold(acAxes,'on'); delete(findobj('tag','ax'));
新
cla(acAxes) cla(ax)
0效果
1字符图片生成
如果我们单纯的用text绘制图形,就无法做到效果中符号和符号边缘两个颜色,也无法做到更大程度的变形,因此我们需要将字符转换为矩阵形式。
想要实现也非常简单,我们只需要创建一个不可视的fig,在其上绘制字符,保存fig为png格式图片,再通过imread读取图片,就能获得字符矩阵:
第一次运行程序因为要生成字符图片因而会比较慢,再次运行就可以读取之前已经生成过的图片啦:
% 字符图片矩阵构造 ======================================================== % 以下为字符图片创建过程 % 原理为构造隐藏的figure和axes % 在其上用text绘制字符并保存figure为图片 % 导入图片 if ~exist('Materials','dir') mkdir('Materials'); end fig=figure('units','pixels',... 'position',[20 80 200 200],... 'Numbertitle','off',... 'Color',[1 1 1],... 'resize','off',... 'visible','off',... 'menubar','none'); ax=axes('Units','pixels',... 'parent',fig,... 'Color',[1 1 1],... 'Position',[0 0 200 200],... 'XLim',[0 200],... 'YLim',[0 200],... 'XColor',[1 1 1],... 'YColor',[1 1 1]); strPic{length(strElement)}=[]; for i=1:length(strElement) % 若是不存在该字符图片则生成,否则直接导入 if ~exist(['.\Materials\',strElement(i),'.png'],'file') delete(findobj('tag','textStr')); text(ax,100,100,strElement(i),'HorizontalAlignment',... 'center','FontSize',140,'tag','textStr','FontWeigh','bold') saveas(fig,['.\Materials\',strElement(i),'.png']); % 保存图片 end tempPic=imread(['.\Materials\',strElement(i),'.png']); % 读取图片 strPic{i}=imresize(tempPic,[150,150]); % 重新调整图片大小 end
2刷新按钮生成
大家可以看到这个按钮的样式与大部分按钮不同:
实际上这是一个HTML控件,输入html文件的位置就可以形成类似嵌入页面的效果:
acHTML=uihtml(acFigure); acHTML.HTMLSource='.\Materials\textbtn.html'; acHTML.DataChangedFcn=@refresh; acHTML.Position=[300 50 88 26];
如代码所示,我们导入的是Materials文件夹内的textbtn.html文件
textbtn.html长这样:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <script type="text/javascript"> function setup(htmlComponent) { document.getElementById("btnonclink").addEventListener("click", function(event) { htmlComponent.Data="test"; }); } </script> </head> <body> <a href="" id=" rel="external nofollow" rel="external nofollow" rel="external nofollow" btnonclink">看不清?</a> </body> </html>
当然为了防止大家不会创建,我在m文件中写了一段能够自动创建html文件的代码,原理就是将字符串信息写入txt,再将txt文件后缀改为html:
% .html文件自动生成及引入 - - - - - - - - - - - - - - - - - - - - - - - - - htmlContent={'<!DOCTYPE html><html><head><meta charset=UTF-8>'; '<script type="text/javascript">'; 'function setup(htmlComponent){'; 'document.getElementById("btnonclink").addEventListener("click",function(event){'; 'htmlComponent.Data="test";});}</script></head>'; '<body><a href="" id=" rel="external nofollow" rel="external nofollow" rel="external nofollow" btnonclink">看不清?</a></body></html>'}; if ~exist('.\Materials\textbtn.html','file') fid=fopen('.\Materials\textbtn.txt','w'); for i=1:length(htmlContent) fprintf(fid,'%s\r\n',htmlContent{i}); end fclose(fid); copyfile('.\Materials\textbtn.txt','.\Materials\textbtn.html'); delete('.\Materials\textbtn.txt') end
3图片处理
3.1图像任意方向拉伸
这部分原理就是将图像旋转一定角度后,在竖直方向进行拉伸后再旋转回去
3.2字符边缘
这部分原理将字符均值滤波后,把不完全是黑色的部分设置为灰色,后期再设置为其他颜色
3.3图像处理部分代码
randColor=@()randi([0,200],[1,3]); % 生成随机颜色的匿名函数 % 从图像集合中提取图像 tPic=strPic{randiNums(ii)}; tPic=tPic(:,:,1); % 将图像旋转-拉伸-旋转 randiTheta1=randi([0,90]); randiTheta2=randi([-30,30]); randiLenth=randi([0,70]); tPic=imrotate(255-tPic,randiTheta1,'bilinear','crop'); tPic=imresize(tPic,[150+randiLenth,150]); tPic=imrotate(tPic,-randiTheta1+randiTheta2,'bilinear','crop'); % 将图像边缘进行模糊,并将模糊的部分数值设置为150 tPic=255-imfilter(tPic,I_5); tPic(tPic~=0&tPic~=255)=150; % 为符号和符号边缘赋予不同颜色 tempColor1=randColor();tempColor2=randColor(); tempPicR=tPic;tempPicG=tPic;tempPicB=tPic; tempPicR(tPic==150)=tempColor1(1);tempPicR(tPic==0)=tempColor2(1); tempPicG(tPic==150)=tempColor1(2);tempPicG(tPic==0)=tempColor2(2); tempPicB(tPic==150)=tempColor1(3);tempPicB(tPic==0)=tempColor2(3); tempPic_3=uint8(zeros([size(tPic),3])); tempPic_3(:,:,1)=tempPicR; tempPic_3(:,:,2)=tempPicG; tempPic_3(:,:,3)=tempPicB;
4线条和散点生成
散点就是生成一堆随机位置点和一些随机颜色后用scatter函数绘制,线条是生成散点后使用’spline’插值方法插值成线后再绘制:
randColor=@()randi([0,200],[1,3]); % 生成随机颜色的匿名函数 randColor_n=@(n)randi([0,200],[n,3])./255; % 生成n个随机颜色的匿名函数 randPoint_n=@(n)[randi([5,195],[n,1]),randi([5,65],[n,1])];% 生成n个随机点的匿名函数 % 绘制散点 pPonintsNum=randi([6,10]); pPoints=randPoint_n(pPonintsNum); pPointsColor=randColor_n(pPonintsNum); scatter(acAxes,pPoints(:,1),pPoints(:,2),6,'filled',... 'CData',pPointsColor,'AlphaData',0.6) % 绘制线 lPonintsNum=randi([5,7]); lPoints=randPoint_n(lPonintsNum); lPointsColor=[randColor()./255,0.6]; x_lPoints=interp1(1:lPonintsNum,lPoints(:,1),1:0.01:lPonintsNum,'spline'); y_lPoints=interp1(1:lPonintsNum,lPoints(:,2),1:0.01:lPonintsNum,'spline'); plot(acAxes,x_lPoints,y_lPoints,'Color',lPointsColor,'LineWidth',1.5)
5关于图像存储
由于目前版本uifigure还不支持存储为图像,因此我们绘制图像是在figure和uifigure分别绘制一遍,其中figure依旧是不可见状态,主要用于将图片验证码保存为png格式,可以在完整代码中看出这一点。
同时,本程序的设置为,每次刷新图形验证码,都会刷新当前文件夹下authCode.png为最新的验证码,如需要保存请及时将其改名或复制另存:
6关于验证码对比
首先就是需要提取框内验证码:
codeInPut=acEditField.Value;
因为我们的验证码字符都是大写的,将输入的文本用upper函数变为大写:
codeInPut=upper(codeInPut);
同时我们因为0和O长的太像,所以不对其进行区分,直接将输入的验证码中的0改为O:
codeInPut(codeInPut=='0')='O';
之后就能够用strcmp函数将当前验证码和输入的验证码进行对比:
if strcmp(codeInPut,authCode) msgbox('验证码正确') else msgbox('验证码错误') end
7完整代码
function authCode strElement=char([49:57,65:90]); % 1-9,A-Z的字符 randColor=@()randi([0,200],[1,3]); % 生成随机颜色的匿名函数 randColor_n=@(n)randi([0,200],[n,3])./255; % 生成n个随机颜色的匿名函数 randPoint_n=@(n)[randi([5,195],[n,1]),randi([5,65],[n,1])];% 生成n个随机点的匿名函数 global authCode; % 全局变量:验证码 % 字符图片矩阵构造 ======================================================== % 以下为字符图片创建过程 % 原理为构造隐藏的figure和axes % 在其上用text绘制字符并保存figure为图片 % 导入图片 if ~exist('Materials','dir') mkdir('Materials'); end fig=figure('units','pixels',... 'position',[20 80 200 200],... 'Numbertitle','off',... 'Color',[1 1 1],... 'resize','off',... 'visible','off',... 'menubar','none'); ax=axes('Units','pixels',... 'parent',fig,... 'Color',[1 1 1],... 'Position',[0 0 200 200],... 'XLim',[0 200],... 'YLim',[0 200],... 'XColor',[1 1 1],... 'YColor',[1 1 1]); strPic{length(strElement)}=[]; for i=1:length(strElement) % 若是不存在该字符图片则生成,否则直接导入 if ~exist(['.\Materials\',strElement(i),'.png'],'file') delete(findobj('tag','textStr')); text(ax,100,100,strElement(i),'HorizontalAlignment',... 'center','FontSize',140,'tag','textStr','FontWeigh','bold') saveas(fig,['.\Materials\',strElement(i),'.png']); % 保存图片 end tempPic=imread(['.\Materials\',strElement(i),'.png']); % 读取图片 strPic{i}=imresize(tempPic,[150,150]); % 重新调整图片大小 end % 更改fig ax样式,为方便后期验证码存储 fig.Position=[100 100 200 70]; ax.Position=[1 1 199.5 70]; ax.XTick=[]; ax.YTick=[]; ax.XLim=[0,200]; ax.YLim=[0,70]; ax.XColor=[0.7 0.7 0.7]; ax.YColor=[0.7 0.7 0.7]; ax.Box='on'; ax.YDir='reverse'; hold(ax,'on'); % APP designer窗口构建 ==================================================== acFigure=uifigure(); acFigure.Position=[100 100 370 90]; acFigure.Name='authCode'; acFigure.Resize='off'; acAxes=uiaxes(acFigure); acAxes.Position=[10 10 200 70]; acAxes.XTick=[]; acAxes.YTick=[]; acAxes.XLim=[0,200]; acAxes.YLim=[0,70]; acAxes.XColor=[0.7 0.7 0.7]; acAxes.YColor=[0.7 0.7 0.7]; acAxes.Box='on'; acAxes.YDir='reverse'; hold(acAxes,'on'); acEditField=uieditfield(acFigure,'text'); acEditField.Position=[220 52 70 23]; acEditField.FontSize=16; acEditField.FontWeight='bold'; acEditField.FontColor=[0.3,0.3,0.3]; % .html文件自动生成及引入 - - - - - - - - - - - - - - - - - - - - - - - - - htmlContent={'<!DOCTYPE html><html><head><meta charset=UTF-8>'; '<script type="text/javascript">'; 'function setup(htmlComponent){'; 'document.getElementById("btnonclink").addEventListener("click",function(event){'; 'htmlComponent.Data="test";});}</script></head>'; '<body><a href="" id=" rel="external nofollow" rel="external nofollow" rel="external nofollow" btnonclink">看不清?</a></body></html>'}; if ~exist('.\Materials\textbtn.html','file') fid=fopen('.\Materials\textbtn.txt','w'); for i=1:length(htmlContent) fprintf(fid,'%s\r\n',htmlContent{i}); end fclose(fid); copyfile('.\Materials\textbtn.txt','.\Materials\textbtn.html'); delete('.\Materials\textbtn.txt') end acHTML=uihtml(acFigure); acHTML.HTMLSource='.\Materials\textbtn.html'; acHTML.DataChangedFcn=@refresh; acHTML.Position=[300 50 88 26]; % - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - acButton=uibutton(acFigure); acButton.Position=[220 15 140 30]; acButton.Text='确 认 验 证 码'; acButton.BackgroundColor=[0.31 0.58 0.80]; acButton.FontColor=[1 1 1]; acButton.FontWeight='bold'; acButton.FontSize=14; acButton.ButtonPushedFcn=@verify; % 回调函数 ================================================================ function refresh(~,~) cla(acAxes) cla(ax) I_5=fspecial('average',[5,5]); % 5*5均值滤波模板 randiNums=randi([1,length(strElement)],[1,4]); authCode=strElement(randiNums); % 验证码 disp(authCode) for ii=1:4 tPic=strPic{randiNums(ii)}; tPic=tPic(:,:,1); %tempPic(tempPic<250)=150; % 将图像旋转-拉伸-旋转 randiTheta1=randi([0,90]); randiTheta2=randi([-30,30]); randiLenth=randi([0,70]); tPic=imrotate(255-tPic,randiTheta1,'bilinear','crop'); tPic=imresize(tPic,[150+randiLenth,150]); tPic=imrotate(tPic,-randiTheta1+randiTheta2,'bilinear','crop'); % 将图像边缘进行模糊,并将模糊的部分数值设置为150 tPic=255-imfilter(tPic,I_5); tPic(tPic~=0&tPic~=255)=150; % 为符号和符号边缘赋予不同颜色 tempColor1=randColor();tempColor2=randColor(); tempPicR=tPic;tempPicG=tPic;tempPicB=tPic; tempPicR(tPic==150)=tempColor1(1);tempPicR(tPic==0)=tempColor2(1); tempPicG(tPic==150)=tempColor1(2);tempPicG(tPic==0)=tempColor2(2); tempPicB(tPic==150)=tempColor1(3);tempPicB(tPic==0)=tempColor2(3); tempPic_3=uint8(zeros([size(tPic),3])); tempPic_3(:,:,1)=tempPicR; tempPic_3(:,:,2)=tempPicG; tempPic_3(:,:,3)=tempPicB; % 显示图片 image(acAxes,[-size(tempPic_3,2)/2,size(tempPic_3,2)/2]./3.5+40*ii+randi([-5,5]),... [-size(tempPic_3,1)/2,size(tempPic_3,1)/2]./3.5+35+randi([-5,5]),... tempPic_3,'AlphaData',tempPic_3(:,:,1)~=255,'Interpolation','bilinear') image(ax,[-size(tempPic_3,2)/2,size(tempPic_3,2)/2]./3.5+40*ii+randi([-5,5]),... [-size(tempPic_3,1)/2,size(tempPic_3,1)/2]./3.5+35+randi([-5,5]),... tempPic_3,'AlphaData',tempPic_3(:,:,1)~=255,'Interpolation','bilinear') end % 绘制散点 pPonintsNum=randi([6,10]); pPoints=randPoint_n(pPonintsNum); pPointsColor=randColor_n(pPonintsNum); scatter(acAxes,pPoints(:,1),pPoints(:,2),6,'filled',... 'CData',pPointsColor,'AlphaData',0.6) scatter(ax,pPoints(:,1),pPoints(:,2),6,'filled',... 'CData',pPointsColor,'AlphaData',0.6) % 绘制线 lPonintsNum=randi([5,7]); lPoints=randPoint_n(lPonintsNum); lPointsColor=[randColor()./255,0.6]; x_lPoints=interp1(1:lPonintsNum,lPoints(:,1),1:0.01:lPonintsNum,'spline'); y_lPoints=interp1(1:lPonintsNum,lPoints(:,2),1:0.01:lPonintsNum,'spline'); plot(acAxes,x_lPoints,y_lPoints,'Color',lPointsColor,'LineWidth',1.5) plot(ax,x_lPoints,y_lPoints,'Color',lPointsColor,'LineWidth',1.5) saveas(fig,'.\authCode.png'); end refresh() function verify(~,~) codeInPut=acEditField.Value; codeInPut=upper(codeInPut); codeInPut(codeInPut=='0')='O'; if strcmp(codeInPut,authCode) msgbox('验证码正确') else msgbox('验证码错误') end end end
注:程序第一次运行由于有html文件及png文件需要生成,因而会比较慢,之后的运行速度会快很多。
对于以前版本没有uihtml控件可以先尝试如下代码:
这里用正常按钮替换了uihtml控件
function authCode2 strElement=char([49:57,65:90]); % 1-9,A-Z的字符 randColor=@()randi([0,200],[1,3]); % 生成随机颜色的匿名函数 randColor_n=@(n)randi([0,200],[n,3])./255; % 生成n个随机颜色的匿名函数 randPoint_n=@(n)[randi([5,195],[n,1]),randi([5,65],[n,1])];% 生成n个随机点的匿名函数 global authCode; % 全局变量:验证码 % 字符图片矩阵构造 ======================================================== % 以下为字符图片创建过程 % 原理为构造隐藏的figure和axes % 在其上用text绘制字符并保存figure为图片 % 导入图片 if ~exist('Materials','dir') mkdir('Materials'); end fig=figure('units','pixels',... 'position',[20 80 200 200],... 'Numbertitle','off',... 'Color',[1 1 1],... 'resize','off',... 'visible','off',... 'menubar','none'); ax=axes('Units','pixels',... 'parent',fig,... 'Color',[1 1 1],... 'Position',[0 0 200 200],... 'XLim',[0 200],... 'YLim',[0 200],... 'XColor',[1 1 1],... 'YColor',[1 1 1]); strPic{length(strElement)}=[]; for i=1:length(strElement) % 若是不存在该字符图片则生成,否则直接导入 if ~exist(['.\Materials\',strElement(i),'.png'],'file') delete(findobj('tag','textStr')); text(ax,100,100,strElement(i),'HorizontalAlignment',... 'center','FontSize',140,'tag','textStr','FontWeigh','bold') saveas(fig,['.\Materials\',strElement(i),'.png']); % 保存图片 end tempPic=imread(['.\Materials\',strElement(i),'.png']); % 读取图片 strPic{i}=imresize(tempPic,[150,150]); % 重新调整图片大小 end % 更改fig ax样式,为方便后期验证码存储 fig.Position=[100 100 200 70]; ax.Position=[1 1 199.5 70]; ax.XTick=[]; ax.YTick=[]; ax.XLim=[0,200]; ax.YLim=[0,70]; ax.XColor=[0.7 0.7 0.7]; ax.YColor=[0.7 0.7 0.7]; ax.Box='on'; ax.YDir='reverse'; hold(ax,'on'); % APP designer窗口构建 ==================================================== acFigure=uifigure(); acFigure.Position=[100 100 370 90]; acFigure.Name='authCode'; acFigure.Resize='off'; acAxes=uiaxes(acFigure); acAxes.Position=[10 10 200 70]; acAxes.XTick=[]; acAxes.YTick=[]; acAxes.XLim=[0,200]; acAxes.YLim=[0,70]; acAxes.XColor=[0.7 0.7 0.7]; acAxes.YColor=[0.7 0.7 0.7]; acAxes.Box='on'; acAxes.YDir='reverse'; hold(acAxes,'on'); acEditField=uieditfield(acFigure,'text'); acEditField.Position=[220 52 70 23]; acEditField.FontSize=16; acEditField.FontWeight='bold'; acEditField.FontColor=[0.3,0.3,0.3]; acfreshBtn=uibutton(acFigure); acfreshBtn.Text='看不清?'; acfreshBtn.ButtonPushedFcn=@refresh; acfreshBtn.Position=[300 50 60 27]; % - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - acButton=uibutton(acFigure); acButton.Position=[220 15 140 30]; acButton.Text='确 认 验 证 码'; acButton.BackgroundColor=[0.31 0.58 0.80]; acButton.FontColor=[1 1 1]; acButton.FontWeight='bold'; acButton.FontSize=14; acButton.ButtonPushedFcn=@verify; % 回调函数 ================================================================ function refresh(~,~) cla(acAxes) cla(ax) % hold(acAxes,'off'); % image(acAxes,[-1,0],[-1,0],ones(1,1,3),'visible','off'); % hold(acAxes,'on'); % delete(findobj('tag','ax')); I_5=fspecial('average',[5,5]); % 5*5均值滤波模板 randiNums=randi([1,length(strElement)],[1,4]); authCode=strElement(randiNums); % 验证码 disp(authCode) for ii=1:4 tPic=strPic{randiNums(ii)}; tPic=tPic(:,:,1); %tempPic(tempPic<250)=150; % 将图像旋转-拉伸-旋转 randiTheta1=randi([0,90]); randiTheta2=randi([-30,30]); randiLenth=randi([0,70]); tPic=imrotate(255-tPic,randiTheta1,'bilinear','crop'); tPic=imresize(tPic,[150+randiLenth,150]); tPic=imrotate(tPic,-randiTheta1+randiTheta2,'bilinear','crop'); % 将图像边缘进行模糊,并将模糊的部分数值设置为150 tPic=255-imfilter(tPic,I_5); tPic(tPic~=0&tPic~=255)=150; % 为符号和符号边缘赋予不同颜色 tempColor1=randColor();tempColor2=randColor(); tempPicR=tPic;tempPicG=tPic;tempPicB=tPic; tempPicR(tPic==150)=tempColor1(1);tempPicR(tPic==0)=tempColor2(1); tempPicG(tPic==150)=tempColor1(2);tempPicG(tPic==0)=tempColor2(2); tempPicB(tPic==150)=tempColor1(3);tempPicB(tPic==0)=tempColor2(3); tempPic_3=uint8(zeros([size(tPic),3])); tempPic_3(:,:,1)=tempPicR; tempPic_3(:,:,2)=tempPicG; tempPic_3(:,:,3)=tempPicB; % 显示图片 image(acAxes,[-size(tempPic_3,2)/2,size(tempPic_3,2)/2]./3.5+40*ii+randi([-5,5]),... [-size(tempPic_3,1)/2,size(tempPic_3,1)/2]./3.5+35+randi([-5,5]),... tempPic_3,'AlphaData',tempPic_3(:,:,1)~=255,'Interpolation','bilinear') image(ax,[-size(tempPic_3,2)/2,size(tempPic_3,2)/2]./3.5+40*ii+randi([-5,5]),... [-size(tempPic_3,1)/2,size(tempPic_3,1)/2]./3.5+35+randi([-5,5]),... tempPic_3,'AlphaData',tempPic_3(:,:,1)~=255,'Interpolation','bilinear') end % 绘制散点 pPonintsNum=randi([6,10]); pPoints=randPoint_n(pPonintsNum); pPointsColor=randColor_n(pPonintsNum); scatter(acAxes,pPoints(:,1),pPoints(:,2),6,'filled',... 'CData',pPointsColor,'AlphaData',0.6) scatter(ax,pPoints(:,1),pPoints(:,2),6,'filled',... 'CData',pPointsColor,'AlphaData',0.6) % 绘制线 lPonintsNum=randi([5,7]); lPoints=randPoint_n(lPonintsNum); lPointsColor=[randColor()./255,0.6]; x_lPoints=interp1(1:lPonintsNum,lPoints(:,1),1:0.01:lPonintsNum,'spline'); y_lPoints=interp1(1:lPonintsNum,lPoints(:,2),1:0.01:lPonintsNum,'spline'); plot(acAxes,x_lPoints,y_lPoints,'Color',lPointsColor,'LineWidth',1.5) plot(ax,x_lPoints,y_lPoints,'Color',lPointsColor,'LineWidth',1.5) saveas(fig,'.\authCode.png'); end refresh() function verify(~,~) codeInPut=acEditField.Value; codeInPut=upper(codeInPut); codeInPut(codeInPut=='0')='O'; if strcmp(codeInPut,authCode) msgbox('验证码正确') else msgbox('验证码错误') end end end
以上就是教你使用Matlab制作图形验证码生成器(app designer)的详细内容,更多关于Matlab图形验证码生成器的资料请关注我们其它相关文章!