手机电子名片html,利用JavaScript的AngularJS库制作电子名片的方法
简介
在这个例子中,我引用了包括AngularJS在内的一些JavaScript库,实现了一个很简单的名片生成器。 尽管在这个小应用中,AngularJS库相较于其他JavaScript库来说做的事不多,然而,这个小而强大的AngularJS却是该应用的全部灵感之源。
背景
在该应用中,我们需要做些简单工作。首先,我们需要用CSS设计名片。然后,我们需要让用户实时的输入和编辑数据,这个地方AngularJS就不可或缺了。再然后,我们需要将名片的HTML div容器转化为canvas画布,并以PNG图片形式下载即可。就这么简单!
代码的使用
这里,我来解释下下面的代码块。
vCard Creator demo
Real time vCard Creator
Download vCard as PNG
{{cname}}
{{tagline}}
{{name}}
{{desig}}
{{phone}}
{{email}}
{{url}}
这个是该应用的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样式。在这地方我们模拟了一个名片的设计,并创建了让用户输入信息的编辑面板。
$(function() {
$("#saveBut").click(function() {
html2canvas($("#card"), {
onrendered: function(canvas) {
theCanvas = canvas;
Canvas2Image.saveAsPNG(canvas);
}
});
});
});
最后,在HTML页面的body结束标签之前插入这段script脚本。这段脚本的包含了下载按钮对应的事件响应,也就是说 html2canvas 函数的作用是将id为card的div转化为HTML的canvas画布,并在对canvas画布完成渲染之后,以PNG文件的形式保存该canvas画布。添加完了这个script脚本之后,该做的就做完了。
注意事项
这个canvas2image.js脚本代码里默认没有在生成的文件名称结尾使用扩展名.png。所以如果你无法打开图片的时候,请重命名该文件名,在文件名结尾加上.png这个扩展名即可。
在线调试 jsFiddle
手机电子名片html,利用JavaScript的AngularJS库制作电子名片的方法相关推荐
- 利用JavaScript中的原型给对像添加方法
<!-- 使用原型给String对象添加两个方法 1)toCharArray(): 返回当前字符串的字符数组 2)reverse():返回反转后的字符串 原始:hellow ...
- JavaScript实现弹出“确定/取消”对话框的方法
在网页中经常会让用户提交一些事件,然后在事件处理之前会弹出"确定/取消"对话框,待用户确定后再利用程序处理事件,今天就教大家如何利用JavaScript实现弹出"确定/取 ...
- 谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法 rem是css3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素字体大小就可以成比例地调整所有字体大小.我 ...
- 用计算机浏览电子图片,电脑制作电子图片库手机上放有什么软件
可以通过数码大师制作成音乐相册然后在手机播放的.当然,可以生成MP4等手机支持播放的格式的. 使用数码大师制作电子音乐相册: 1.导入制作电子相册的照片.首先,在顶部切换到"视频相册&quo ...
- 这是如何更好地利用JavaScript数组的方法
by pacdiv 由pacdiv 这是如何更好地利用JavaScript数组的方法 (Here's how you can make better use of JavaScript arrays) ...
- 一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
- linux下运行js挖矿,利用 JavaScript 代码挖矿
我们都知道,现在的比特币特别的火,但是错过了最好时代的我们,已经玩不起那个动不动就几万的矿机以及还需要翻山越岭迁移到深山发电站的决心.何况,目前比特币已经不再是如同神话一般的不断开创历史新高,该来的矿 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- 利用JavaScript在ASP.NET中动态生成系统菜单
用户在登陆一个系统后通常会因为权限的不同而使用不同的系统功能,我们在实现用户使用的菜单项时有两种选择,一是列出全部系统菜单项,根据用户的权限禁用一部分菜单,二是根据权限动态加载菜单,这样只要列出的 ...
- 利用JavaScript选择GridView行
当我们想在GridView中添加删除.选择功能时,我们通常的做法是利用模板功能在每行添加一个按钮控件或者超链接按钮控件,单击按钮利用RowCommand获取每行的ID. 下面我们利用JavaScrip ...
最新文章
- linux下网卡状态,linux-网络状态
- AD环境部署文件服务器2012,Windows_server_2012部署AD域及辅域环境.doc
- Quartz.net官方开发指南 第五课: SimpleTrigger
- 深入理解printf 之一 问题引出
- 解决Oracle jdbc驱动包maven下载失败问题
- 判断一颗二叉树是否为二叉搜索树(Validate Binary Search Tree)
- 大数据入门:各种大数据技术的介绍
- 清掉数据_值得收藏!面试中有哪些经典的数据库问题?
- JAVA的sleep
- 深度卷积神经网络最新进展综述
- Matlab论文插图绘制模板第46期—帕累托图(Pareto)
- 微星z370安装linux系统,微星主板Z370、Z270、H110、H170设置U盘启动,U盘启动快捷键...
- 关于sqlserver身份登录失败的解决方法
- 【C语言结构体题】定义用于存储学生信息的结构体数组,输入学生的准考证号、姓名和成绩信息,计算总分,并按总分由高到低输出。
- java/mysql多个字段in从而保持字段一一对应
- css3从入门到熟练运用(三):炫目字体,多样背景和渐变颜色,神奇边框
- flask身份验证_Flask基于令牌的身份验证
- Attiny416的复位系统
- layui-tree实现Ajax异步请求后动态添加html元素
- Linux基础服务(NFS文件服务器)
热门文章
- swf转html5批量转换,gif转swf转换工具,gif转swf格式转换器|批量转换
- Matlab导出高DPI图像——生成高分辨率.eps .tiff .jpg图像的方法
- 新旧Oracle客户端连接远程oracle数据库
- MATLAB VideoReader读取视频出错解决办法
- chrome被hao123主页绑架的解决
- JAVA计算机毕业设计疫情监测管理系统Mybatis+源码+数据库+lw文档+系统+调试部署
- win10分屏快捷键无法使用_win10分屏快捷键如何使用
- 疯狂java讲义第七章课后习题答案
- breadweb控制台下载_路由器刷breed web控制台助手最新版
- 完整美团饿了么外卖红包源码