javascript - example - ¿Cómo generar la “captura de pantalla” de html div con imágenes externas?

screenshot javascript html5

Question

Tengo un div HTML con imágenes externas. (El siguiente es un ejemplo, pero en el caso real, estoy usando Amazon S3, así que descargar y almacenar la imagen en el mismo servidor no es una opción) Actualmente estoy usando html2canvas para convertir el div en imagen. Sin embargo, la imagen externa siempre se reemplaza por un espacio en blanco.

El código que utilizo para capturar la imagen:

$(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);
            }
        });
    });
}); 

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

Puedo usar otra biblioteca. También puedo hacer eso en el backend. (Estoy usando PHP + laravel 5 para backend) ¿Hay alguna manera de generar una "captura de pantalla" del div HTML con imágenes externas?

Actualizar La respuesta actual está trabajando después de la edición. Sin embargo, para mi uso real, habrá una imagen múltiple con su posición establecida por el usuario al arrastrar y soltar. Todavía puedo obtener la posición, pero sería mejor para mí si es posible no establecer la posición específicamente.

Answer 1

Puede intentar escanear la fuente de la imagen en busca de direcciones URL externas, cambiarlas a su sitio web y cargarlas con php.

Algo como

$(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;
}

nota: el script php es muy simple, la detección de imágenes no funciona al 100%, esto es solo para darle una idea. Si utiliza algunas librerías de imágenes php para cargar y obtener el tipo de imagen, puede hacerlo solo con unas pocas líneas de código. También puedes probar con "php readfile".

Answer 2

Su JSFiddle dado ReferenceError: Canvas2Image is not defined cuando se pulsa el botón ''Guardar PNG''. Así que revisa tu código (no el violín) para el mismo error.

ACTUALIZAR
Vea este ejemplo de JSFiddle como referencia. Que este te ayude.

ACTUALIZACIÓN 2
Pongo un código en el tuyo, échale un vistazo. Espero que esta sea tu solución ..!

Resultado de trabajo con FF v44 y su funcionamiento. Tomado a presión con el código JSFiddle

$(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);
            }
        });
    });
});

ACTUALIZACIÓN 3 (29/12/2016) JSFiddle

Después de la investigación, descubrimos que el problema se debe a que solo estamos asignando la fuente de la imagen que solo es pasar el mensaje al navegador para recuperar los datos.

Otro elemento de la imagen puede no ser realmente accesible con el navegador cuando se hace clic para dibujar un lienzo. Solo estamos indicando código para cargarlo y ya está.

Cambie el código para resolver el problema de Chrome que enfrenta OP como a continuación:

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

ACTUALIZACIÓN 4 JSFiddle
Haga que la posición de la imagen sea dinámica según el requisito de OP.

Answer 3

onrendered ya no funciona ..

Resolví este problema agregando la opción "allowTaint"

{ allowTaint: true }

Solución 2018:

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