使用 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-imgCSS 类，height并且width两者都设置为 100%。

如此处所述，如果您为图像指定 100% 大小，则它将占用其容器的 100%。相反，您想要的是将屏幕截图保持其原始大小，因此不要为图像 CSS 指定任何大小就足够了。

我用这个稍微修改了您的 CodePen ，其中的屏幕截图似乎按您的预期工作。