JavaScript の AngularJS ライブラリを使用して電子名刺を作成する方法

JavaScript の AngularJS ライブラリを使用して電子名刺を作成する方法_AngularJS

WBOY

リリース： 2016-05-16 15:54:15

オリジナル

1317 人が閲覧しました

2015618111425382.png (527×499)

はじめに

この例では、AngularJS を含むいくつかの JavaScript ライブラリを参照して、非常に単純な名刺ジェネレーターを実装しました。 AngularJS ライブラリは、他の JavaScript ライブラリと比較して、この小さなアプリケーションではあまり機能しませんが、この小さいながらも強力な AngularJS がこのアプリケーションのインスピレーション全体です。
背景

このアプリケーションでは、いくつかの簡単な作業を行う必要があります。まず、CSSを使用して名刺をデザインする必要があります。次に、ユーザーがリアルタイムでデータを入力および編集できるようにする必要がありますが、そこでは AngularJS が不可欠です。次に、名刺の HTML div コンテナをキャンバスに変換し、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 構造です。この構造は 2 つの部分から構成されます。 1 つはエディターの ID を持つ div で、もう 1 つはカードの ID を持つ div です。前者はユーザーが情報を入力するために使用され、後者は名刺に情報を表示するために使用されます。これら 2 つの div は、wrapper の ID を持つ div によってラップされます。ラッパーの ID を持つこの div に ng-app 属性を追加します。これは、angular を使用するのはこの div コンテナーにあるためです。 HTML タグに ng-app を追加すると、Web ページ上のどこでも angular を使用できるようになります。次に、ユーザー入力を受け取るための入力ボックスをいくつか作成します。各入力ボックスに ng-model のような属性があることを確認してください。この属性は、入力ボックスに対応する値を渡すために使用されます。ここに ng-model 属性を配置するのは、主にカードの ID を使用して div の値をリアルタイムで更新するためです。ここで、ID カードを含む 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 ページの本文終了タグの前に挿入します。このスクリプトには、ダウンロードボタンに対応するイベントレスポンスが含まれています。つまり、html2canvas 関数の機能は、カードの ID を持つ div を HTML キャンバスに変換し、キャンバスをレンダリングした後、.html 形式で保存することです。 PNG ファイル。キャンバス。このスクリプトを追加したら、必要な作業はすべて完了です。
メモ

この Canvas2image.js スクリプトコードでは、デフォルトでは、生成されたファイル名の末尾に拡張子 .png が使用されません。したがって、画像を開けない場合は、ファイル名を変更し、ファイル名の末尾に .png 拡張子を追加してください。
オンラインデバッグ jsFiddle

ここをクリックしてください