JS实现浏览器截图、JS实现Html转图片功能之html2canvas

柔光的暖阳◎ 2023-02-13 04:56 22阅读 0赞

**一、html2canvas**

Screenshots with JavaScript

官网地址：[http://html2canvas.hertzen.com/][http_html2canvas.hertzen.com]

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。·

它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片

使用案例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../plugins/html2canvas.min.js"></script>
    </head>
    
    <body>
        <div id="capture" style="padding: 10px; background: #f5da55">
            <h4 style="color: #000; ">Hello world!</h4>
            <p>asdfasdfasdf</p>
            
            <p>这是一张跨域图片</p>
            <img src="http://p7.qhimg.com/t01ceede0272d4b5a8b.png" alt="来个跨区的图片" style="width:50px;height:50px;"> 
        </div>
    
        <hr>
        <script>
            html2canvas(document.querySelector("#capture"),{
                useCORS: true  // 允许加载跨域图片 ，同时需要对应服务器设置图片跨域
            }).then(canvas => {
                document.body.appendChild(canvas)
            });
        </script>
    </body>
    
    </html>

展示结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70][]

二、**滚动截屏**  
将目标区域Dom克隆，并设置克隆Dom的狂傲，截图克隆区域即可

const targetDom = document.querySelector("#admin")
    const copyDom = targetDom.cloneNode(true)
    copyDom.style.width = targetDom.scrollWidth + 'px'
    copyDom.style.height = targetDom.scrollHeight + 'px'
    document.body.appendChild(copyDom)
    html2canvas(copyDom, {
        allowTaint: false,
        useCORS: true,
        height: targetDom.scrollHeight,
        width: targetDom.scrollWidth
    }).then(canvas => {
    // canvas
    });

三、截屏区域有跨域图片

// allowTaint: false   不允许跨域图片污染画布
    // useCORS: true   允许加载跨域图片

四、下载图片

// 插入之前canvas下
    html2canvas(copyDom, {
                        allowTaint: false,
                        useCORS: true,
                        height: targetDom.scrollHeight,
                        width: targetDom.scrollWidth
                    }).then(canvas => {
                        this.printShow = true
                        copyDom.parentNode.removeChild(copyDom)
                        // console.log(canvas.style.width)
                        canvas.style.width = parseFloat(canvas.style.width) * 0.8 + 'px'
                        canvas.style.height = parseFloat(canvas.style.height) * 0.8 + 'px'
                        setTimeout(() => {
                            const container = document.querySelector('#view')
                            while (container.hasChildNodes()) {
                                container.removeChild(container.firstChild)
                            }
                            // toImage
                            const dataImg = new Image()
                            dataImg.src = canvas.toDataURL('image/png')
                            document.querySelector('#view').appendChild(dataImg)
    
                            const alink = document.createElement("a");
                            alink.href = dataImg.src;
                            alink.download = "testImg.jpg";
                            alink.click();
                        }, 0)
                    });

## [Jquery插件之js打印，Div打印][Jquery_js_Div] ##

## [日本地图选择插件、日本地区选择插件][Link 1] ##

## [ JQuery手机版日期选择控件之jdate(jquery-date)][JQuery_jdate_jquery-date] ##

[http_html2canvas.hertzen.com]: http://html2canvas.hertzen.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527150357486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk=,size_16,color_FFFFFF,t_70
[Jquery_js_Div]: https://blog.csdn.net/u011127019/article/details/105879888
[Link 1]: https://blog.csdn.net/u011127019/article/details/105755127
[JQuery_jdate_jquery-date]: https://blog.csdn.net/u011127019/article/details/103323508