利用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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
Angular实现表单验证功能
Nov 13 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
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 Document 代码注释规范
2009/04/13 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
详解Python中的相对导入和绝对导入
2017/01/06 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
实习心得体会
2014/01/02 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
政风行风评议工作总结
2014/10/21 职场文书
80后婚前协议书范本
2014/10/24 职场文书
Python List remove()实例用法详解
2021/08/02 Python