¿Cómo generar una “captura de pantalla” de html div con imágenes externas?

No olvides que en las ciencias un error casi siempre tiene diversas soluciones, de igual modo te enseñamos la mejor y más eficiente.

Solución:

Tu JSFiddle dado ReferenceError: Canvas2Image is not defined mientras presiona el botón ‘Guardar PNG’. Así que verifique su código (no violín) para el mismo error.

ACTUALIZAR

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

ACTUALIZAR 2

Coloco un código en el tuyo, compruébalo. Espero que esta sea tu solución..!

Resultado de trabajo con FF v44 y su funcionamiento. Snap tomado 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);
            
        );
    );
);

ACTUALIZAR 3 (29/12/2016) JSFiddle

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

Es posible que no se pueda acceder realmente a otros elementos de la imagen con el navegador cuando se hace clic para dibujar un lienzo a partir de él. Solo le decimos al código que lo cargue y listo.

Cambie el código para resolver el problema de cromo de OP como se muestra a continuación:

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

ACTUALIZAR 4 JSFiddle
Haga que la posición de la imagen sea dinámica según los requisitos de OP.

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);
);

Puede intentar escanear la fuente de la imagen en busca de direcciones URL externas y 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 = $('Download





');
            link.attr('download', 'test.png');
            link.attr('href', canvas.toDataURL());

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

imageproxy.php

 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 usa algunas bibliotecas de imágenes de php para cargar y obtener el tipo de imagen, puede hacerlo con solo unas pocas líneas de código. también puede probar con “php readfile”.

Te mostramos las comentarios y valoraciones de los lectores

Puedes añadir valor a nuestra información tributando tu veteranía en las observaciones.

---

---

Utiliza Nuestro Buscador