如何从 html2Canvas 调整 DIV 中的画布输出大小？答案

【问题标题】：How to resize canvas output in DIV from html2Canvas?如何从 html2Canvas 调整 DIV 中的画布输出大小？
【发布时间】：2021-07-09 22:52:19
【问题描述】：

以下代码使用 html2canvas 截取屏幕截图，并将 base64 字符串输出到输入字段，并将屏幕截图附加到画布（以下代码在 sn-p 中不起作用，但在网站上完全起作用）.. I尝试使用普通 HTML 和 CSS 在<div id="output"...> 上设置宽度和高度，并搜索以使用 JavaScript/jQuery 将输出图像缩放到屏幕上的较小尺寸，但没有任何效果，它会打印完整的宽度和高度无论我做什么都到屏幕上.. 有人可以指导我如何解决这个问题吗？

function screenshot() {
  html2canvas(document.body, {
    background: '#fff'
  }).then(function(canvas) {

    document.body.appendChild(canvas);

    // Get base64URL
    var base64URL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
    console.log(base64URL);
    document.getElementById('screenshot_input').value = base64URL;
    document
      .getElementById('output')
      .appendChild(canvas);

  });
}

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<button onclick="screenshot()">Take Screenshot</button


<br>
<h2>This is the Canvas</h2>
<h3>This is more Canvas</h3>
<br>

This is an input with Base64 output: <input name="screenshot" type='text' id='screenshot_input' />
<br>
<br>

Below here should be the screenshot (Not working in this Snippet but on webpage)
<div id="output" style="width: 50%; height: 50%;"></div>

【问题讨论】：

标签： javascript jquery html5-canvas html2canvas

【解决方案1】：

我要做的是创建一个永久画布，然后我们在其中绘制。

在此处查看工作示例：
https://raw.githack.com/heldersepu/hs-scripts/master/HTML/screenshot.html

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<body>
  <button onclick="screenshot()">Take Screenshot</button>
  <div id='input'>
    <h2>This is a test</h2>
    <h3>Hello World</h3> <br>
    Base64 output:
    <input name="screenshot" type='text' id='screenshot_input' /><br><br>
  </div>
  <div id="output">
    <canvas id=c width=100 height=100 style="border:1px solid #000;"></canvas>
  </div>
</body>

<script>
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');

  function screenshot() {
    html2canvas(document.getElementById('input'), {
      background: '#fff'
    }).then(function(h2c) {
      var base64URL = h2c.toDataURL('image/png').replace('image/png', 'image/octet-stream');
      document.getElementById('screenshot_input').value = base64URL;
      console.log(base64URL);

      canvas.width = h2c.width/2
      canvas.height = h2c.height/2
      ctx.drawImage(h2c, 0, 0, h2c.width/2, h2c.height/2);
    });
  }
</script>

就像我们可以调整画布的大小以及我们正在拍摄的图像/屏幕截图一样，在这种情况下，我将图像制作为原始大小的一半

【讨论】：

嗨@Helder Sepulveda ..您的解决方案在“平面”HTML文件中使用时效果很好，但是在将它放在模态中时我无法让它工作（我的坏事是我没写）..我做了以下小提琴给你看：jsfiddle.net/skolbaek/2ywzvbrL/3..知道如何解决吗？ ..（注意！我不得不将 ctx 更改为 ctxScreen，因为它正在破坏我的一个页面上的图表 :-)）
SORRY .. 它的工作原理应该如此，我没有看到你将 html2canvas(document.body, { 更改为 html2canvas(document.getElementById('input'), { 并且当我将其更改回来时，它确实可以正常工作.. 这是一个工作小提琴： jsfiddle.net/skolbaek/2ywzvbrL/7 .. 谢谢！！ :-)