首頁 > 開發者 > JavaScript
利用JavaScript的AngularJS庫製作電子名片的方法，angularjs方法
簡介
在這個例子中，我引用了包括AngularJS在內的一些JavaScript庫，實現了一個很簡單的名片產生器。 儘管在這個小應用中，AngularJS庫相較於其他JavaScript庫來說做的事不多，然而，這個小而強大的AngularJS卻是該應用的全部靈感之源。
背景
在該應用中，我們需要做些簡單工作。首先，我們需要用CSS設計名片。然後，我們需要讓使用者即時的輸入和編輯資料，這個地方AngularJS就不可或缺了。再然後，我們需要將名片的HTML div容器轉化為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>
這個是該應用的HTML結構。本結構包括了兩部分。一個是id為editor的div，一個是id為card的div。前一個用於讓使用者輸入資訊，後一個的作用是用來在名片上顯示資訊。 這倆div又被一個id為wrapper的div給包裹起來。這個id為wrapper的div裡面，我們會添加 ng-app屬性，因為就是在這個div容器裡，我們就要使用angular了。我們可以添加ng-app到HTML的標籤裡，這樣一來，我們就能在該網頁的任何地方使用angular了。 下一步，我們建立一些輸入框來接收使用者的輸入資訊。確保每個輸入框都有ng-model 這麼個屬性，用於傳遞輸入框裡相應的值。我們把ng-model屬性放在這裡，主要是因為我們想要即時的更新id為card的div裡的值。現在，在id為card的div內部，確保我們已經放置了一些賣相古怪的雙括弧，並且在雙括弧裡我們放了來自ng-model的值。 基本上，我們在輸入框中輸入內容後，雙括弧裡的值立馬就隨之改變了。所以對名片的編輯到此結束。我們的目標是，當一個使用者點擊了下載按鈕，當前的名片將被轉化為一張圖片，並被下載到使用者電腦裡。
#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;}
這是該應用的CSS樣式。在這地方我們類比了一個名片的設計，並建立了讓使用者輸入資訊的編輯面板。
<script> $(function() { $("#saveBut").click(function() { html2canvas($("#card"), { onrendered: function(canvas) { theCanvas = canvas; Canvas2Image.saveAsPNG(canvas); } }); });}); </script>
最後，在HTML頁面的body結束標籤之前插入這段script指令碼。這段指令碼的包含了下載按鈕對應的事件響應，也就是說 html2canvas 函數的作用是將id為card的div轉化為HTML的canvas畫布，並在對canvas畫布完成渲染之後，以PNG檔案的形式儲存該canvas畫布。添加完了這個script指令碼之後，該做的就做完了。
注意事項
這個canvas2image.js指令碼代碼裡預設沒有在產生的檔案名稱結尾使用副檔名.png。所以如果你無法開啟圖片的時候，請重新命名該檔案名稱，在檔案名稱結尾加上.png這個副檔名即可。
線上調試 jsFiddle
點擊這裡
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
