我正在使用html2canvas从我的html页面生成图像。
当我输入我的网址时http://prompter.rareapps.org/prompt/prompt-save2.php?p=123
在html2canvas网站（http://html2canvas.hertzen.com/screenshots.html）的网页渲染器中，我的页面完全具有背景渲染。
但是当我生成自己的画布时，我没有背景。这是我的代码
<script type="text/javascript">
$( document ).ready(function() {
html2canvas(document.body, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
window.location.href = canvas.toDataURL('image/jpeg');
}
});
});
我想念什么？
谢谢
注意：html2canvas没有0.5.0版本的日期预测注意：0.4.1版不再接收更新
问题是0.5.0版本尚未准备好使用，我重新编写了html，请参阅：
<!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>在0.4.1和0.5.0-rc中工作。曾在Chrome和Firefox中使用。
请注意，我创建了一个名为 save()的函数，因此可以在onrendered（0.4.1版）或then（0.5.0-rc版）之间切换。我放了您的背景， <DIV>并没有更改<html>而不是<body>，因为“ html2canvas”不够聪明，无法理解窗口中overflow:的操作。[请注意，上一段（
margin:;）中的<p>引起了“ html2canvas”和“ Webkit”浏览器中的问题，所以我使用了padding:请记住，做同一件事的方法不止一种。
...
html2canvas(document.body,
{
onrendered: function(canvas){
var imgData = canvas.toDataURL("image/jpeg");
var doc = new jsPDF('p','mm');
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
doc.save($.now()+'.pdf');
}
pdf的背景为空白（黑色），
现在是否添加CSS样式
body { background-color: white; }
校正了空白（黑色）背景
根据他的解决方案，只需使用以下语句更新版本0.4.1中的第350行：
topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);