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

Implementing cropping and dimension options for rendering (Fix #1230)

Browse Source
This commit is contained in:
Niklas von Hertzen
2017-09-27 22:14:50 +08:00
parent ae47d901a1
commit 53dd885279
16 changed files with 254 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
tests/reftests/options/crop.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>crop test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
h2cOptions = {
x: 250,
y: 250,
width: 100,
height: 100
};
</script>
<script type="text/javascript" src="../../test.js"></script>
<style>
#div1 {
position: absolute;
left: 250px;
top: 250px;
width: 100px;
height: 100px;
background: green;
}
body, html {
background: red;
}
</style>
</head>
<body>
<div id="div1">
great success
</div>
</body>
</html>

33
tests/reftests/options/element.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>element render test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style>
#div1 {
position: absolute;
left: 250px;
top: 250px;
width: 100px;
height: 100px;
background: green;
}
body, html {
background: red;
}
</style>
</head>
<body>
<div id="div1">
great success
</div>
<script>
var forceElement = document.querySelector('#div1');
h2cSelector = forceElement;
</script>
</body>
</html>

54
tests/reftests/options/scroll.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>scroll test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
h2cOptions = {
x: 250,
y: 250,
width: 200,
height: 100,
scrollX: 250,
scrollY: 250
};
</script>
<script type="text/javascript" src="../../test.js"></script>
<style>
#div1 {
position: absolute;
left: 350px;
top: 250px;
width: 100px;
height: 100px;
background: green;
}
#div2 {
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: lightblue;
}
body, html {
background: red;
height: 4000px;
width: 4000px;
}
</style>
</head>
<body>
<div id="div1">
great success
</div>
<div id="div2">
fixed great success
</div>
</body>
</html>