www.qjdy.com-奇迹赌场 > 佳美特设计 > 我们需要做些简单工作

原标题:我们需要做些简单工作

浏览次数:172 时间:2019-07-18

图片 1

简介

在这么些例子中,小编援用了总结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

    点击这里

你恐怕感兴趣的小说:

  • AngularJS扶助库browserTrigger用法示例
  • Angular2中Bootstrap界面库ng-bootstrap详解
  • AngularJS达成分页显示数据库音信
  • 在JavaScript的AngularJS库中进行单元测量试验的不二诀要
  • 使用JavaScript的AngularJS库编写hello world的方法
  • 接纳AngularJS 应用访谈 Android 手提式有线电话机的图片库
  • Angular-Touch库用法示例

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:我们需要做些简单工作

关键词: CMD体育平台

上一篇:如果找到匹配

下一篇:没有了