利用JavaScript的AngularJS庫制作電子名片的方法
簡介
在這個(gè)例子中,我引用了包括AngularJS在內(nèi)的一些JavaScript庫,實(shí)現(xiàn)了一個(gè)很簡單的名片生成器。 盡管在這個(gè)小應(yīng)用中,AngularJS庫相較于其他JavaScript庫來說做的事不多,然而,這個(gè)小而強(qiáng)大的AngularJS卻是該應(yīng)用的全部靈感之源。
背景
在該應(yīng)用中,我們需要做些簡單工作。首先,我們需要用CSS設(shè)計(jì)名片。然后,我們需要讓用戶實(shí)時(shí)的輸入和編輯數(shù)據(jù),這個(gè)地方AngularJS就不可或缺了。再然后,我們需要將名片的HTML div容器轉(zhuǎn)化為canvas畫布,并以PNG圖片形式下載即可。就這么簡單!
代碼的使用
這里,我來解釋下下面的代碼塊。
<!DOCTYPE html> <html> <head> <title>vCard Creator demo</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div id="wrapper" ng-app> <h1>Real time vCard Creator</h1> <div id="editor"> <input placeholder="Company name" ng-model="cname"/> <input placeholder="Company tag line" ng-model="tagline"/> <input placeholder="Your full name" ng-model="name"/> <input placeholder="Your designation" ng-model="desig"/> <input placeholder="Phone number" ng-model="phone"/> <input placeholder="Email address" ng-model="email"/> <input placeholder="Website url" ng-model="url"/> <button id="saveBut">Download vCard as PNG</button> </div> <div id="card"> <header> <h4>{{cname}}</h4> <p>{{tagline}}</p> </header> <div id="theBody"> <div id="theLeft"> <h2>{{name}}</h2> <h5>{{desig}}</h5> </div> <div id="theRight"> <p>{{phone}}</p> <p>{{email}}</p> <p>{{url}}</p> </div> </div> </div> </div> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript" src="canvas2image.js"></script> <script type="text/javascript" src="base64.com"></script> </body> </html>
這個(gè)是該應(yīng)用的HTML結(jié)構(gòu)。本結(jié)構(gòu)包括了兩部分。一個(gè)是id為editor的div,一個(gè)是id為card的div。前一個(gè)用于讓用戶輸入信息,后一個(gè)的作用是用來在名片上顯示信息。 這倆div又被一個(gè)id為wrapper的div給包裹起來。這個(gè)id為wrapper的div里面,我們會(huì)添加 ng-app屬性,因?yàn)榫褪窃谶@個(gè)div容器里,我們就要使用angular了。我們可以添加ng-app到HTML的標(biāo)簽里,這樣一來,我們就能在該網(wǎng)頁的任何地方使用angular了。 下一步,我們創(chuàng)建一些輸入框來接收用戶的輸入信息。確保每個(gè)輸入框都有ng-model 這么個(gè)屬性,用于傳遞輸入框里相應(yīng)的值。我們把ng-model屬性放在這里,主要是因?yàn)槲覀兿胍獙?shí)時(shí)的更新id為card的div里的值?,F(xiàn)在,在id為card的div內(nèi)部,確保我們已經(jīng)放置了一些賣相古怪的雙括弧,并且在雙括弧里我們放了來自ng-model的值。 基本上,我們在輸入框中輸入內(nèi)容后,雙括弧里的值立馬就隨之改變了。所以對名片的編輯到此結(jié)束。我們的目標(biāo)是,當(dāng)一個(gè)用戶點(diǎn)擊了下載按鈕,當(dāng)前的名片將被轉(zhuǎn)化為一張圖片,并被下載到用戶電腦里。
#editor{ width:350px; background: silver; margin:0 auto; margin-top:20px; padding-top:10px; padding-bottom:10px; } input{ width:90%; margin-left:5px; } button{ margin-left:5px; } #card{ width:350px; height:200px; background:whitesmoke; box-shadow: 0 0 2px #323232; margin:0 auto; margin-top:20px; } header{ background:#323232; padding:5px; } header h4{ color:white; line-height:0; font-family:helvetica; margin:7px; margin-top:20px; text-shadow: 1px 1px black; text-transform:uppercase; } header p{ line-height:0; color:silver; font-size:10px; margin:11px; margin-bottom:20px; } #theBody{ background:blue; width:100%; height:auto; } #theLeft{ width:50%; float:left; text-align:right; } #theLeft h2{ margin-right:10px; margin-top:40px; font-family:helvetica; margin-bottom:0; color:#323232; } #theLeft h5{ margin-right:10px; font-family:helvetica; margin-top:5px; line-height:0; font-weight: bold; color:#323232; } #theRight{ width:50%; float:right; padding-top:42px; } #theRight p{ line-height:0; font-size:12px; color:#323232; font-family:Calibri; margin-left:15px; }
這是該應(yīng)用的CSS樣式。在這地方我們模擬了一個(gè)名片的設(shè)計(jì),并創(chuàng)建了讓用戶輸入信息的編輯面板。
<script> $(function() { $("#saveBut").click(function() { html2canvas($("#card"), { onrendered: function(canvas) { theCanvas = canvas; Canvas2Image.saveAsPNG(canvas); } }); }); }); </script>
最后,在HTML頁面的body結(jié)束標(biāo)簽之前插入這段script腳本。這段腳本的包含了下載按鈕對應(yīng)的事件響應(yīng),也就是說 html2canvas 函數(shù)的作用是將id為card的div轉(zhuǎn)化為HTML的canvas畫布,并在對canvas畫布完成渲染之后,以PNG文件的形式保存該canvas畫布。添加完了這個(gè)script腳本之后,該做的就做完了。
注意事項(xiàng)
這個(gè)canvas2image.js腳本代碼里默認(rèn)沒有在生成的文件名稱結(jié)尾使用擴(kuò)展名.png。所以如果你無法打開圖片的時(shí)候,請重命名該文件名,在文件名結(jié)尾加上.png這個(gè)擴(kuò)展名即可。
在線調(diào)試 jsFiddle
相關(guān)文章
AngularJS 應(yīng)用身份認(rèn)證的技巧總結(jié)
這篇文章主要介紹了AngularJS 應(yīng)用身份認(rèn)證的技巧總結(jié),具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單(也稱為模型驅(qū)動(dòng)表單),使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序2024-02-02AngularJS使用Filter自定義過濾器控制ng-repeat去除重復(fù)功能示例
這篇文章主要介紹了AngularJS使用Filter自定義過濾器控制ng-repeat去除重復(fù)功能,結(jié)合實(shí)例形式分析了AngularJS自定義過濾器的定義及數(shù)組過濾相關(guān)操作技巧,需要的朋友可以參考下2018-04-04Angular.js自定義指令學(xué)習(xí)筆記實(shí)例
這篇文章主要介紹了Angular.js自定義指令的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09深入解析AngularJS框架中$scope的作用與生命周期
這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對象的相關(guān)用法,需要的朋友可以參考下2016-03-03測試IE瀏覽器對JavaScript的AngularJS的兼容性
這篇文章主要介紹了測試IE瀏覽器對JavaScript的AngularJS的兼容性的方法,盡管隨著Windows10的近期上市,IE瀏覽器即將成為歷史...需要的朋友可以參考下2015-06-06基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解
今天小編就為大家分享一篇基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10詳解Monaco?Editor中的Keybinding機(jī)制
這篇文章主要為大家介紹了詳解Monaco?Editor中的Keybinding機(jī)制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09