在線文字圖片識別工具

線工具

騰訊優(yōu)圖，提供圖片整體文字的檢測和識別服務(wù)，返回文字框位置與文字內(nèi)容。支持多場景、任意版面下整圖文字的識別，以及中英文、字母、數(shù)字、常見字符的識別。

傳送門：https://open.youtu.qq.com//#/open/experience/content

百度文字識別，支持多場景下的文字檢測識別。

傳送門：https://cloud.baidu.com/product/ocr/general

OCRMaker，提供在線文字識別，文字提取等服務(wù)。

傳送門：http://www.ocrmaker.com

文字在線識別工具，提供圖像文字識別、提取圖片文字、pdf文字識別、掃描文件識別服務(wù)、pdf轉(zhuǎn)Word文檔等服務(wù)，輸出結(jié)果支持PDF、Word和Txt格式等。

傳送門：https://ocr.wdku.net

圖片轉(zhuǎn)文字，提供在線圖片轉(zhuǎn)換成文字，在線圖片識別文字等服務(wù)。

傳送門：http://www.pdfdo.com/image-to-txt.aspx

華為云在線圖片文字識別，提供快速提取圖片、表格中的文字信息，并支持一鍵導(dǎo)出等服務(wù)。

傳送門：https://www.huaweicloud.com/product/ocr/image-to-txt.html

APP

掃描全能王，提供最智能的文檔管理方案。手機(jī)、平板、電腦變身隨身攜帶的掃描儀、文件庫，隨時(shí)隨心編輯文檔等服務(wù)。

傳送門：https://www.camscanner.com

白描，提供高準(zhǔn)確度的文字識別、表格識別轉(zhuǎn)Excel、批量識別、識別后翻譯、文件掃描等功能。

傳送門：https://baimiao.uzero.cn

Office Lens，可以將圖片轉(zhuǎn)換為 PDF、Word 和 PowerPoint 文件，甚至還可將圖片存到 OneNote 或 OneDrive上。

傳送門：https://www.microsoft.com/zh-cn/p/office-lens/9wzdncrfj3t8?activetab=pivot:overviewtab

段時(shí)間沒寫文章了，這段時(shí)間比較忙，很抱歉。

今天的這個(gè)手機(jī)登錄界面，使用了rem作為單位，自定義了字體，使用了模糊背景，半透明登陸框。效果是小編從網(wǎng)上看到的，就動手實(shí)現(xiàn)了下，分享給在座的諸位。小編才疏學(xué)淺，如果有什么不對或許要改進(jìn)的地方，還望各位不吝賜教。

我們先來看下效果圖：

一、準(zhǔn)備工作：

1、目錄簡單介紹下

images 放圖片
fonts 字體、字體圖標(biāo)
css 樣式表文件
base.css 基礎(chǔ)樣式
login.css login界面樣式
image
js javascript文件
flexible.js rem轉(zhuǎn)換px文件
login.js login頁面的其他js
login.html 登錄頁面

2、base.css文件：我們在 base.css 中定義字體、邊距、填充等，這里只指出一些關(guān)鍵點(diǎn)，想要源碼的話可以關(guān)注我們，然后再私信我們，我們會發(fā)給您。

① 通過效果圖，我們可以看到，placeholder提示文字是白色，所以在這里需要更改下：

input::-webkit-input-placeholder{
	color:#fff;
}

② 定義字體，這里只用了ttf，因?yàn)槭謾C(jī)下大部分都是webkit內(nèi)核，webkit內(nèi)核是支持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設(shè)置的字體大小無需我們設(shè)置。

3、flexible.js 文件可以將rem轉(zhuǎn)換成px，自動設(shè)置html的字體大小，這樣rem的值就會被瀏覽器根據(jù)html的字體大小實(shí)時(shí)解析成px，以適應(yīng)不同分辨率的手機(jī)。我們需要做兩步：

① 在頭部引入 flexible.js，讓它一上來就執(zhí)行：

<script type="text/javascript" src="./js/flexible.js"></script>

② 打開 flexible.js，找到最后一行，將兩個(gè)傳參改成設(shè)計(jì)稿的寬度，我這里設(shè)計(jì)稿是720，所以，修改如下：

