html2canvas nicht in AngularJS

arbeitet Ich versuche, div Element zu konvertieren auf der Leinwand mit html2canvas Bibliothek innerhalb AngularJS Controller, es keinen Fehler in der Konsole führt aber nur gibt eine leer Leinwand, eingeschlossen ich das html2canvas Skript in Masterseite und das div-Element innerhalb einer Vorlagenseite, die ng-view das div Element geladen wird unter Verwendung isthtml2canvas nicht in AngularJS

<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>

und der Winkel controlle r

$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); 

      } 
     }); 
}

was fehlt mir? Vielen Dank im Voraus ..

Quelle

2017-05-26 Feras Salim

Nicht vertraut mit 'html2canvas' aber vielleicht nicht unterstützt wird Objekt jQuery und sollte ein Rohelement statt wie in' html2canvas ($ ("# weitergegeben barcodeHtml ") [0], {' – GillesC

Ich habe Ihren Vorschlag ausprobiert und das Ergebnis ist das gleiche –

können Sie versuchen mit 'document.getElementById (" barcodeHtml ")'? – anoop

Das Problem Ihre div mit id="barcodeHtml" ist nicht Höhe hat, so dass es nicht in der Lage ist, an den Körper anzuhängen.

Versuchen Sie, diese

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

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

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

Quelle

2017-05-26 08:56:47

Es gibt ein Problem mit Ihrem Inline-Styling. Ich habe versucht, float: left; von Ihrem oberen div [von hier: <div style="width: 40%;float: left; align-content: center">] zu entfernen, dann hat es funktioniert.

Siehe working fiddle

Quelle

2017-05-26 08:53:12 anoop

html2canvas nicht in AngularJS

Antwort

Verwandte Themen