杰晶网络

利用JavaScript的AngularJS库制作电子名片的方法
网络编程 2024/11/17 佚名
3 2

利用JavaScript的AngularJS库制作电子名片的方法

简介

在这个例子中，我引用了包括AngularJS在内的一些JavaScript库，实现了一个很简单的名片生成器。 尽管在这个小应用中，AngularJS库相较于其他JavaScript库来说做的事不多，然而，这个小而强大的AngularJS却是该应用的全部灵感之源。
背景

在该应用中，我们需要做些简单工作。首先，我们需要用CSS设计名片。然后，我们需要让用户实时的输入和编辑数据，这个地方AngularJS就不可或缺了。再然后，我们需要将名片的HTML div容器转化为canvas画布，并以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="/UploadFiles/2021-04-02/angular.min.js">


这个是该应用的HTML结构。本结构包括了两部分。一个是id为editor的div，一个是id为card的div。前一个用于让用户输入信息，后一个的作用是用来在名片上显示信息。 这俩div又被一个id为wrapper的div给包裹起来。这个id为wrapper的div里面，我们会添加 ng-app属性，因为就是在这个div容器里，我们就要使用angular了。我们可以添加ng-app到HTML的标签里，这样一来，我们就能在该网页的任何地方使用angular了。 下一步，我们创建一些输入框来接收用户的输入信息。确保每个输入框都有ng-model 这么个属性，用于传递输入框里相应的值。我们把ng-model属性放在这里，主要是因为我们想要实时的更新id为card的div里的值。现在，在id为card的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页面的body结束标签之前插入这段script脚本。这段脚本的包含了下载按钮对应的事件响应，也就是说 html2canvas 函数的作用是将id为card的div转化为HTML的canvas画布，并在对canvas画布完成渲染之后，以PNG文件的形式保存该canvas画布。添加完了这个script脚本之后，该做的就做完了。

注意事项


这个canvas2image.js脚本代码里默认没有在生成的文件名称结尾使用扩展名.png。所以如果你无法打开图片的时候，请重命名该文件名，在文件名结尾加上.png这个扩展名即可。

在线调试 jsFiddle


    点击这里
标签：
JavaScript,名片
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网