简介

在这个例子中，我引用了一些JavaScript库，包括AngularJS，并实现了一个非常简单的名片生成器。虽然在这个小应用程序中，AngularJS库与其他JavaScript库相比做得不多，但这个小而强大的AngularJS是这个应用程序的全部灵感。背景

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

代码的使用

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

！DOCTYPE html html head title vCard Creator演示/title link rel='样式表' type=' text/CSS ' href=' main . CSS '/head body div id=' wrapper ' ng-app h1 real time vCard Creator/h1 div id=' editor '输入占位符=' Company name ' ng-model=' cname '/输入占位符=' Company tag line ' ng-model=' tagline '/输入占位符='Your全名' ng-model='name'/输入占位符=' Your desig '指定' ng-model='desig script script type=' text/JavaScript ' src=' http : jquery . min . js '/script script type=' text/JavaScript ' src=' http : html 2 canvas . js '/script script type=' text/JavaScript ' src=' http : canvas 2 image . js '/script script type=' text/JavaScript ' src=' http 3360 base64.com '/script/body 这个结构包括两部分。编辑id为的div和卡片id为的div。前者用于让用户输入信息，后者用于在名片上显示信息。这两个div由一个带有id包装的div包装。在这个带有id包装的div中，我们将添加ng-app属性，因为我们将在这个div容器中使用angular。我们可以在HTML标签中添加ng-app，这样我们就可以在这个页面的任何地方使用angular。接下来，我们创建一些输入框来接收用户输入信息。确保每个输入框都有属性ng-model，用于在输入框中传递相应的值。我们把ng-model属性放在这里，主要是想用身份证实时更新div中的值。现在，在带有身份证的div中，确保我们放了一些看起来奇怪的双括号，并且我们将ng-model的值放在双括号中。基本上，我们在输入框中输入内容后，双括号中的值会立即改变。所以这就是编辑名片的结局。我们的目标是当用户点击下载按钮时，当前的名片将被转换成图片并下载到用户的计算机上。

#编辑器{ width:350px背景：银；margin :0 auto margin-top :20 px；填充-top :10 px；填充-底部：10像素；}输入{宽度：90%；边距-左侧：5 px}按钮{左边距：5 px} #卡{宽度：350像素高度：200 px背景技术白烟；盒影： 0 2px # 323232margin :0 auto margin-top :20 px；}标题{ background : # 323232 padding :5 px }标题h4 {颜色：白色线高：0;font-family : Helvetica；margin :7 pxmargin-top :20 px；text-shadow: 1px 1px黑色；文本转换：大写；}表头p {行高：0；color : silverfont-size :10 px；margin:11px边距-底部：20 px} #车身{背景：蓝色宽度：100%;高度：auto} #左侧{宽度：50%；float : left text-右对齐：} #左H2 {边距-右：10 px页边距-顶部：40像素；font-family : Helvetica；保证金-底部：0;color : # 323232 } # THleft H5 { margin-right :10 px；font-family : Helvetica；页边距-顶部：5 px线高：0;字体粗细：粗体；color: # 323232} #右侧{宽度：50%;右浮动：填充-top :42 px；} # ThEright p {行高：0；font-size :12 pxcolor : # 323232 font-family : calibri；边距-左侧：15像素；}这是该应用的半铸钢钢性铸铁(铸造半钢)样式。在这地方我们模拟了一个名片的设计，并创建了让用户输入信息的编辑面板。

script $(function() { $('#saveBut ')).单击(function(){ html 2 canvas($(' # card ')，{ onrendered : function(canvas){ theCanvas=canvas；画布2图像。SaveAspeng(画布);} });});});/script

最后，在超文本标记语言页面的身体结束标签之前插入这段脚本脚本。这段脚本的包含了下载按钮对应的事件响应，也就是说html2canvas函数的作用是将编号为卡片的差异转化为超文本标记语言的帆布画布，并在对帆布画布完成渲染之后，以巴布亚新几内亚文件的形式保存该帆布画布。添加完了这个脚本脚本之后，该做的就做完了。注意事项

这个canvas2image.js脚本代码里默认没有在生成的文件名称结尾使用扩展名。巴布亚新几内亚。所以如果你无法打开图片的时候，请重命名该文件名，在文件名结尾加上。巴布亚新几内亚这个扩展名即可。在线调试射流研究…提琴

点击这里