Capture screenshot with Vue.js

Question

I followed the https://www.digitalocean.com/community/tutorials/vuejs-screenshot-ui steps to capture a screenshot using Vue.js. The screenshot is taken successfully, but the screenshot dimensions seem not to be correct.

Problem:

• The output should be the screenshot should be the selected one from the cursor. The output and the selected box from the cursor are different.

Issue: -I think, the issue is with the takeScreenshot method

takeScreenshot: function () {
  html2canvas(document.querySelector('body')).then(canvas => {
    let croppedCanvas = document.createElement('canvas'),
        croppedCanvasContext = croppedCanvas.getContext('2d');

    croppedCanvas.width  = this.boxEndWidth;
    croppedCanvas.height = this.boxEndHeight;

    croppedCanvasContext.drawImage(canvas, this.boxLeft, this.boxTop, 
    this.boxEndWidth, this.boxEndHeight, 0, 0, this.boxEndWidth, 
    this.boxEndHeight);

    this.imageUrl = croppedCanvas.toDataURL();
  
    const screenshotImg = document.getElementById('screenshotImg');
  
    screenshotImg.src= this.imageUrl;
    console.log('imageUrl', this.imageUrl)
  });
}

Would love to know if there's a fix or any other better way to take a screenshot. Thank you.

Codepen Link: https://codepen.io/dineshmadanlal/pen/MWjeXBQ

Answer 1

Looking at your original CodePen, I noticed that you are defining a .screenshot-img CSS class with height and width both set at 100%.

As described here, if you specify a 100% size for your image it will then take 100% of its container. Instead, the thing you want is keeping your screenshot at its original size, so do not specify any size for your image CSS should be enough.

I slightly modified your CodePen with this one, where the screenshot seems working as you're expecting.