簡介
在這個例子中，我引用了包括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
