整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

在线文字图片识别工具

线工具



腾讯优图,提供图片整体文字的检测和识别服务,返回文字框位置与文字内容。支持多场景、任意版面下整图文字的识别,以及中英文、字母、数字、常见字符的识别。

传送门: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


APP



扫描全能王,提供最智能的文档管理方案。手机、平板、电脑变身随身携带的扫描仪、文件库,随时随心编辑文档等服务。

传送门: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

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>