;(function(designWidth, maxWidth) {
	...
})(720, 720);

那么，在量出設(shè)計(jì)稿的像素值，在css中，除以100，就是rem。

4、新建login.html，放在根目錄，在header頭部加入下面的代碼，讓頁面寬度等于手機(jī)寬度，并且禁止縮放：

<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加入下面的代碼，禁止手機(jī)將頁面中的號碼格式化，否則影響美觀：

<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

6、引入相關(guān)css、js，這里不多說了。

至此，準(zhǔn)備工作完成了，下面開始編寫頁面了。

二、高斯模糊的背景

背景高斯模糊，就不能直接設(shè)置到body上，否則body里面的內(nèi)容都會高斯模糊，所以單獨(dú)寫個(gè)section，來設(shè)置

<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);
}

效果圖如下：

出問題了，高斯模糊導(dǎo)致周邊變淡，玩過PS的都知道這個(gè)問題。我們只需要將背景容器放大點(diǎn)，超出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);
}

效果圖如下：

注：因?yàn)楸尘岸ㄎ涣耍岳锩娴膬?nèi)容都要定位并且z-index都要比它高。

三、整體居中

頁面的內(nèi)容上下居中，無論什么分辨率，內(nèi)容始終在中間：

1、給body掛上 flex flex-middle，這個(gè)是在base里面定義好的flex樣式

<body class="flex flex-middle">

2、既然要垂直居中，body的高度肯定要100%，html也要設(shè)置，否則，body的100%沒作用：

body,html{
	height: 100%;
}
.wrap{
	padding:0 .85rem;
	position: relative;
	z-index: 2;
}

3、這個(gè)wrap就是居中容器，所有的內(nèi)容都放里面：

<section class="wrap"></section>

三、頭部header

header比較簡單，要注意“Welcome”，有陰影，這里不能用盒子陰影box-shadow，而是用文字陰影text-shadow，它比box-shadow少個(gè)參數(shù)，即擴(kuò)展。根據(jù)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>

效果如下

四、主體部分

這個(gè)主要是頭像、輸入框和提交按鈕，都比較簡單，就不多說了。邊框小編設(shè)置的粗細(xì)是0.5px，這里并不代表邊框粗細(xì)就是0.5px。因?yàn)楝F(xiàn)在手機(jī)大部分都是視網(wǎng)膜屏，物理分辨率都是邏輯分辨率的2倍多，這里設(shè)置的0.5px是邏輯分辨率，轉(zhuǎn)換成物理像素大概就是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>

六、版權(quán)

這個(gè)沒什么好說的，居中，定位在底部

.copy{
	position: absolute;
	bottom: .2rem;
	left: 0;
	right: 0;
	z-index: 2;
	font-size: .23rem;
}
<footer class="copy tc mt40">
 ? 2019 IT學(xué)堂
</footer>

最終效果如下

想要源碼的話可以關(guān)注我們，然后再私信我們，我們會發(fā)給您。關(guān)注IT學(xué)堂，有更多干貨哦！

多特效代碼請?zhí)砑親TML5前端交流群581549454

廢話不多說上代碼！

網(wǎng)站前端樣式代碼

<!DOCTYPE html>

<html>

<head>

<title>jQuery手機(jī)微信端手指觸摸圖片放大代碼</title>

/* 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>

<p>Hover</p>

</span>

</span>

<p>Click to activate</p>

</span>

<p>Click to toggle</p>

</span>

</div>

$(document).ready(function(){

$('#ex1').zoom();

$('#ex2').zoom({ on:'grab' });

$('#ex3').zoom({ on:'click' });

$('#ex4').zoom({ on:'toggle' });

});

</script>

</body>

</html>

在線咨詢

上一篇：建議收藏！全國省級公共就業(yè)和人才招聘網(wǎng)站名單來了
下一篇：「HTML」操作表格

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

在線文字圖片識別工具

線工具

APP

一、準(zhǔn)備工作：

二、高斯模糊的背景

三、整體居中

三、頭部header

四、主體部分

網(wǎng)站前端樣式代碼

您的項(xiàng)目需求