javascript - 使用 Vue.js 截取屏幕截图

Question

我关注了https://www.digitalocean.com/community/tutorials/vuejs-screenshot-ui使用 Vue.js 捕获屏幕截图的步骤。截图成功，但截图尺寸似乎不正确。
问题:

输出应该是屏幕截图应该是从光标中选择的。光标的输出和选定的框是不同的。

问题:
-我认为，问题在于 takeScreenshot 方法

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)
  });
}

很想知道是否有修复或任何其他更好的截屏方法。谢谢你。
Codepen 链接: https://codepen.io/dineshmadanlal/pen/MWjeXBQ

Answer 1

查看您原来的 CodePen，我注意到您正在定义 .screenshot-img带有 height 的 CSS 类和 width两者都设置为 100%。
如所述here ，如果您为图像指定 100% 的大小，它将占用其容器的 100%。相反，您想要的是将屏幕截图保持在其原始大小，因此不要为您的图像 CSS 指定任何大小就足够了。
我用 this one 稍微修改了你的 CodePen ，屏幕截图似乎按您的预期工作。