相关疑难解决方法(0)

如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽度:高度比？

示例:stackoverflow.com - 当图像插入编辑器面板并且图像太大而无法放入页面时,图像会自动调整大小.

我按照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