CODEWITHSUNDEEP
angularjshtml2canvas
Feras Salim
Feras Salim

Reputation: 438

html2canvas not working in angularjs

I'm trying to convert div element to canvas using html2canvas library inside angularjs controller, it throws no error in console but only gives an empty canvas, I included the html2canvas script in master page and the div element is inside a template page which is loaded using ng-view the div element is

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

and the angular controller

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

          }
      });
}

what am I missing? thank you in advance..

Upvotes: 2

Views: 6369

Answers (2)

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

The issue is your div with id="barcodeHtml" does not have height so it is not able to append to the body.

Try this

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

Upvotes: 1

anoop
anoop

Reputation: 3822

There is an issue with your inline-styling. I tried with removing float: left; from your upper div [from here : <div style="width: 40%;float: left; align-content: center">], then it worked.

See the working fiddle

Upvotes: 1

Related Questions