Heim >Web-Frontend >js-Tutorial >So erstellen Sie elektronische Visitenkarten mit der AngularJS-Bibliothek_AngularJS von JavaScript

So erstellen Sie elektronische Visitenkarten mit der AngularJS-Bibliothek_AngularJS von JavaScript

WBOYOriginal: 2016-05-16 15:54:151308Durchsuche

2015618111425382.png (527×499)

Einführung

In diesem Beispiel habe ich auf einige JavaScript-Bibliotheken einschließlich AngularJS verwiesen, um einen sehr einfachen Visitenkartengenerator zu implementieren. Obwohl die AngularJS-Bibliothek in dieser kleinen Anwendung im Vergleich zu anderen JavaScript-Bibliotheken nicht viel leistet, ist dieses kleine, aber leistungsstarke AngularJS die gesamte Inspiration für diese Anwendung.
Hintergrund

In dieser Anwendung müssen wir einige einfache Arbeiten ausführen. Zuerst müssen wir die Visitenkarte mit CSS entwerfen. Dann müssen wir Benutzern ermöglichen, Daten in Echtzeit einzugeben und zu bearbeiten, wobei AngularJS unverzichtbar ist. Dann müssen wir den HTML-Div-Container der Visitenkarte in eine Leinwand konvertieren und als PNG-Bild herunterladen. So einfach ist das!

Verwendung von Code

Lassen Sie mich hier den folgenden Codeblock erklären.

<!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>

Dies ist die HTML-Struktur der Anwendung. Diese Struktur besteht aus zwei Teilen. Eines ist das Div mit der ID des Editors und das andere ist das Div mit der ID der Karte. Ersteres wird verwendet, um Benutzern die Eingabe von Informationen zu ermöglichen, und letzteres wird verwendet, um Informationen auf Visitenkarten anzuzeigen. Diese beiden Divs werden von einem Div mit der Wrapper-ID umschlossen. In diesem Div mit der Wrapper-ID werden wir das ng-app-Attribut hinzufügen, da wir in diesem Div-Container Angular verwenden. Wir können ng-app zum HTML-Tag hinzufügen, sodass wir Angular überall auf der Webseite verwenden können. Als nächstes erstellen wir einige Eingabefelder, um Benutzereingaben zu empfangen. Stellen Sie sicher, dass jedes Eingabefeld über ein Attribut wie ng-model verfügt, das zur Übergabe des entsprechenden Werts im Eingabefeld verwendet wird. Wir haben das ng-model-Attribut hier hauptsächlich eingefügt, weil wir den Wert im div in Echtzeit mit der ID der Karte aktualisieren möchten. Stellen Sie nun sicher, dass wir innerhalb des Div mit der ID-Karte einige seltsam aussehende doppelte Klammern platziert haben, und innerhalb der doppelten Klammern haben wir den Wert von ng-model eingefügt. Grundsätzlich ändert sich der Wert in den doppelten Klammern sofort, nachdem wir Inhalte in das Eingabefeld eingegeben haben. Damit endet die Bearbeitung von Visitenkarten hier. Unser Ziel ist es, dass, wenn ein Benutzer auf die Download-Schaltfläche klickt, die aktuelle Visitenkarte in ein Bild umgewandelt und auf den Computer des Benutzers heruntergeladen wird.

#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;
}

Dies ist der CSS-Stil für die App. Hier modellieren wir ein Visitenkartendesign und erstellen ein Bearbeitungsfeld, über das Benutzer Informationen eingeben können.

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

Zum Schluss fügen Sie dieses Skript vor dem Body-Closing-Tag der HTML-Seite ein. Dieses Skript enthält die Ereignisantwort, die der Download-Schaltfläche entspricht. Mit anderen Worten, die Funktion der Funktion html2canvas besteht darin, das Div mit der ID der Karte in einen HTML-Canvas umzuwandeln und ihn nach dem Rendern in Form eines zu speichern PNG-Datei. Nachdem Sie dieses Skript hinzugefügt haben, ist alles, was getan werden muss, erledigt.
Notizen

Dieser Skriptcode „canvas2image.js“ verwendet standardmäßig nicht die Erweiterung .png am Ende des generierten Dateinamens. Wenn Sie das Bild also nicht öffnen können, benennen Sie bitte den Dateinamen um und fügen Sie die Erweiterung .png am Ende des Dateinamens hinzu.
Online-Debugging von jsFiddle

Klicken Sie hier

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Pure js realisiert lokalen Speicher mit unbegrenzten Space_Javascript-KenntnissenNächster Artikel：Pure js realisiert lokalen Speicher mit unbegrenzten Space_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen