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


Posted in Javascript onJune 18, 2015

利用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="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>

这个是该应用的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 相关文章推荐
JS中style属性
Oct 11 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
angular.element方法汇总
Jan 07 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
javascript实现根据时间段显示问候语的方法
Jun 18 #Javascript
javascript显示中文日期的方法
Jun 18 #Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 #Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 #Javascript
初步认识JavaScript函数库jQuery
Jun 18 #Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 #Javascript
浅谈Jquery核心函数
Jun 18 #Javascript
You might like
php include,include_once,require,require_once
2008/09/05 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
js 动态选中下拉框
2009/11/26 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python实现二分法算法实例
2015/02/02 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python 数据结构之队列的实现
2017/01/22 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python安装pil库方法及代码
2019/06/25 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
介绍一下如何优化MySql
2016/12/20 面试题
小班下学期评语
2014/05/04 职场文书
蓬莱阁导游词
2015/02/04 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS