mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Add option to use existing canvas for rendering

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-09-28 22:51:11 +03:00
parent bd1abe1857
commit b60b4b2a45
5 changed files with 66 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/html2canvas.js vendored
View File

@ -628,7 +628,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
var parser = new NodeParser(node, renderer, support, imageLoader, options); var parser = new NodeParser(node, renderer, support, imageLoader, options);
return parser.ready.then(function() { return parser.ready.then(function() {
log("Finished rendering"); log("Finished rendering");
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left}); var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left});
cleanupContainer(container, options); cleanupContainer(container, options);
return canvas; return canvas;
}); });
@ -2679,9 +2679,11 @@ function XHR(url) {
function CanvasRenderer(width, height) { function CanvasRenderer(width, height) {
Renderer.apply(this, arguments); Renderer.apply(this, arguments);
this.canvas = this.document.createElement("canvas"); this.canvas = this.options.canvas || this.document.createElement("canvas");
if (!this.options.canvas) {
this.canvas.width = width; this.canvas.width = width;
this.canvas.height = height; this.canvas.height = height;
}
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.taintCtx = this.document.createElement("canvas").getContext("2d"); this.taintCtx = this.document.createElement("canvas").getContext("2d");
this.ctx.textBaseline = "bottom"; this.ctx.textBaseline = "bottom";

4
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

52
examples/existing_canvas.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Using an existing canvas to draw on</title>
<style>
canvas {
border: 1px solid black;
}
button {
clear: both;
display: block;
}
#content {
background: rgba(100, 255, 255, 0.5);
padding: 50px 10px;
}
</style>
</head>
<body>
<div><h1>HTML content to render:</h1>
<div id="content">Render the content in this element <strong>only</strong> onto the existing canvas element</div>
</div>
<h1>Existing canvas:</h1>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
<button>Run html2canvas</button>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
document.querySelector("button").addEventListener("click", function() {
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
console.log('Drew on the existing canvas');
});
}, false);
</script>
</body>
</html>

2
src/core.js
View File

@ -60,7 +60,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
var parser = new NodeParser(node, renderer, support, imageLoader, options); var parser = new NodeParser(node, renderer, support, imageLoader, options);
return parser.ready.then(function() { return parser.ready.then(function() {
log("Finished rendering"); log("Finished rendering");
var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left}); var canvas = (options.type !== "view" && (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null)) ? renderer.canvas : crop(renderer.canvas, {width: width, height: height, top: bounds.top, left: bounds.left});
cleanupContainer(container, options); cleanupContainer(container, options);
return canvas; return canvas;
}); });

4
src/renderers/canvas.js
View File

@ -1,8 +1,10 @@
function CanvasRenderer(width, height) { function CanvasRenderer(width, height) {
Renderer.apply(this, arguments); Renderer.apply(this, arguments);
this.canvas = this.document.createElement("canvas"); this.canvas = this.options.canvas || this.document.createElement("canvas");
if (!this.options.canvas) {
this.canvas.width = width; this.canvas.width = width;
this.canvas.height = height; this.canvas.height = height;
}
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.taintCtx = this.document.createElement("canvas").getContext("2d"); this.taintCtx = this.document.createElement("canvas").getContext("2d");
this.ctx.textBaseline = "bottom"; this.ctx.textBaseline = "bottom";