Home >Web Front-end >JS Tutorial >How to create electronic business cards using JavaScript's AngularJS library_AngularJS

How to create electronic business cards using JavaScript's AngularJS library_AngularJS

WBOYOriginal: 2016-05-16 15:54:151310browse

2015618111425382.png (527×499)

Introduction

In this example, I referenced some JavaScript libraries including AngularJS to implement a very simple business card generator. Although the AngularJS library does not do much in this small application compared to other JavaScript libraries, this small but powerful AngularJS is the entire inspiration for this application.
Background

In this application, we need to do some simple work. First, we need to design the business card using CSS. Then, we need to allow users to input and edit data in real time, where AngularJS is indispensable. Then, we need to convert the HTML div container of the business card into a canvas and download it as a PNG image. It's that simple!

Use of code

Here, let me explain the following code block.

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

This is the HTML structure of the application. This structure consists of two parts. One is the div with the id of editor, and the other is the div with the id of card. The former is used to allow users to enter information, and the latter is used to display information on business cards. These two divs are wrapped by a div with the ID of wrapper. In this div with the ID of wrapper, we will add the ng-app attribute, because it is in this div container that we will use angular. We can add ng-app to the HTML tag, so that we can use angular anywhere on the web page. Next, we create some input boxes to receive user input. Make sure that each input box has an attribute like ng-model, which is used to pass the corresponding value in the input box. We put the ng-model attribute here mainly because we want to update the value in the div with the id of card in real time. Now, inside the div with the id card, make sure we've placed some weird-looking double brackets, and inside the double brackets we've put the value from ng-model. Basically, after we enter content in the input box, the value in the double brackets changes immediately. So the editing of business cards ends here. Our goal is that when a user clicks the download button, the current business card will be converted into an image and downloaded to the user's computer.

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

This is the CSS style for the app. Here we mock up a business card design and create an editing panel that allows users to enter information.

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

Finally, insert this script before the body closing tag of the HTML page. This script contains the event response corresponding to the download button. In other words, the function of the html2canvas function is to convert the div with the id of card into an HTML canvas, and after rendering the canvas, save it in the form of a PNG file. canvas canvas. After adding this script, all that needs to be done is done.
Notes

This canvas2image.js script code does not use the extension .png at the end of the generated file name by default. So if you cannot open the image, please rename the file name and add the .png extension to the end of the file name.
Online debugging jsFiddle

Click here

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Pure js realizes local storage with unlimited space_javascript skillsNext article：Pure js realizes local storage with unlimited space_javascript skills

See more

How to create electronic business cards using JavaScript's AngularJS library_AngularJS

Related articles