mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
updated examples
This commit is contained in:
Niklas von Hertzen
parent
7a3dd7572c
commit
3aa7d69cc7
@ -1,57 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>html2canvas Bookmarklet</title>
|
||||
<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var isDebug = false, origBookmarklet = '';
|
||||
function patchLinks() {
|
||||
var bookmarklet = origBookmarklet;
|
||||
if (isDebug) {
|
||||
bookmarklet = bookmarklet.replace('//DEBUG: ', '');
|
||||
}
|
||||
bookmarklet = bookmarklet.replace(/\s\/\/.*/g, ''); // remove single line comments
|
||||
bookmarklet = bookmarklet.replace(/[\u000A\u000D]+/g, ''); // remove all linebreaks
|
||||
bookmarklet = bookmarklet.replace(/\/\*.*?\*\//g, ''); // remove multi line comments
|
||||
bookmarklet = bookmarklet.replace(/\s\s+/g, ' '); // reduce multiple spaces to single spaces
|
||||
bookmarklet = bookmarklet.replace(/\s+=\s+/g, '=');
|
||||
$('a.bookmarklet').each(function(_, el) {
|
||||
el.href = $(el).attr('data-href') + bookmarklet;
|
||||
});
|
||||
}
|
||||
$(function() {
|
||||
$('input[type=checkbox]').bind('change', function() {
|
||||
isDebug = $(this).is(':checked');
|
||||
patchLinks();
|
||||
}).change();
|
||||
$.ajax('src/plugins/bookmarklet.js', {
|
||||
dataType: 'text',
|
||||
success: function(data, status, xhr) {
|
||||
origBookmarklet = data;
|
||||
patchLinks();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>html2canvas Bookmarklet</h1>
|
||||
<p>
|
||||
If you use a normal browser: drag the normal <a class="bookmarklet" data-href="javascript:">html2canvas</a> bookmarklet to your bookmarks toolbar.<br />
|
||||
If not use the following link: <a class="bookmarklet" data-href="#_remove_this_javascript:">bookmarklet for those special mobile devices</a>
|
||||
click / tap that link and then bookmark the page, edit the bookmark and remove the start up until including <code>#_remove_this_</code>
|
||||
part at the beginning of the URL, it must start with: <code>javascript:</code> to be correct.
|
||||
</p>
|
||||
<p>
|
||||
If you are using Firefox and the NoScript Addon: disable the ABE part of it,
|
||||
took me quite some time to figure out that the reason for an unreliable bookmarklet was in NoScript...
|
||||
</p>
|
||||
<h2>For Developers:</h2>
|
||||
<p>
|
||||
If you are a developer and want to debug locally (you need the source tree of your html2canvas at:
|
||||
<code>http(s)://localhost/html2canvas/</code>)
|
||||
check the following box to get the bookmarklet patched automatically ;)<br />
|
||||
<label>Debug bookmarklet: <input type="checkbox" /></label>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
2559
examples/demo.html
2559
examples/demo.html
File diff suppressed because it is too large
Load Diff
@ -1,186 +1,68 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../tests/assets/jquery-1.6.2.js"></script>
|
||||
<script type="text/javascript" src="../build/html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
html2canvas( [ document.body ], {
|
||||
onrendered: function(canvas) {
|
||||
document.body.appendChild(canvas);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.feedback-overlay-black{
|
||||
background-color:#000;
|
||||
opacity:0.5;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="build/html2canvas.js"></script>
|
||||
<script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('body').html2canvas();
|
||||
// var ss = $('ul').offset();
|
||||
// alert(ss.left);
|
||||
});
|
||||
</script>
|
||||
<title>
|
||||
display/box/float/clear test
|
||||
</title>
|
||||
<style type="text/css">
|
||||
/* last modified: 1 Dec 98 */
|
||||
</style>
|
||||
|
||||
html {
|
||||
font: 10px/1 Verdana, sans-serif;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
<style>
|
||||
div{
|
||||
padding:20px;
|
||||
margin:0 auto;
|
||||
border:5px solid black;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1.5em;
|
||||
border: .5em solid black;
|
||||
padding: 0;
|
||||
width: 48em;
|
||||
background-color: white;
|
||||
}
|
||||
h1{
|
||||
border-bottom:2px solid white;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
h2{
|
||||
background: #efefef;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
dt {
|
||||
background-color: rgb(204,0,0);
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
|
||||
height: 28em;
|
||||
border: .5em solid black;
|
||||
float: left;
|
||||
}
|
||||
|
||||
dd {
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
border: 1em solid black;
|
||||
padding: 1em;
|
||||
width: 34em;
|
||||
height: 27em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background:red;">
|
||||
<div style="background:green;">
|
||||
<div style="background:blue;border-color:white;">
|
||||
<div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
|
||||
Text that isn't wrapped in anything.
|
||||
<p>Followed by some text wrapped in a <b><p> paragraph.</b> </p>
|
||||
Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
|
||||
<hr />
|
||||
<h2>More content</h2>
|
||||
<div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
|
||||
</div></div>
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</div>
|
||||
|
||||
li {
|
||||
display: block; /* i.e., suppress marker */
|
||||
color: black;
|
||||
height: 9em;
|
||||
width: 5em;
|
||||
margin: 0;
|
||||
border: .5em solid black;
|
||||
padding: 1em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
}
|
||||
|
||||
#bar {
|
||||
background-color: black;
|
||||
color: white;
|
||||
width: 41.17%; /* = 14em */
|
||||
border: 0;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
#baz {
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form p {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 1em 1em 2em;
|
||||
border-width: 1em 1.5em 2em .5em;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
padding: 1em 0;
|
||||
width: 5em;
|
||||
height: 9em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
float: left;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<dl>
|
||||
<dt>
|
||||
toggle
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>
|
||||
the way
|
||||
</li>
|
||||
<li id="bar">
|
||||
<p>
|
||||
the world ends
|
||||
</p>
|
||||
<form action="./" method="get">
|
||||
<p>
|
||||
bang
|
||||
<input type="radio" name="foo" value="off">
|
||||
</p>
|
||||
<p>
|
||||
whimper
|
||||
<input type="radio" name="foo2" value="on">
|
||||
</p>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
i grow old
|
||||
</li>
|
||||
<li id="baz">
|
||||
pluot?
|
||||
</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<address>
|
||||
bar maids,
|
||||
</address>
|
||||
</blockquote>
|
||||
<h1>
|
||||
sing to me, erbarme dich
|
||||
</h1>
|
||||
</dd>
|
||||
</dl>
|
||||
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
|
||||
This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
|
||||
</p>
|
||||
</body>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
|
||||
<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="build/html2canvas.js"></script>
|
||||
<script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
|
||||
|
||||
$('body').html2canvas();
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.feedback-overlay-black{
|
||||
background-color:#000;
|
||||
opacity:0.5;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
div{
|
||||
padding:20px;
|
||||
margin:0 auto;
|
||||
border:5px solid black;
|
||||
}
|
||||
|
||||
h1{
|
||||
border-bottom:2px solid white;
|
||||
}
|
||||
|
||||
h2{
|
||||
background: #efefef;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background:red;">
|
||||
<div style="background:green;">
|
||||
<div style="background:blue;border-color:white;">
|
||||
<div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
|
||||
Text that isn't wrapped in anything.
|
||||
<p>Followed by some text wrapped in a <b><p> paragraph.</b> </p>
|
||||
Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
|
||||
<hr />
|
||||
<h2>More content</h2>
|
||||
<div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -59,7 +59,7 @@ The library has two sets of tests. The first set is a number of qunit tests that
|
||||
|
||||
The other set of tests run Firefox, Chrome and Internet Explorer with <a href="https://github.com/niklasvh/webdriver.js">webdriver</a>. The selenium standalone server (runs on Java) is required for these tests and can be downloaded from <a href="http://code.google.com/p/selenium/downloads/list">here</a>. They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while commiting changes, these should generally not go decrease from the baseline values.
|
||||
|
||||
If you didn't download `html2canvas` from `npm`, start by downloading the dependencies:
|
||||
Start by downloading the dependencies:
|
||||
|
||||
$ npm install
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user