Cara membuat kad perniagaan elektronik menggunakan JavaScript AngularJS library

Cara membuat kad perniagaan elektronik menggunakan JavaScript AngularJS library_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:15

asal

1279 orang telah melayarinya

2015618111425382.png (527×499)

Pengenalan

Dalam contoh ini, saya merujuk beberapa perpustakaan JavaScript termasuk AngularJS untuk melaksanakan penjana kad perniagaan yang sangat mudah. Walaupun perpustakaan AngularJS tidak berbuat banyak dalam aplikasi kecil ini berbanding perpustakaan JavaScript lain, AngularJS yang kecil tetapi berkuasa ini adalah inspirasi keseluruhan untuk aplikasi ini.
Latar belakang

Dalam aplikasi ini, kita perlu melakukan beberapa kerja mudah. Pertama, kita perlu mereka bentuk kad perniagaan menggunakan CSS. Kemudian, kami perlu membenarkan pengguna memasukkan dan mengedit data dalam masa nyata, di mana AngularJS amat diperlukan. Kemudian, kita perlu menukar bekas div HTML kad perniagaan kepada kanvas dan memuat turunnya sebagai imej PNG. Semudah itu!

Penggunaan kod

Di sini, izinkan saya menerangkan blok kod berikut.

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

Salin selepas log masuk

Ini ialah struktur HTML aplikasi. Struktur ini terdiri daripada dua bahagian. Satu ialah div dengan id editor, dan satu lagi ialah div dengan id kad. Yang pertama digunakan untuk membolehkan pengguna memasukkan maklumat, dan yang terakhir digunakan untuk memaparkan maklumat pada kad perniagaan. Kedua-dua div ini dibalut oleh div dengan ID pembalut. Dalam div ini dengan ID pembalut, kami akan menambah atribut ng-app, kerana dalam bekas div ini kami akan menggunakan sudut. Kita boleh menambah ng-app pada teg HTML, supaya kita boleh menggunakan sudut di mana-mana sahaja pada halaman web. Seterusnya, kami mencipta beberapa kotak input untuk menerima input pengguna. Pastikan setiap kotak input mempunyai atribut seperti model ng, yang digunakan untuk menghantar nilai yang sepadan dalam kotak input. Kami meletakkan atribut ng-model di sini terutamanya kerana kami ingin mengemas kini nilai dalam div dengan id kad dalam masa nyata. Sekarang, di dalam div dengan kad id, pastikan kami telah meletakkan beberapa kurungan berganda yang kelihatan pelik, dan di dalam kurungan berganda kami telah meletakkan nilai dari model ng. Pada asasnya, selepas kami memasukkan kandungan dalam kotak input, nilai dalam kurungan berganda berubah serta-merta. Jadi penyuntingan kad perniagaan berakhir di sini. Matlamat kami ialah apabila pengguna mengklik butang muat turun, kad perniagaan semasa akan ditukar kepada imej dan dimuat turun ke komputer pengguna.

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

Salin selepas log masuk

Ini ialah gaya CSS untuk apl. Di sini kami membuat reka bentuk kad perniagaan dan mencipta panel penyuntingan yang membolehkan pengguna memasukkan maklumat.

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

Salin selepas log masuk

Akhir sekali, masukkan skrip ini sebelum teg penutup badan halaman HTML. Skrip ini mengandungi respons acara yang sepadan dengan butang muat turun Dalam erti kata lain, fungsi fungsi html2canvas adalah untuk menukar div dengan id kad ke dalam kanvas HTML, dan selepas memaparkan kanvas, simpannya dalam bentuk fail PNG. Selepas menambah skrip ini, semua yang perlu dilakukan selesai.
Nota

Kod skrip canvas2image.js ini tidak menggunakan sambungan .png pada penghujung nama fail yang dijana secara lalai. Jadi jika anda tidak boleh membuka imej, sila namakan semula nama fail dan tambah sambungan .png pada hujung nama fail.
Penyahpepijatan dalam talian jsFiddle

Klik di sini