Présentation
Dans cet exemple, j'ai référencé quelques bibliothèques JavaScript dont AngularJS pour implémenter un générateur de cartes de visite très simple. Bien que la bibliothèque AngularJS ne fasse pas grand-chose dans cette petite application par rapport à d'autres bibliothèques JavaScript, ce petit mais puissant AngularJS est toute l'inspiration de cette application.
Contexte
Dans cette application, nous devons effectuer un travail simple. Tout d’abord, nous devons concevoir la carte de visite en utilisant CSS. Ensuite, nous devons permettre aux utilisateurs de saisir et de modifier des données en temps réel, là où AngularJS est indispensable. Ensuite, nous devons convertir le conteneur HTML div de la carte de visite en canevas et le télécharger sous forme d'image PNG. C'est aussi simple que ça !
Utilisation du code
Ici, laissez-moi vous expliquer le bloc de code suivant.
<!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>
Voici la structure HTML de l'application. Cette structure se compose de deux parties. L’un est le div avec l’identifiant de l’éditeur et l’autre est le div avec l’identifiant de la carte. Le premier est utilisé pour permettre aux utilisateurs de saisir des informations et le second est utilisé pour afficher des informations sur les cartes de visite. Ces deux div sont enveloppés par un div avec l'ID du wrapper. Dans ce div avec l'ID du wrapper, nous ajouterons l'attribut ng-app, car c'est dans ce conteneur div que nous utiliserons angulaire. Nous pouvons ajouter ng-app à la balise HTML, afin de pouvoir utiliser angulaire n'importe où sur la page Web. Ensuite, nous créons des zones de saisie pour recevoir les entrées de l'utilisateur. Assurez-vous que chaque zone de saisie possède un attribut tel que ng-model, qui est utilisé pour transmettre la valeur correspondante dans la zone de saisie. Nous mettons ici l'attribut ng-model principalement parce que nous voulons mettre à jour la valeur dans le div avec l'identifiant de la carte en temps réel. Maintenant, à l'intérieur du div avec la carte d'identité, assurez-vous que nous avons placé des doubles crochets étranges, et à l'intérieur des doubles crochets, nous avons mis la valeur de ng-model. Fondamentalement, une fois que nous avons saisi du contenu dans la zone de saisie, la valeur entre doubles parenthèses change immédiatement. L'édition des cartes de visite se termine donc ici. Notre objectif est que lorsqu'un utilisateur clique sur le bouton de téléchargement, la carte de visite actuelle soit convertie en image et téléchargée sur l'ordinateur de l'utilisateur.
#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;
}
Il s'agit du style CSS de l'application. Ici, nous simulons un design de carte de visite et créons un panneau d'édition qui permet aux utilisateurs de saisir des informations.
<script>
$(function() {
$("#saveBut").click(function() {
html2canvas($("#card"), {
onrendered: function(canvas) {
theCanvas = canvas;
Canvas2Image.saveAsPNG(canvas);
}
});
});
});
</script>
Enfin, insérez ce script avant la balise de fermeture body de la page HTML. Ce script contient la réponse à l'événement correspondant au bouton de téléchargement. En d'autres termes, la fonction html2canvas est de convertir le div avec l'identifiant de la carte en un canevas HTML, et après avoir rendu le canevas, de l'enregistrer sous la forme d'un canevas. Fichier PNG toile de toile. Après avoir ajouté ce script, tout ce qui reste à faire est terminé.
Remarques
Ce code de script canvas2image.js n'utilise pas l'extension .png à la fin du nom de fichier généré par défaut. Donc, si vous ne parvenez pas à ouvrir l'image, veuillez renommer le nom du fichier et ajouter l'extension .png à la fin du nom du fichier.
Débogage en ligne jsFiddle
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
