超级简单的 AngularJS 应用 —— 实时创建 vCard

来源：互联网发布：unity3d抗锯齿设置编辑：程序博客网时间：2024/06/06 09:35

http://www.oschina.net/translate/super-simple-angularjs-web-app-realtime-vcard-crea?from=20140907

简介

在这个例子中，我引用了包括AngularJS在内的一些JavaScript库，实现了一个很简单的名片生成器。尽管在这个小应用中，AngularJS库相较于其他JavaScript库来说做的事不多，然而，这个小而强大的AngularJS却是该应用的全部灵感之源。

背景

在该应用中，我们需要做些简单工作。首先，我们需要用CSS设计名片。然后，我们需要让用户实时的输入和编辑数据，这个地方AngularJS就不可或缺了。再然后，我们需要将名片的HTML div容器转化为canvas画布，并以PNG图片形式下载即可。就这么简单！

不怕麻烦
翻译于 4天前

0人顶

顶翻译的不错哦!

代码的使用

这里，我来解释下下面的代码块。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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的值。基本上，我们在输入框中输入内容后，双括弧里的值立马就随之改变了。所以对名片的编辑到此结束。我们的目标是，当一个用户点击了下载按钮，当前的名片将被转化为一张图片，并被下载到用户电脑里。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
#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样式。在这地方我们模拟了一个名片的设计，并创建了让用户输入信息的编辑面板。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    $(function() { 
     
    $("#saveBut").click(function() { 
         
        html2canvas($("#card"), {
             
            onrendered: function(canvas) {
                 
                theCanvas = canvas;
 
                Canvas2Image.saveAsPNG(canvas); 
                
            }
        });
    });
}); 
</script>

不怕麻烦
翻译于 4天前

1人顶

顶翻译的不错哦!

最后，在HTML页面的body结束标签之前插入这段script脚本。这段脚本的包含了下载按钮对应的事件响应，也就是说 html2canvas 函数的作用是将id为card的div转化为HTML的canvas画布，并在对canvas画布完成渲染之后，以PNG文件的形式保存该canvas画布。添加完了这个script脚本之后，该做的就做完了。

注意事项

这个canvas2image.js脚本代码里默认没有在生成的文件名称结尾使用扩展名.png。所以如果你无法打开图片的时候，请重命名该文件名，在文件名结尾加上.png这个扩展名即可。

在线调试 jsFiddle

0 0

超级简单的 AngularJS 应用 —— 实时创建 vCard

简介

背景

不怕麻烦翻译于 4天前

代码的使用

不怕麻烦翻译于 4天前

注意事项

在线调试 jsFiddle

不怕麻烦
翻译于 4天前

不怕麻烦
翻译于 4天前