I have done the screenshot button that have to make the screenshot of all body.

But on this screenshot google map is not dispayed. I used html2canvas library to do this. Here is the code :

HTML:

 <button type="button" class="btn btn-default btn-sm" id = 'screenShotBtn' onclick="takeScreenShot()"> 

JAVASCRIPT :

var takeScreenShot = function() {
var screenshot = {};
html2canvas(document.getElementById('screenAll'), {
    onrendered: function (canvas) {
        var tempcanvas=document.createElement('canvas');
        tempcanvas.width=1350;
        tempcanvas.height=700;
        var context=tempcanvas.getContext('2d');
        context.drawImage(canvas,0,0,1350,700,0,0,1350,700);
        var link=document.createElement("a");
        link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
        link.download = 'screenshot.jpg';
        link.click();
    }
});

And here is what I have when make the screenshot:

look here for screenshot

can you please tell me whats wrong?

I have done the screenshot button that have to make the screenshot of all body.

But on this screenshot google map is not dispayed. I used html2canvas library to do this. Here is the code :

HTML:

 <button type="button" class="btn btn-default btn-sm" id = 'screenShotBtn' onclick="takeScreenShot()"> 

JAVASCRIPT :

var takeScreenShot = function() {
var screenshot = {};
html2canvas(document.getElementById('screenAll'), {
    onrendered: function (canvas) {
        var tempcanvas=document.createElement('canvas');
        tempcanvas.width=1350;
        tempcanvas.height=700;
        var context=tempcanvas.getContext('2d');
        context.drawImage(canvas,0,0,1350,700,0,0,1350,700);
        var link=document.createElement("a");
        link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
        link.download = 'screenshot.jpg';
        link.click();
    }
});

And here is what I have when make the screenshot:

look here for screenshot

can you please tell me whats wrong?

• javascript
• google-maps
• screenshot
• html2canvas

Share Improve this question Follow edited Sep 18, 2017 at 14:08 mikemaccana 124k110110 gold badges432432 silver badges534534 bronze badges asked Sep 18, 2017 at 14:02 Olena ChabanOlena Chaban 12111 gold badge22 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I added those properties to code and it works:

var takeScreenShot = function() {
    var screenshot = {};
    html2canvas(document.getElementById('map'), {
        useCORS: true,
        optimized: false,
        allowTaint: false,
        onrendered: function (canvas) {
            var tempcanvas=document.createElement('canvas');
            tempcanvas.width=1350;
            tempcanvas.height=700;
            var context=tempcanvas.getContext('2d');
            context.drawImage(canvas,0,0,1350,700,0,0,1350,700);
            var link=document.createElement("a");
            link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
            link.download = 'screenshot.jpg';
            link.click();
        }
    });
}

    var fin = document.getElementById("map");

    html2canvas(fin, {
    useCORS: true,
    onrendered: function(canvas) {
        var dataUrl= canvas.toDataURL("image/png");
        $('#map_image').attr('src',dataUrl).show();
    }
  });