时间:2021-06-05 08:57:49 | 栏目: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