利用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
相关文章
ionic4+angular7+cordova上传图片功能的实例代码
ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
本文主要介绍AngularJs 指令的知识，这里整理了详细的资料和简单示例代码帮助大家学习理解应用，有兴趣的小伙伴可以参考下2016-09-09
详解为Angular.js内置$http服务添加拦截器的方法
所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器，每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。2016-12-12
Angular中$cacheFactory的作用和用法实例详解
$cacheFactory是一个为Angular服务生产缓存对象的服务。接下来通过本文给大家介绍Angular中$cacheFactory的作用和用法实例详解，非常不错，感兴趣的朋友一起看下吧2016-08-08
这篇文章主要介绍了Angular4编程之表单响应功能,结合实例形式分析了Angular4表单响应功能的具体实现步骤与相关操作技巧,需要的朋友可以参考下2017-12-12
今天小编就为大家分享一篇AngularJS修改model值时,显示内容不变的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
AngularJS实现数据列表的增加、删除和上移下移等功能实例
这篇文章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能，对大家学习AngularJS具有一定的参考借鉴价值，有需要的朋友可以看看。2016-09-09
本篇文章主要介绍了Angular2使用vscode断点调试ts文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本篇文章主要介绍了Angular2自定义分页组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了使用AngularJs打造权限管理系统【简易型】的相关资料,需要的朋友可以参考下2016-05-05
最新评论