学pchome截图-用html2canvas转成canvas,再下载

用html2canvas转成canvas,再下载

载入js,js会把div里的东西,转换成canvas

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

准备容器,把要截图的内容,包在里面(等等转成canvas)

    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>        
    </div>

将canvas下载成jpg

    <script>
        function block_capture() {
            html2canvas(document.querySelector("#capture")).then(function (canvas) {              
                a = document.createElement('a');//add canvas
                a.href = canvas.toDataURL("image/jpeg", 0.92).replace("image/jpeg", "image/octet-stream");//toDataURL将canvas转成base64
                //下载成png     toDataURL("image/png")
                //下载成jpg     toDataURL("image/jpeg")
                a.download = 'image.jpg';
                a.click();
            });
        }
    </script>

全文

<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <meta charset=" UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <title>JavaScript canvas</title>
    <style>
        button{
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
        <table><tr><td>3333</td></tr></table>
    </div>
    <button onclick="block_capture()">Click</button>
    <script>
        function block_capture() {
            html2canvas(document.querySelector("#capture")).then(function (canvas) {
                a = document.createElement('a');
                a.href = canvas.toDataURL("image/jpeg", 0.92).replace("image/jpeg", "image/octet-stream");
                a.download = 'image.jpg';
                a.click();
            });
        }
    </script>
</body>

</html>

ref
https://mnya.tw/cc/word/1573.html

<<: [REPORT] IMAGE BASE64

>>: ISO 27001 资讯安全管理系统【解析】(十五)