wake-up-neo.com

Wie erzeugt man einen Screenshot von HTML Div mit externen Bildern?

Ich habe ein HTML-Div mit externen Bildern. (Das folgende Beispiel ist ein Beispiel, aber im konkreten Fall verwende ich Amazon S3. Das Herunterladen und Speichern des Images auf demselben Server ist keine Option.) Derzeit verwende ich html2canvas , um das Div in ein Image zu konvertieren. Das externe Bild wird jedoch immer durch ein Leerzeichen ersetzt.

Der Code, den ich zum Erfassen des Bildes verwende:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
}); 

Editiert: jsfiddle: https://jsfiddle.net/0y2zxxL8/3/

Ich kann eine andere Bibliothek verwenden. Ich kann das auch im Backend machen. (Ich verwende PHP + Laravel 5 für das Backend). Gibt es eine Möglichkeit, einen "Screenshot" des HTML-Div mit externen Bildern zu erstellen?

Update Die aktuelle Antwort funktioniert nach der Bearbeitung. Für meine tatsächliche Verwendung wird es jedoch mehrere Bilder geben, deren Position vom Benutzer durch Ziehen und Ablegen festgelegt wird. Ich kann die Position immer noch bekommen, aber es wäre besser für mich, wenn die Position nicht spezifisch eingestellt werden kann.

16
cytsunny

Ihr JSFiddle hat ReferenceError: Canvas2Image is not defined gegeben, während Sie auf 'Save PNG' geklickt haben. Überprüfen Sie also Ihren Code (nicht Geige) auf denselben Fehler.

UPDATE
Sehen Sie sich dieses JSFiddle Beispiel als Referenz an. Möge dieser dir helfen.

UPDATE 2
Ich gebe etwas Code in Ihren ein, checke es aus. Hoffe das wird deine Lösung sein ..!

Arbeitsergebnis mit FF v44 und seine Arbeit. Schnappschuss mit JSFiddle Code enter image description here

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context object
                var img=new Image() //creates a variable for a new image

                img.src= "http://lorempixel.com/400/200/"; // specifies the location of the image
                context.drawImage(img,0,50); // draws the image at the specified x and y location
                // Convert and download as image 
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

UPDATE 3 (29.12.2016) JSFiddle

Nach einer Recherche stellte sich heraus, dass das Problem darin liegt, dass wir nur die Bildquelle zuweisen, die nur eine Nachricht an den Browser übermittelt, um die Daten abzurufen. 

Auf weitere Bildelemente kann mit dem Browser möglicherweise nicht wirklich zugegriffen werden, wenn Sie darauf klicken, um die Leinwand zu zeichnen. Wir sagen nur Code, um ihn zu laden und fertig.

Ändern Sie den Code, um OPs zu lösen, die sich mit Chromproblemen wie folgt beschäftigen

img.onload = function() {
  context.drawImage(img, 0, 50);// draws the image at the specified x and y location
}

UPDATE 4 _ ​​ JSFiddle
Dynamische Bildposition basierend auf der OP-Anforderung.

Sie können versuchen, die Bildquelle nach externen URLs zu scannen, diese auf Ihrer Website zu ändern und sie mit PHP zu laden.

So etwas wie

$(function() { 

  var imageproxy = "http://example.com/imageproxy.php"; //Change this
  var mydomain = new RegExp(location.Host);

  $("#btnSave").click(function() { 

    $("#widget").find('img').each(function(){

       var img_src = $(this).attr('src');
       if(!mydomain.test(img_src)){
           $(this).attr('src', imageproxy + "?url=" + encodeURIComponent(img_src));
       }
    });

    html2canvas($("#widget"), {
        onrendered: function(canvas) {

            var link = $('<a target="_blank">Download</a>');
            link.attr('download', 'test.png');
            link.attr('href', canvas.toDataURL());

            $("#btnSave").after(link);
        }
    });
  });
}); 

imageproxy.php

<?php

if(!empty($_GET['url'])){

    $url = urldecode($_GET['url']);
    $img_type = "image/jpeg";

    $chunks = explode('.', $url);

    if(is_array($chunks) && count($chunks) > 1){
        $ext = end($chunks);

        switch ($ext){

            case 'jpg':
            case 'jpeg':
                $img_type = "image/jpeg";
            break;

            case 'png':
                $img_type = "image/png";
            break;

            case 'gif':
                $img_type = "image/gif";
            break;
        }
    }


    $img = file_get_contents($url);

    header ("Content-Type: $img_type");
    echo $img;
}

hinweis: Das PHP-Skript ist sehr einfach, die Bilderkennung funktioniert nicht zu 100%. Dies ist nur eine Idee. Wenn Sie PHP-Image-Bibliotheken zum Laden und Abrufen des Image-Typs verwenden, können Sie dies mit nur wenigen Codezeilen tun. Sie können es auch mit "php readfile" versuchen.

1
sulest

onrendered funktioniert nicht mehr ..

ich habe dieses Problem durch Hinzufügen der Option "allowTaint" gelöst

{ allowTaint: true }

Lösung von 2018:

html2canvas(document.getElementById('result'), { allowTaint: true }).then(function (canvas) {
    document.body.appendChild(canvas);
});
0
r3mus