How To Generate "screenshot" Of Html Div With External Images?

I have a HTML div with external images. (The following is an example, but in the actual case I am using Amazon S3, so downloading and storing the image on the same server is not an

Solution 1:

Your JSFiddle given ReferenceError: Canvas2Image is not defined while hit on 'Save PNG' button. So check your code(not fiddle) for same error.

UPDATE See this JSFiddle example as reference. May this one will help you.

UPDATE 2 I place some code into your one, check it out. Hope this will be your solution..!

Working result with FF v44 and its working. Taken snap with JSFiddle code

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context objectvar img=newImage() //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 (12/29/2016) JSFiddle

After research, found that the problem is because we are only assigning the image source which is only pass message to the browser to retrieve the data.

Further image element is may be not really accessible with the browser when click to draw canvas from it. We are just tell code to load it and it's done.

Change code to solve OP's facing chrome issue like below:

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

UPDATE 4JSFiddle Make image position dynamic based on OP requirement.

Solution 2:

onrendered is no longer working..

i solved this problem by adding "allowTaint" option

{ allowTaint:true }

2018 solution:

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

Solution 3:

You may try to scan the image source for external urls and change them to your website and load them with php.

Something like

$(function() { 

  var imageproxy = "http://example.com/imageproxy.php"; //Change thisvar mydomain = newRegExp(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

<?phpif(!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;
}

note: php script is very simple, image detection is not working 100%, this is just ti give you an idea. If you use some php image libs to load and get image type you can do this just with few lines of code. you may also try with "php readfile".