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

8
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) {
canvas = renderer.canvas;
} 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);
@ -1022,9 +1022,11 @@ function crop(canvas, bounds) {
var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
croppedCanvas.width = bounds.width;
croppedCanvas.height = bounds.height;
log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1));
var width = x2-x1;
var height = 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, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1);
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, width, height, bounds.x, bounds.y, width, height);
return croppedCanvas;
}

2
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
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) {
canvas = renderer.canvas;
} 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);
@ -123,9 +123,11 @@ function crop(canvas, bounds) {
var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
croppedCanvas.width = bounds.width;
croppedCanvas.height = bounds.height;
log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1));
var width = x2-x1;
var height = 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, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1);
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, width, height, bounds.x, bounds.y, width, height);
return croppedCanvas;
}

20
tests/mocha/scrolling.html
View File

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