快捷導(dǎo)航

利用JavaScript的AngularJS庫(kù)制作電子名片的方法

更新時(shí)間：2015年06月18日 11:16:38 投稿：goldensun

這篇文章主要介紹了利用JavaScript的AngularJS庫(kù)制作電子名片的方法,其中需要使用到HTML5的canvas畫(huà)布,需要的朋友可以參考下

2015618111425382.png (527×499)

簡(jiǎn)介

在這個(gè)例子中，我引用了包括AngularJS在內(nèi)的一些JavaScript庫(kù)，實(shí)現(xiàn)了一個(gè)很簡(jiǎn)單的名片生成器。盡管在這個(gè)小應(yīng)用中，AngularJS庫(kù)相較于其他JavaScript庫(kù)來(lái)說(shuō)做的事不多，然而，這個(gè)小而強(qiáng)大的AngularJS卻是該應(yīng)用的全部靈感之源。
背景

在該應(yīng)用中，我們需要做些簡(jiǎn)單工作。首先，我們需要用CSS設(shè)計(jì)名片。然后，我們需要讓用戶(hù)實(shí)時(shí)的輸入和編輯數(shù)據(jù)，這個(gè)地方AngularJS就不可或缺了。再然后，我們需要將名片的HTML div容器轉(zhuǎn)化為canvas畫(huà)布，并以PNG圖片形式下載即可。就這么簡(jiǎn)單！

代碼的使用

這里，我來(lái)解釋下下面的代碼塊。

<!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è)用于讓用戶(hù)輸入信息，后一個(gè)的作用是用來(lái)在名片上顯示信息。這倆div又被一個(gè)id為wrapper的div給包裹起來(lái)。這個(gè)id為wrapper的div里面，我們會(huì)添加 ng-app屬性，因?yàn)榫褪窃谶@個(gè)div容器里，我們就要使用angular了。我們可以添加ng-app到HTML的標(biāo)簽里，這樣一來(lái)，我們就能在該網(wǎng)頁(yè)的任何地方使用angular了。下一步，我們創(chuàng)建一些輸入框來(lái)接收用戶(hù)的輸入信息。確保每個(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)放置了一些賣(mài)相古怪的雙括弧，并且在雙括弧里我們放了來(lái)自ng-model的值。基本上，我們?cè)谳斎肟蛑休斎雰?nèi)容后，雙括弧里的值立馬就隨之改變了。所以對(duì)名片的編輯到此結(jié)束。我們的目標(biāo)是，當(dāng)一個(gè)用戶(hù)點(diǎn)擊了下載按鈕，當(dāng)前的名片將被轉(zhuǎn)化為一張圖片，并被下載到用戶(hù)電腦里。

#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)建了讓用戶(hù)輸入信息的編輯面板。

<script>
  $(function() { 
   
  $("#saveBut").click(function() { 
     
    html2canvas($("#card"), {
       
      onrendered: function(canvas) {
         
        theCanvas = canvas;
 
        Canvas2Image.saveAsPNG(canvas); 
        
      }
    });
  });
}); 
</script>

最后，在HTML頁(yè)面的body結(jié)束標(biāo)簽之前插入這段script腳本。這段腳本的包含了下載按鈕對(duì)應(yīng)的事件響應(yīng)，也就是說(shuō) html2canvas 函數(shù)的作用是將id為card的div轉(zhuǎn)化為HTML的canvas畫(huà)布，并在對(duì)canvas畫(huà)布完成渲染之后，以PNG文件的形式保存該canvas畫(huà)布。添加完了這個(gè)script腳本之后，該做的就做完了。
注意事項(xiàng)

這個(gè)canvas2image.js腳本代碼里默認(rèn)沒(méi)有在生成的文件名稱(chēng)結(jié)尾使用擴(kuò)展名.png。所以如果你無(wú)法打開(kāi)圖片的時(shí)候，請(qǐng)重命名該文件名，在文件名結(jié)尾加上.png這個(gè)擴(kuò)展名即可。
在線(xiàn)調(diào)試 jsFiddle

點(diǎn)擊這里

您可能感興趣的文章: