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

一、html2canvas

Screenshots with JavaScript

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

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

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

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

使用案例：

    
    
    
    



    

        
Hello world!
        
asdfasdfasdf
        
        
这是一张跨域图片
         
    

    

    

展示结果：

二、滚动截屏
将目标区域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手机版日期选择控件之jdate(jquery-date)