Question

我正在尝试使用 angularjs 控制器内的 html2canvas 库将div元素转换为canvas，它在控制台中不会抛出任何错误，但只会提供空 canvas，我在母版页中包含html2canvas脚本，div元素位于使用 ng-view 加载的模板页面内

元素是

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

和角度控制器

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

          }
      });
}

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

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：1)

Answer 1

您的内联样式存在问题。我尝试从上方float: left; [从此处div]删除<div style="width: 40%;float: left; align-content: center">，然后就可以了。

请参阅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

2 个答案: