html2canvas 在 angularjs 中不工作

Question

我正在尝试使用 [=29] 中的 html2canvas 库将 div 元素转换为 canvas =]js 控制器，它在控制台中没有抛出错误，但只给出了一个 empty canvas，我在 [= 中包含了 html2canvas 脚本19=]master page 并且 div 元素位于使用 ng-view 加载的模板页面内 div 元素是

<div id="barcodeHtml" style="background-color: #82c6f8">
        <div style="width: 20%;float: left;display: list-item;"></div>
        <div style="width: 40%;float: left; align-content: center"> 
           <h2 style="display: inline;">CCAD</h2>
        <br>
        <div style="float: left;width: 50%">
            <h4>MEMBER NAME</h4>
            <h2>{{memberName}}</h2>
        </div>
        <div style="float: right;width: 50%"></div>

        <br>
        <br>
        <div style="float: left;width: 100%">
        <h4>MEMBER SINCE</h4>
        <h3>{{memberSince}}</h3>
        </div>
        <br>
        <br><br>
        <br>
        <img src="{{imgSource}}"/>
        </div>
    </div>
<a  class="btn btn-custom" ng-click="getCanvas()">get Canvas</a>

和angular控制器

$scope.getCanvas=function()
{
      $scope.memberName=data.html.name;
      $scope.memberSince=data.html.year;
      $scope.imgSource=data.html.code;
      html2canvas($("#barcodeHtml"), {
          onrendered: function(canvas) {
              document.body.appendChild(canvas);

          }
      });
}

我错过了什么？提前谢谢你..

Answer 1

您的内联样式存在问题。我尝试从你的 div [从这里：<div style="width: 40%;float: left; align-content: center">] 中删除 float: left;，然后成功了。

见working fiddle

Answer 2

问题是您的 div 和 id="barcodeHtml" 没有高度，因此无法附加到正文。

试试这个

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript">
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
   $scope.getConvas=function()
   {
    html2canvas($("#barcodeHtml"), {
     onrendered: function(canvas) {
      document.body.appendChild(canvas);

     }
    });
   }
  })
 </script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myCtrl">
  <div id="barcodeHtml" style="background-color: #82c6f8; height: 200px;">
   <div style="width: 20%;float: left;display: list-item;"></div>
   <div style="width: 40%;float: left; align-content: center"> 
    <h2 style="display: inline;">CCAD</h2>
    <br>
    <div style="float: left;width: 50%">
     <h4>MEMBER NAME</h4>
     <h2>{{memberName}}</h2>
    </div>
    <div style="float: right;width: 50%"></div>

    <br>
    <br>
    <div style="float: left;width: 100%">
     <h4>MEMBER SINCE</h4>
     <h3>{{memberSince}}</h3>
    </div>
    <br>
    <br><br>
    <br>
    <img src="{{imgSource}}"/>
   </div>
  </div>
  <a  class="btn btn-custom" ng-click="getConvas()">get Convas</a>
 </div>
</body>
</html>

html2canvas 在 angularjs 中不工作

html2canvas not working in angularjs

html2canvas

angularjs