利用JavaScript的AngularJS庫製作電子名片的方法

首頁

web前端

js教程

利用JavaScript的AngularJS庫製作電子名片的方法_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:54 PM

javascript名片

2015618111425382.png (527×499)

簡介

在這個例子中，我引用了包括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 id="Real-time-vCard-Creator">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 id="cname">{{cname}}</h4>
    <p>{{tagline}}</p>
  </header>
  <div id="theBody">
    <div id="theLeft">
      <h2 id="name">{{name}}</h2>
      <h5 id="desig">{{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

點這裡

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。