html2canvas 缺少背景答案

【问题标题】：html2canvas missing backgroundhtml2canvas 缺少背景
【发布时间】：2020-05-11 18:36:48
【问题描述】：

我正在使用 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');
      }
    });
});

我错过了什么？

谢谢

【问题讨论】：

看过这里：github.com/niklasvh/html2canvas/issues/265 ??
谢谢。我尝试了他们推荐的修复方法，但没有一个对我有用。

标签： html background-image html2canvas

【解决方案1】：

这个问题在 0.5.0 版本中得到修复（但是 0.5.0 版本还没有准备好使用）。

但是有很多问题正在纠正中，基本功能还没有实现。

注意：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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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:

记住，做同一件事的方法不止一种。

【讨论】：

感谢 CSS 清理！ 0.5.0 什么时候准备好？我尝试了您的代码，但出现错误Refused to execute script from 'https://raw.githubusercontent.com/niklasvh/html2canvas/rc/build/html2canvas.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
没有发布日期。为您的服务器或 PC 下载 html2canvas-0.5.0-rc。准备好后最好使用 0.5.0 版本。 “0.5.0”版本已经完全重写，缺少很多功能，因为它无法防止“0.4.1”版本（作为“z-index”）的严重错误。
背景图像现在可以工作，但它只渲染可见部分。在我的测试中，它呈现了整个 div，包括不可见的部分 [link]prompter.rareapps.org/prompt/prompt-save3.php?p=123
嗨@GuilhermeNascimento，你能解释一下编辑吗？我有一个类似的问题。 HTML 标记上的背景图像（由 css 定义）没有呈现全高，就像它没有重复一样。
@Gabriel 如果没有示例，问题可能是任何事情我不能说这是错误还是您的错误。在stackoverflow.com/questions/ask 中创建一个问题:)

【解决方案2】：

在当前可用的最新版本 0.4.1 版本中，背景尺寸属性设置为封面的背景图像存在问题。

此页面中“fperich”提供的解决方案解决了我的问题： https://github.com/niklasvh/html2canvas/issues/265

根据他的解决方案，只需用以下语句更新版本 0.4.1 中的第 350 行：

topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);

【讨论】：

【解决方案3】：

显式设置背景样式例如。如果

...
 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;
     }

空白（黑色）背景已更正

【讨论】：