前端如何实现一个生成海报的功能Window.devicePixelRatio前端如何实现一个生成海报的功能 : Wind

github将html转成canvas的库：github.com/niklasvh/ht…

完整代码：

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            padding: 6px 10px;
            background: #31f111;
            border: none;
        }
        .view{
            width: 300px;
            height: 500px;
            background: yellow;
            text-align: center;
        }
        .view .title{
            padding-top: 30px;
            font-size: 25px;
        }
        .view .content{
            padding-top: 30px;
            

        }
    </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="xiaohui">小辉学前端</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; // dpi是为了获取分辨率，通过window原生的方法devicePixelRatio获取，相当于提高我们生成图片的分辨率
            let options = {
                useCORS:true, // 使用跨域
                ignoreElements:(ele)=>{
                    // 判断是否忽略这个元素 <p id="xiaohui">小辉学前端</p>
                    if(ele.id === 'xiaohui'){   
                        return true
                    }

                },
                scale:dpi // 设置默认值，提高图片分辨率
            };
            // document.querySelector("#capture") 获取生成图片的DOM区域
            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>
前端如何实现一个生成海报的功能Window.devicePixelRatio

github将html转成canvas的库：github.com/niklasvh/ht…

完整代码：

demo效果如下图：
