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

Fix rendering of content when window is scrolled

Browse Source
This commit is contained in:
Niklas von Hertzen 2016-01-23 22:05:43 +02:00
parent a4aa0c6444
commit 3b49cba21c
4 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/html2canvas.js vendored
View File

@ -999,7 +999,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) { } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
canvas = renderer.canvas; canvas = renderer.canvas;
} else { } else {
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset}); canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
} }
cleanupContainer(container, options); cleanupContainer(container, options);
@ -1022,9 +1022,11 @@ function crop(canvas, bounds) {
var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height)); var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
croppedCanvas.width = bounds.width; croppedCanvas.width = bounds.width;
croppedCanvas.height = bounds.height; croppedCanvas.height = bounds.height;
log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1)); var width = x2-x1;
log("Resulting crop with width", bounds.width, "and height", bounds.height, " with x", x1, "and y", y1); var height = y2-y1;
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1); log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", width, "height:", height);
log("Resulting crop with width", bounds.width, "and height", bounds.height, "with x", x1, "and y", y1);
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, width, height, bounds.x, bounds.y, width, height);
return croppedCanvas; return croppedCanvas;
} }

2
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
src/core.js
View File

@ -100,7 +100,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) { } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
canvas = renderer.canvas; canvas = renderer.canvas;
} else { } else {
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset}); canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
} }
cleanupContainer(container, options); cleanupContainer(container, options);
@ -123,9 +123,11 @@ function crop(canvas, bounds) {
var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height)); var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
croppedCanvas.width = bounds.width; croppedCanvas.width = bounds.width;
croppedCanvas.height = bounds.height; croppedCanvas.height = bounds.height;
log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1)); var width = x2-x1;
log("Resulting crop with width", bounds.width, "and height", bounds.height, " with x", x1, "and y", y1); var height = y2-y1;
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1); log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", width, "height:", height);
log("Resulting crop with width", bounds.width, "and height", bounds.height, "with x", x1, "and y", y1);
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, width, height, bounds.x, bounds.y, width, height);
return croppedCanvas; return croppedCanvas;
} }

20
tests/mocha/scrolling.html
View File

@ -19,8 +19,8 @@
<div style="height: 650px; background: green"></div> <div style="height: 650px; background: green"></div>
</div> </div>
</div> </div>
<div style="height: 2200px;"></div> <div style="height: 2200px"></div>
<div style="height: 500px;background: green;"><a name="content">content</a></div> <div style="height: 500px;background: green;" id="bottom-content"><a name="content">&nbsp;</a></div>
<script> <script>
describe("Scrolling", function() { describe("Scrolling", function() {
it("with random scroll", function (done) { it("with random scroll", function (done) {
@ -58,7 +58,6 @@
setTimeout(function() { setTimeout(function() {
html2canvas(document.querySelector("#scroll-render")).then(function (canvas) { html2canvas(document.querySelector("#scroll-render")).then(function (canvas) {
expect($("#scrollable").scrollTop()).to.equal(500); expect($("#scrollable").scrollTop()).to.equal(500);
document.body.appendChild(canvas);
expect(canvas.width).to.equal(200); expect(canvas.width).to.equal(200);
expect(canvas.height).to.equal(200); expect(canvas.height).to.equal(200);
validCanvasPixels(canvas); validCanvasPixels(canvas);
@ -68,6 +67,21 @@
}); });
}, 0); }, 0);
}); });
it("with window scroll", function (done) {
$(window).scrollTop(500);
setTimeout(function() {
console.log(document.querySelector("#bottom-content").getBoundingClientRect().top);
html2canvas(document.querySelector("#bottom-content")).then(function (canvas) {
expect($(window).scrollTop()).to.equal(500);
validCanvasPixels(canvas);
done();
}).catch(function (error) {
done(error);
});
}, 0);
});
}); });
function validCanvasPixels(canvas) { function validCanvasPixels(canvas) {