Take full screenshot in Chrome

Question

I developed a little chrome extension, which takes a screenshot from the current page. The Problem is, when a part of the current area is covered by e.g. the inspector or not in view the screenshot gets cropped. Is there a way to get the full screen? Here my Code (stripped down):

function createScreenshot() {
  chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    chrome.tabs.captureVisibleTab({ format: "png" }, function (screenshotUrl) {
        cropImage(screenshotUrl, "Screenshot");
      });
  });
}

function cropImage(url, fileName) {
  var img = new Image();
  img.onload = function () {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    
    chrome.storage.sync.get(null, function(data) {
      downloadImage(canvas, fileName + ".png");
    });
  };
  img.src = url;
}

for example, this is the page i want to shot in a 4k res:

• source

as you can see, it doesn't fit to the actual screen resolution but the result is only the active area (even smaller):

• result

is there a way to get the "not visible" part?

Regrads, Martin

Answer 1

There is minor correction in your code

you have to pass canvas width, height in drawImage

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

You will need to get the base64 string

let image = canvas.toDataURL("image/png");

Finally, you will get the result you want

Hope this solution will help you