利用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 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
Vue中key的作用示例代码详解
Jun 10 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
我的论坛源代码(四)
2006/10/09 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP的自定义模板引擎
2017/03/24 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
详解Python import方法引入模块的实例
2017/08/02 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
药学职务聘任书
2014/03/29 职场文书
小区文明倡议书
2014/05/16 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript