I followed the 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:

I followed the https://www.digitalocean./munity/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

• javascript
• vue.js

Share Follow edited Dec 20, 2020 at 19:02 Or Assayag 6,3641313 gold badges7272 silver badges109109 bronze badges asked Dec 8, 2020 at 12:32 Dinesh MadanlalDinesh Madanlal 34755 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

I changed style for fit screen shot size:

.screenshot-img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

and refactored your code:

getSelectRect: function() {
  const [left, top] = [Math.min(this.startX, this.endX), Math.min(this.startY, this.endY)]
  const [right, bottom] = [Math.max(this.startX, this.endX), Math.max(this.startY, this.endY)]
  const [width, height] = [right - left, bottom - top];
  return {left, top, right, bottom, width, height};
},
drawShadow: function() {
  const verticalScrollBarWidth = 16;
  const rc = this.getSelectRect() 
  this.boxTop = rc.top;
  this.boxLeft = rc.left;
  this.boxEndWidth = rc.width
  this.boxEndHeight = rc.height
  this.borderWidth = rc.top + "px " + 
    (this.windowWidth - rc.right - verticalScrollBarWidth) + "px " + 
    (this.windowHeight - rc.bottom) + "px " +
    rc.left + "px";
},
placeTooltip: function({startX , startY,  endX, endY}) {
  if (endX >= startX && endY >= startY) {
    this.toolTipLeft = (endX + this.toolTipWidth >= this.windowWidth) 
      ? this.windowWidth - this.toolTipWidth - (TOOLTIP_MARGIN * 2)
      : endX;
    this.toolTipTop = (endY + this.toolTipHeight + (TOOLTIP_MARGIN * 2) >= this.windowHeight)
      ? this.windowHeight - this.toolTipHeight - (TOOLTIP_MARGIN * 2)
      : endY;
  } else if (endX <= startX && endY >= startY) {
    this.toolTipLeft = (endX - this.toolTipWidth <= 0) 
      ? TOOLTIP_MARGIN
      : endX - this.toolTipWidth;
    this.toolTipTop = (endY + this.toolTipHeight + (TOOLTIP_MARGIN * 2) >= this.windowHeight) 
      ? this.windowHeight - this.toolTipHeight - (TOOLTIP_MARGIN * 2)
      : endY;
  } else if (endX >= startX && endY <= startY) {
    this.toolTipLeft = (endX + this.toolTipWidth >= this.windowWidth) 
      ? this.windowWidth - this.toolTipWidth - (TOOLTIP_MARGIN * 2)
      : endX;
     this.toolTipTop = (endY - this.toolTipHeight <= 0) 
      ? TOOLTIP_MARGIN
      : endY - this.toolTipHeight;
  } else if (endX <= startX && endY <= startY) {
    this.toolTipLeft = (endX - this.toolTipWidth <= 0) 
      ? TOOLTIP_MARGIN
      : endX - this.toolTipWidth;
    this.toolTipTop = (endY - this.toolTipHeight <= 0) 
      ? TOOLTIP_MARGIN
      : endY - this.toolTipHeight;
  }
},  
move: function (e) {
  this.crossHairsTop = e.clientY;
  this.crossHairsLeft = e.clientX;
  var tooltipBoundingRect = tooltip.getBoundingClientRect();
  this.toolTipWidth = tooltipBoundingRect.width;
  this.toolTipHeight = tooltipBoundingRect.height;
  this.isDragging = this.mouseIsDown;
  if (this.isDragging) {
    const endY = this.endY = e.clientY;
    const endX = this.endX = e.clientX;
    const startX = this.startX;
    const startY = this.startY;
    this.placeTooltip({startX , startY,  endX, endY})  
    this.drawShadow()
  }
},
mouseDown: function (e) {
  this.borderWidth = this.windowWidth + "px " + this.windowHeight + "px"; 
  this.startX = e.clientX;
  this.startY = e.clientY;
  this.toolTipWidth = tooltip.getBoundingClientRect().width;
  this.mouseIsDown = true;
  this.tookScreenShot = false;
},
mouseUp: function (e) {
  if (this.isDragging) {
    this.endX = e.clientX;
    this.endY = e.clientY;
    this.isDragging = false;
    this.mouseIsDown = false;
    this.takeScreenshot()
    this.tookScreenShot = true;
  }
},
takeScreenshot: function () {
  const rc = this.getSelectRect()
  html2canvas(document.querySelector('body')).then(canvas => {
    const croppedCanvas = document.createElement('canvas');
    croppedCanvas.width  = rc.width
    croppedCanvas.height = rc.height
    const croppedCanvasContext = croppedCanvas.getContext('2d');
    croppedCanvasContext.drawImage(
      canvas,
      rc.left, rc.top, rc.width, rc.height,
      0, 0, rc.width, rc.height
    );
    this.imageUrl = croppedCanvas.toDataURL();
    const screenshotImg = document.getElementById('screenshotImg');
    screenshotImg.src= this.imageUrl;
  });
}

I Hope it works as you wish now, of course, the code needs to be improved see sandbox