html2canvas fehlenden hintergrund

Ich bin mit html2canvas zu generieren Bild von meiner html-Seite.

Wenn ich meine url
http://prompter.rareapps.org/prompt/prompt-save2.php?p=123

in Webseite-renderer von html2canvas website (http://html2canvas.hertzen.com/screenshots.html) meine Seite gerendert wird, richtig mit hintergrund.

Aber wenn ich die Erstellung meiner eigenen Leinwand, ich habe nicht den hintergrund. Hier ist mein 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');
      }
    });
});

Hab ich was verpasst?

Dank

Sah Sie hier: github.com/niklasvh/html2canvas/issues/265 ??
Danke. Ich versuchte Ihre empfohlene Lösung, aber keine Arbeit für mich.

InformationsquelleAutor Wayne | 2014-03-21

  1. 1

    Dieses problem wurde in version 0.5.0 (Aber version 0.5.0 ist noch nicht einsatzbereit).

    Aber eine Menge Probleme, die behoben werden und die grundlegenden Funktionen, die noch nicht umgesetzt worden.

    Hinweis: html2canvas ist kein Datum Prognose für die 0.5.0 Version
    Hinweis: die version 0.4.1 nicht länger updates erhält

    Das problem ist, dass die version 0.5.0 ist nicht für die Verwendung bereit, überarbeitete ich den html-Code, siehe:

    <!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>
    • Arbeitete in 0.4.1 und 0.5.0-rc.
    • Arbeitete in Chrome und Firefox.

    Beachten Sie, dass ich erstellt eine Funktion namens save(), so können Sie wechseln zwischen onrendered (version 0.4.1) oder then (version 0.5.0-rc).

    Ich Ihre hintergrund und eine <DIV> nicht geändert <html> und nicht die <body> weil die "html2canvas" ist nicht smart genug zu verstehen, die Manipulationen overflow: im Fenster.

    Beachten Sie, dass die margin:; in Ihrem letzten Absatz (<p>) verursacht Probleme sowohl in "html2canvas" wie in "Webkit" - browser, so habe ich padding:

    Denk daran, es gibt mehr als einen Weg, um das gleiche zu tun.

    Vielen Dank für die css bereinigen! Wann wird 0.5.0 fertig? Ich versuchte Ihren code, aber es wird immer Fehler 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.
    Kein Datum für die Veröffentlichung. Download html2canvas-0.5.0-rc auf Ihrem server oder PC. Benutze lieber die version 0.5.0, wenn es bereit ist. Die version "0.5.0" wurde komplett neu geschrieben und fehlen viele Funktionen, denn es ist nicht zu verhindern, dass die schwerwiegenden bugs der version "0.4.1" (als "z-index").
    das Hintergrundbild funktioniert jetzt aber nur leisten, der sichtbare Teil. auf meinem test-hier macht es das ganze div-einschließlich der nicht sichtbaren Teil [link]prompter.rareapps.org/prompt/prompt-save3.php?p=123
    Ich update meine Antwort.
    Hi @GuilhermeNascimento, könnten Sie erklären, ein wenig, aber über den Bearbeiten? Ich habe ein ähnliches Problem. Hintergrund Bild (definiert durch css) HTML-tag ist nicht rendering in voller Höhe, wie es war, nicht zu wiederholen.

    InformationsquelleAutor Guilherme Nascimento

  2. 1

    explizit einen hintergrund-Stil
    ZB. wenn

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

    die pdf-Datei hat leere (schwarzen) hintergrund,

    nun, wenn Sie hinzufügen von CSS-Stil

     body {
         background-color: white;
     }

    das leere (schwarze) hintergrund ist korrigiert

    InformationsquelleAutor fred-user2791470

  3. 1

    Gibt es ein problem mit den hintergrund Bildern, deren hintergrund-Größe-Attribute gesetzt sind, als Abdeckung in der 0.4.1 version, die ist die neueste version, die derzeit verfügbar sind.

    Die Lösung von 'fperich' auf dieser Seite mein problem gelöst:
    https://github.com/niklasvh/html2canvas/issues/265

    Gemäß seiner Lösung, aktualisieren Sie einfach die Linie 350 in der version 0.4.1 mit der folgenden Anweisung:

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

    InformationsquelleAutor burakhan alkan

Schreibe einen Kommentar