超级简单的 AngularJS 应用(2)

#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

希望你喜欢,并分享我的工作~带你走近AngularJS系列

带你走近AngularJS - 基本功能介绍

带你走近AngularJS - 体验指令实例

带你走近AngularJS - 创建自定义指令

如何在 AngularJS 中对控制器进行单元测试

在 AngularJS 应用中通过 JSON 文件来设置状态

AngularJS 之 Factory vs Service vs Provider

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据

AngularJS 的详细介绍请点这里
AngularJS 的下载地址请点这里

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7fbc799937a6a72ed55b2d439d93b77f.html