html2canvas缺少背景

本文介绍了html2canvas缺少背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我输入我的网址

html2canvas网站的网页渲染器中的

（）我的页面是以背景渲染的。

但是当我生成自己的画布时，我没有背景。这是我的代码

 < script type =text / javascript> 
 $（document）.ready（function（）{
 html2canvas（document.body，{
 allowTaint：true，
 taintTest：false，
 onrendered：function（ canvas）{
 window.location.href = canvas.toDataURL（'image / jpeg'）; 
} 
}）; 
}）;

我错过了什么？

谢谢

解决方案

这个问题已在0.5.0版本中解决（但版本0.5.0还没有准备好使用） p>

但是有很多问题正在纠正以及尚未实现的基本功能。

问题是版本0.5.0没有准备好使用，我重写了你的html，参见：

 < ;！DOCTYPE html><！ -  //不要在DOCTYPE之前放置空格/折线 - > 
< html> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8> 
< meta charset =UTF-8> 
 
< script type =text / javascriptsrc =html2canvas.js>< / script> 
< script type =text / javascriptsrc =https://code.jquery.com/jquery-1.11.0.min.js>< / script> 
 
< style type =text / css> 
 html，body {
 margin：0; 
 padding：0; 
身高：100％; 
} 
 body {
 font-family：Georgia，serif; 
 font-size：4em; 
} 
 p {
 padding：5px 0; 
保证金：0; 
} 
 
 #main {
 margin：0 auto; 
宽度：100％; 
最低身高：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;填充：40em 0; 
} 
< / style> 
 
< script type =text / javascript> 
 //<！CDATA [
 function save（canvas）{/*html2canvas-0.5.0 with Promise.js * / 
 window.open（canvas.toDataURL（））; 
 
 $（document）.ready（function（）{
 $（'＃save-image'）。click（function（）{
 html2canvas（document.body， {
 allowTaint：true，
 logging：true，
 taintTest：false，
渲染：save /*0.4.1*/ 
}）。然后（保存） ; / * 0.5.0 -rc * / 
}）; 
}）; 
 //]]> 
< / script> 
< / head> 
< body> 
< div id =main> 
< input value =Generate Imageid =save-imagedownload =YourFileName.jpgtype =button> 
 
< div id =article> 
< h2> AUBREY< / h2> 
 
< p>而奥布里是她的名字< / p> 
< p>不是很普通的女孩或名字< / p> 
< p>但是，谁应该责备？< / p> 
< p>对于一个不会绽放的爱< / p> 
< p>对于从未调过的心脏< / p> 
< p>像每个人都可以唱歌的可爱旋律< / p> 
< p>带走押韵的单词，这并不意味着什么< / p> 
< p>& nbsp;< / p> 
< p>奥布瑞是她的名字< / p> 
< p>我们绊倒了灯光，一起跳舞到月球上< / p> 
< p>但是June在哪里？< / p> 
< p>不，它从来没有过来< / p> 
< p>如果它没有发出声音< / p> 
< p>也许我缺席或听得太快< / p> 
< p>抓住所有的单词，但后来的意思是过去< / p> 
< p>& nbsp;< / p> 
< p>但上帝我想念那个女孩< / p> 
< p>我会在世界各地进行一千多次< / p> 
< p>比她更接近我< / p> 
< p>& nbsp;< / p> 
< p>奥布瑞是她的名字< / p> 
< p>我从来不认识她，但我爱她一样< / p> 
< p>我爱她的名字< / p> 
< p>希望我找到了方法< / p> 
< p>原因会让她留下来< / p> 
< p>我学会了将生活从其他所有领域中分离出来< / p> 
< p>如果我不能拥有我想要的那个，我会尽力而为< / p> 
< p>& nbsp;< / p> 
< p>但我怎么会错过女孩< / p> 
< p>我会在世界各地进行一百万次讲< / p> 
< p>她曾经是我的一天< / p> 
 
< p class =info> 
由RAREAPPS生成的Prompter：http://prompter.rareapps.org 
< / p> 
< / div> 
< / div> 
< / body> 
< / html>

工作于 0.4.1 和 0.5.0-rc 。

适用于Chrome和Firefox。 / ul>

请注意，我创建了一个名为 save（）的函数，因此您可以在之间切换（版本0.4.1）或然后（版本0.5.0-rc）。

我把你的背景和< DIV> 不改变< html> ，而不是< body> 因为html2canvas不够聪明，无法理解窗口中 overflow：的操作。 p>

请注意，您最后一段（< p> ）在html2canvas中造成了问题，就像在Webkit浏览器中一样，所以我使用了 padding：

请记住，有多种方法可以做同样的事情。

I am using html2canvas to generate image from my html page.
When I enter my urlhttp://prompter.rareapps.org/prompt/prompt-save2.php?p=123
in webpage renderer of html2canvas website (http://html2canvas.hertzen.com/screenshots.html) my page is rendered corectly with background.
But when I generate my own canvas, I do not have the background. Here is my code
<script type="text/javascript"> $( document ).ready(function() { html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { window.location.href = canvas.toDataURL('image/jpeg'); } }); });
What did I miss?
Thanks
解决方案
This 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.
The problem is that version 0.5.0 is not ready for use, I reworked your html, see:
<!DOCTYPE html> <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.1 and 0.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.

这篇关于html2canvas缺少背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！