var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.printCanvasData = function() {
html2canvas($('body'), {
onrendered: function(canvas) {
console.log(canvas.toDataURL());
self.canvasdata = canvas.toDataURL();
$("#canvas_image").attr("src", self.canvasdata);
}
})
};
});
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data):/);
}]);
app.controller("appDirectiveController", ['$scope', '$attrs', function($scope, $attrs) {
var self = this;
var directiveScope = $scope.$parent;
self.options = directiveScope.$eval($attrs.model);
self.onOk = function() {
html2canvas($('body'), {
onrendered: function(canvas) {
console.log(canvas.toDataURL());
self.canvasdata = canvas.toDataURL();
//$scope.$apply();
//$("#dircanvas_image").attr("src", self.canvasdata);
}
});
}
}]);
app.directive('htmlCanvas', function($compile) {
return {
template: '<div><button ng-click="dirCtrl.onOk()" type="">Print Canvas</button><img id="dircanvas_image" src="{{canvasdata}}" height="242" width="242" /></div>',
scope: {
type: '@'
},
restrict: 'E',
replace: true,
controller: 'appDirectiveController',
controllerAs: 'dirCtrl',
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<h1>Example</h1>
<pre>
HTML2CANVAS to new window and print
</pre>
<img id="canvas_image" src="{{canvasdata}}" height="242" width="242" />
<button ng-click="printCanvasData()">Print</button>
<!--<html-canvas model="canvasdata"> </html-canvas>-->
</body>
</html>
/* Put your css in here */
img {
border-style: solid;
border-color: #ff0000 #0000ff;
}