https://stackoverflow.com/questions/22569210
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianThis problem is fixed in 0.5.0 version (But version 0.5.0 is not yet ready for use).
But have a lot of problems that are being corrected and basic functions that have not yet been implemented.
Note: html2canvas has no date forecast for 0.5.0 release Note: version 0.4.1 no longer receives updates
The problem is that version 0.5.0 is not ready for use, I reworked your html, see:
<!DOCTYPE html><!--// Never put a space/break-line before the DOCTYPE -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: Georgia, serif;
font-size: 4em;
}
p {
padding: 5px 0;
margin: 0;
}
#main {
margin: 0 auto;
width: 100%;
min-height: 100%;
font-weight: bold;
background: white url('prompt-save-bg.jpg') center top repeat-y;
max-width: 1263px; /* background-limit*/
text-align: center;
}
#article {
padding: 5em 2em 0 2em;
font-weight: bold;
}
#article p.info {
font-size: 0.2em; padding: 40em 0;
}
</style>
<script type="text/javascript">
//<!CDATA[
function save(canvas) {/*html2canvas-0.5.0 work with Promise.js*/
window.open(canvas.toDataURL());
}
$(document).ready(function(){
$('#save-image').click(function () {
html2canvas(document.body, {
allowTaint: true,
logging: true,
taintTest: false,
onrendered: save /*0.4.1*/
}).then(save);/*0.5.0-rc*/
});
});
//]]>
</script>
</head>
<body>
<div id="main">
<input value="Generate Image" id="save-image" download="YourFileName.jpg" type="button">
<div id="article">
<h2>AUBREY</h2>
<p>And Aubrey was her name</p>
<p>A not so very ordinary girl or name</p>
<p>But who's to blame?</p>
<p>For a love that wouldn't bloom</p>
<p>For the hearts that never played in tune</p>
<p>Like a lovely melody that everyone can sing</p>
<p>Take away the words that rhyme, it doesn't mean a thing</p>
<p> </p>
<p>And Aubrey was her name</p>
<p>We tripped the light and danced together to the moon</p>
<p>But where was June?</p>
<p>No, it never came around</p>
<p>If it did it never made a sound</p>
<p>Maybe I was absent or was listening too fast</p>
<p>Catching all the words but then the meaning going past</p>
<p> </p>
<p>But God I miss the girl</p>
<p>And I'd go a thousand times around the world just to be</p>
<p>Closer to her than to me</p>
<p> </p>
<p>And Aubrey was her name</p>
<p>I never knew her but I loved her just the same</p>
<p>I loved her name</p>
<p>Wish that I had found the way</p>
<p>And the reasons that would make her stay</p>
<p>I have learned to lead a life apart from all the rest</p>
<p>If I can't have the one I want, I'll do without the best</p>
<p> </p>
<p>But how I miss the girl</p>
<p>And I'd go a million times around the world just to say</p>
<p>She had been mine for a day</p>
<p class="info">
Prompter generated by RAREAPPS: http://prompter.rareapps.org
</p>
</div>
</div>
</body>
</html>
- Worked in
0.4.1and0.5.0-rc. - Worked in Chrome and Firefox.
Note that I created a function called save(), so you can switch between onrendered (version 0.4.1) or then (version 0.5.0-rc).
I put your background and a <DIV> not changed the <html> and not the <body> because the "html2canvas" is not smart enough to understand the manipulations of overflow: in the window.
Note that the margin:; in your last paragraph (<p>) caused problems both in "html2canvas" as in "Webkit" browser so I used padding:
Remember there is more than one way to do the same thing.
