tool-box
/
picture.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端生成海报</title>
    <style>
          * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .view {
            width: 375px;
            height: 667px;
            position: relative;
            color: #FFFFFF;
            text-align: center;
            font-size: 20px;
            background: #4044ff;
        }

        .title {
            width: 100%;
            font-size: 30px;
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
        }

        .content {
            width: 100%;
            font-size: 16px;
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
        }

        .result {
            width: 375px;
            height: 667px;
        }

        .result>img {
            width: 100%;
            height: 100%;
        }

        .btn {
            padding: 10px;
        }

        button {
            padding: 6px 10px;
            background: #31f111;
            border: none;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
</head>
<body>
    <div class="btn">
        <button onclick="saveFile()">保存海报</button>
        <button onclick="drawImage()">生成图片</button>
    </div>
    <div id="capture" class="view">
        <div class="title">海报标题：大伟聊前端</div>
        <div class="content">
            <p>海报内容</p>
            <p id='dawei'>大伟聊前端</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>
            <p>前端训练营</p>

        </div>
    </div>
    <br>
    <hr>
    <div id="result" class="result"></div>

    <script>
        //保存图片
        function saveFile() {
            // devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。
            // 此值也可以解释为像素大小的比率：一个CSS 像素的大小与一个物理像素的大小。
            // 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS 像素
            // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
            let dpi = window.devicePixelRatio || 2
            let options = {
                useCORS: true, // 使用跨域
                ignoreElements: (ele) => {
                    if(ele.id==='dawei') {
                        return true
                    }
                },
                scale: dpi //设置默认值 提高图片分辨率
            };
            html2canvas(document.querySelector("#capture"), options).then(canvas => {
                // document.body.appendChild(canvas)
                canvas.toBlob(function (blob) {
                    downloadBob(blob);
                });
            });
        }
        //生成图片
        function drawImage() {
            let dpi = window.devicePixelRatio || 2
            let options = {
                useCORS: true,
                ignoreElements: false,
                scale: dpi //设置默认值 提高图片分辨率
            };
            html2canvas(document.querySelector("#capture"), options).then(canvas => {
                let url = canvas.toDataURL('image/png') // 将canvas转成base64图片格式
                document.querySelector('#result').innerHTML = `<img src="${url}"  alt="大伟聊前端" />`
            });
        }

        // 下载不了的 生成图片长按保存
        function downloadBob(blob) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(blob);
            var filename = '大伟聊前端.png';
            a.href = url;
            a.download = filename;
            a.click();
            // 当图片文件加载完成，释放这个url
            window.URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>