使用html2canvas网页截图并调整canvas大小

有人提到,使用html2canvas网页截图时,希望把canvas的大小进行调整,以更适合内容的填充。这其实可以通过JavaScript来实现,并且实现起来并不复杂。


使用html2canvas截图并调整canvas大小

demodownload

从本案例看到,canvas的大小区域发生了变化,而这一变化是可以通过JavaScript程序来实现的。

完整HTML代码

<HTML>
<HEAD>
<TITLE>截图并调整canvas大小</TITLE>
<link href="assets/css/style.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="node_modules/html2canvas.min.js"></script>
<style type="text/css">
body {margin:30px;}
</style>
</HEAD>


<body>
  <button onclick="screenshot()">点击截图</button>
  <div id='input'>
    <h2>这是一个测试</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/5
      canvas.height = h2c.height
      ctx.drawImage(h2c, 0, 0, h2c.width, h2c.height);
    });
  }
</script>
</HTML>

上述代码,关键的3行代码为:

canvas.width = h2c.width/5
canvas.height = h2c.height
ctx.drawImage(h2c, 0, 0, h2c.width, h2c.height);

h2chtml2canvas对象实例,canvas.width是定义canvas的宽度,canvas.height时定义canvas的高度;另外,h2c.width是网页截图宽度,h2c.height 是网页截图高度。大家可以试试更改这几个参数值,看看截图效果。

此外,drawImage 是调用的截图方法。

您可能对以下文章也感兴趣

  • 在JavaScript中使用jsPDF将HTML文件转换为PDF