欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2015年06月18日 11:16:38   投稿:goldensun  
這篇文章主要介紹了利用JavaScript的AngularJS庫制作電子名片的方法,其中需要使用到HTML5的canvas畫布,需要的朋友可以參考下

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>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了。 下一步,我們創(chuàng)建一些輸入框來接收用戶的輸入信息。確保每個輸入框都有ng-model 這么個屬性,用于傳遞輸入框里相應的值。我們把ng-model屬性放在這里,主要是因為我們想要實時的更新id為card的div里的值?,F在,在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樣式。在這地方我們模擬了一個名片的設計,并創(chuàng)建了讓用戶輸入信息的編輯面板。

 

<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

    點擊這里

相關文章

  • AngularJS 應用身份認證的技巧總結

    AngularJS 應用身份認證的技巧總結

    這篇文章主要介紹了AngularJS 應用身份認證的技巧總結,具有一定的參考價值,有需要的可以了解一下。
    2016-11-11
  • Angular中使用響應式表單的詳細步驟

    Angular中使用響應式表單的詳細步驟

    Angular提供了兩種處理表單的方式模板驅動表單和響應式表單(也稱為模型驅動表單),使用模板驅動表單時,模板指令被用來構建表單的內部表示,在本文中,您探討了如何將響應式表單應用于一個示例 Angular 應用程序
    2024-02-02
  • AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例

    AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例

    這篇文章主要介紹了AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能,結合實例形式分析了AngularJS自定義過濾器的定義及數組過濾相關操作技巧,需要的朋友可以參考下
    2018-04-04
  • angularjs請求數據的方法示例

    angularjs請求數據的方法示例

    這篇文章主要給大家介紹了關于angularjs請求數據的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用angularjs具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-08-08
  • Angular.js自定義指令學習筆記實例

    Angular.js自定義指令學習筆記實例

    這篇文章主要介紹了Angular.js自定義指令的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • angular 數據綁定之[]和{{}}的區(qū)別

    angular 數據綁定之[]和{{}}的區(qū)別

    這篇文章主要介紹了angular 數據綁定之[]和{{}}的區(qū)別,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 深入解析AngularJS框架中$scope的作用與生命周期

    深入解析AngularJS框架中$scope的作用與生命周期

    這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對象的相關用法,需要的朋友可以參考下
    2016-03-03
  • 測試IE瀏覽器對JavaScript的AngularJS的兼容性

    測試IE瀏覽器對JavaScript的AngularJS的兼容性

    這篇文章主要介紹了測試IE瀏覽器對JavaScript的AngularJS的兼容性的方法,盡管隨著Windows10的近期上市,IE瀏覽器即將成為歷史...需要的朋友可以參考下
    2015-06-06
  • 基于Angular中ng-controller父子級嵌套的相關屬性詳解

    基于Angular中ng-controller父子級嵌套的相關屬性詳解

    今天小編就為大家分享一篇基于Angular中ng-controller父子級嵌套的相關屬性詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • 詳解Monaco?Editor中的Keybinding機制

    詳解Monaco?Editor中的Keybinding機制

    這篇文章主要為大家介紹了詳解Monaco?Editor中的Keybinding機制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09

最新評論