腾讯优图,提供图片整体文字的检测和识别服务,返回文字框位置与文字内容。支持多场景、任意版面下整图文字的识别,以及中英文、字母、数字、常见字符的识别。
传送门:https://open.youtu.qq.com//#/open/experience/content
百度文字识别,支持多场景下的文字检测识别。
传送门:https://cloud.baidu.com/product/ocr/general
OCRMaker,提供在线文字识别,文字提取等服务。
传送门:http://www.ocrmaker.com
文字在线识别工具,提供图像文字识别、提取图片文字、pdf文字识别、扫描文件识别服务、pdf转Word文档等服务,输出结果支持PDF、Word和Txt格式等。
传送门:https://ocr.wdku.net
图片转文字,提供在线图片转换成文字,在线图片识别文字等服务。
传送门:http://www.pdfdo.com/image-to-txt.aspx
华为云在线图片文字识别,提供快速提取图片、表格中的文字信息,并支持一键导出等服务。
传送门:https://www.huaweicloud.com/product/ocr/image-to-txt.html
扫描全能王,提供最智能的文档管理方案。手机、平板、电脑变身随身携带的扫描仪、文件库,随时随心编辑文档等服务。
传送门:https://www.camscanner.com
白描,提供高准确度的文字识别、表格识别转Excel、批量识别、识别后翻译、文件扫描等功能。
传送门:https://baimiao.uzero.cn
Office Lens,可以将图片转换为 PDF、Word 和 PowerPoint 文件,甚至还可将图片存到 OneNote 或 OneDrive上。
传送门:https://www.microsoft.com/zh-cn/p/office-lens/9wzdncrfj3t8?activetab=pivot:overviewtab
段时间没写文章了,这段时间比较忙,很抱歉。
今天的这个手机登录界面,使用了rem作为单位,自定义了字体,使用了模糊背景,半透明登陆框。效果是小编从网上看到的,就动手实现了下,分享给在座的诸位。小编才疏学浅,如果有什么不对或许要改进的地方,还望各位不吝赐教。
我们先来看下效果图:
1、目录简单介绍下
images 放图片
fonts 字体、字体图标
css 样式表文件
base.css 基础样式
login.css login界面样式
image
js javascript文件
flexible.js rem转换px文件
login.js login页面的其他js
login.html 登录页面
2、base.css文件:我们在 base.css 中定义字体、边距、填充等,这里只指出一些关键点,想要源码的话可以关注我们,然后再私信我们,我们会发给您。
① 通过效果图,我们可以看到,placeholder提示文字是白色,所以在这里需要更改下:
input::-webkit-input-placeholder{ color:#fff; }
② 定义字体,这里只用了ttf,因为手机下大部分都是webkit内核,webkit内核是支持ttf格式的字体的。
@font-face { font-family: 'PingFangSC-Regular'; src: url('../fonts/PingFangSC-Regular.ttf'); font-weight: normal; font-style: normal; }
③ 初始化字体大小,字体类型等
body,input{ font-size: .26rem; font-family:'PingFangSC-Regular'; color:#fff; }
注:1、其他的边距、浮动、flex等,就不在这里写了,源码里面的base.css文件写的很清楚
2、rem单位,后面会有解释
3、由于有 flexible.js ,这里的html设置的字体大小无需我们设置。
3、flexible.js 文件可以将rem转换成px,自动设置html的字体大小,这样rem的值就会被浏览器根据html的字体大小实时解析成px,以适应不同分辨率的手机。我们需要做两步:
① 在头部引入 flexible.js,让它一上来就执行:
<script type="text/javascript" src="./js/flexible.js"></script>
② 打开 flexible.js,找到最后一行,将两个传参改成设计稿的宽度,我这里设计稿是720,所以,修改如下:
;(function(designWidth, maxWidth) { ... })(720, 720);
那么,在量出设计稿的像素值,在css中,除以100,就是rem。
4、新建login.html,放在根目录,在header头部加入下面的代码,让页面宽度等于手机宽度,并且禁止缩放:
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
5、在login.html的header加入下面的代码,禁止手机将页面中的号码格式化,否则影响美观:
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
6、引入相关css、js,这里不多说了。
至此,准备工作完成了,下面开始编写页面了。
背景高斯模糊,就不能直接设置到body上,否则body里面的内容都会高斯模糊,所以单独写个section,来设置
<section class="bg"></section> .bg{ background:url(../images/bg.jpg) no-repeat center/cover; position: fixed; z-index: 1; top:0; left:0; right:0; bottom:0; filter:blur(15px); }
效果图如下:
出问题了,高斯模糊导致周边变淡,玩过PS的都知道这个问题。我们只需要将背景容器放大点,超出body就行了,所以,修改后的css如下:
.bg{ background:url(../images/bg.jpg) no-repeat center/cover; position: fixed; top:0; left:0; right:0; bottom:0; filter:blur(15px); transform:scale(1.1); }
效果图如下:
注:因为背景定位了,所以里面的内容都要定位并且z-index都要比它高。
页面的内容上下居中,无论什么分辨率,内容始终在中间:
1、给body挂上 flex flex-middle,这个是在base里面定义好的flex样式
<body class="flex flex-middle">
2、既然要垂直居中,body的高度肯定要100%,html也要设置,否则,body的100%没作用:
body,html{ height: 100%; } .wrap{ padding:0 .85rem; position: relative; z-index: 2; }
3、这个wrap就是居中容器,所有的内容都放里面:
<section class="wrap"></section>
header比较简单,要注意“Welcome”,有阴影,这里不能用盒子阴影box-shadow,而是用文字阴影text-shadow,它比box-shadow少个参数,即扩展。根据UI,测量的尺寸都除以100就是rem的值,如130px,这里就写1.3rem就可以了
.header h1{ font-weight: normal; font-size: 1rem; text-shadow: 0 0 4px rgba(0,0,0,.5); text-align: center; } .header p{ font-size: .22rem; text-align: center; line-height: 1.8 } <header class="header"> <h1>Welcome</h1> <p> Lorem ipsum sit amet,consectetur adipiscing dlit. Donec auctor neque sed pretium luctus. </p> </header>
效果如下
这个主要是头像、输入框和提交按钮,都比较简单,就不多说了。边框小编设置的粗细是0.5px,这里并不代表边框粗细就是0.5px。因为现在手机大部分都是视网膜屏,物理分辨率都是逻辑分辨率的2倍多,这里设置的0.5px是逻辑分辨率,转换成物理像素大概就是1px。
.avatar{ width: 1.5rem; height: 1.5rem; display: block; margin: auto; border-radius: 999px; border:.5px solid #fff; box-shadow: 0 0 4px 0 rgba(0,0,0,.3); } .row *{ height:.85rem; line-height: .85rem; width: 100%; text-align: center; border-radius: 999px; box-shadow: 0 0 4px 0 rgba(0,0,0,.3); } .row .ipt{ background: transparent; border:.5px solid #fff; } .row .submit{ background:linear-gradient(to bottom,#25af61,#149c4f); border:0 none; display: block; border:.5px solid #33c773; } <section class="main mt110"> <img class="avatar" src="./images/avatar.jpg"> <section class="row mt25"> <input type="text" class="ipt" placeholder="User Name"> </section> <section class="row mt25"> <input type="password" class="ipt" placeholder="Password"> </section> <section class="row mt25"> <a href="javascript:;" class="submit">Login</a> </section> </section>
六、版权
这个没什么好说的,居中,定位在底部
.copy{ position: absolute; bottom: .2rem; left: 0; right: 0; z-index: 2; font-size: .23rem; } <footer class="copy tc mt40"> © 2019 IT学堂 </footer>
最终效果如下
想要源码的话可以关注我们,然后再私信我们,我们会发给您。关注IT学堂,有更多干货哦!
多特效代码请添加HTML5前端交流群581549454
废话不多说上代码!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery手机微信端手指触摸图片放大代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(img/icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url(img/grab.cur), default; }
#ex2 img:active { cursor: url(img/grabbed.cur), default; }
</style>
</head>
<body>
<div>
<span id='ex1'>
<img src='img/design.jpg' width='555' height='320' alt='web design'>
<p>Hover</p>
</span>
<span id='ex2'>
<img src='img/women.jpg' width='290' height='320' alt='women'>
<p>Grab</p>
</span>
<span id='ex3'>
<img src='img/horse.jpg' width='555' height='320' alt='horse'>
<p>Click to activate</p>
</span>
<span id='ex4'>
<img src='img/women2.jpg' width='290' height='320' alt='women2'>
<p>Click to toggle</p>
</span>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery.zoom.js' type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
});
</script>
</body>
</html>
*请认真填写需求信息,我们会在24小时内与您取得联系。