网页截图,html2canvas简单示例

  <div id="box">
        <p>asd4a5s6fa6s5f1asf</p>
        <img style="width:200px" src="xxxxxx.png" />
        <button style="width:100px;height:30px" onclick="prtsc()">prtsc</button>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
    <script>
        function prtsc() {
            html2canvas(document.getElementById('box'), {
                allowTaint: true,
                useCORS: true,
            }).then(canvas => {
                document.getElementById('box').after(canvas)
            });
        }
    </script>

图片需要在后端配置允许跨域,否则不会显示

或者可以将图像src转为base64,可以解决一部分跨域问题