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

draft for a bookmarklet to screenshot any page

Browse Source 
primarily intended to do debugging/testing
This commit is contained in:
Obexer Christoph 2012-02-04 15:07:24 +01:00
parent 8bbbace790
commit db211317ff
2 changed files with 126 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
bookmarklet.html Normal file
View File

@ -0,0 +1,53 @@
<!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>
<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>

73
src/plugins/bookmarklet.js Normal file
View File

@ -0,0 +1,73 @@
(function() {
/* options, customize to your needs */
var server = '//html2canvas.hertzen.com/build',
proxy = '//html2canvas.appspot.com',
debug = false,
profile = false;
//DEBUG: server = 'http://localhost/html2canvas'; debug = true;
var debugFiles = [
'external/jquery-1.6.2.min',
'src/Core',
'src/Generate',
'src/Parse',
'src/Preload',
'src/Queue',
'src/Renderer',
'src/plugins/jquery.plugin.html2canvas'
],
relFiles = [
'//code.jquery.com/jquery-1.6.4.js',
'html2canvas',
'jquery.plugin.html2canvas'
],
i = 0, el = null;
var loader = {
index: 0,
head: document.getElementsByTagName('head')[0],
statusline: document.createElement('div'),
files: (debug ? debugFiles : relFiles),
onload: function () {
var _ = this;
if (_.index < _.files.length) {
var el = document.createElement('script');
el.type = 'text/javascript';
el.onload = function() {
_.onload();
};
el.onerror = function() {
_.statusline.style.color = 'red';
_.statusline.innerHTML = _.statusline.innerHTML + ' failed';
_.statusline.onclick = function() {
_.statusline.parentNode.removeChild(_.statusline);
};
};
if (_.files[_.index].substr(0, 2) === '//') {
el.src = _.files[_.index];
}
else {
el.src = server + '/' + _.files[_.index] + '.js';
}
_.head.appendChild(el);
++_.index;
_.statusline.innerHTML = 'html2canvas: loading "' + el.src + '" ' + _.index + ' / ' + _.files.length + '...';
}
else {
_.statusline.parentNode.removeChild(_.statusline);
delete _.statusline;
$(document.documentElement).html2canvas({
logging: debug,
profile: profile
});
}
}
}, statusline = loader.statusline;
statusline.style.position = 'fixed';
statusline.style.bottom = '0px';
statusline.style.right = '20px';
statusline.style.backgroundColor = 'white';
statusline.style.border = '1px solid black';
statusline.style.borderBottomWidth = '0px';
statusline.style.padding = '2px 5px';
document.body.appendChild(statusline);
loader.onload();
}());