NO.021-网页元素如何长截图——By.杭州组

作者：启航
关键词：长截图，javascript

一.背景

使用网页截图指令的时候有些元素截图截取的不全，只能截取部分。如帮助中心左侧边栏截图

                         网页截图指令截取                                                     实际网页上面该元素截图

二.解决思路

使用 html2canvas 库的html2canvas() 方法用于将指定的元素渲染到 <canvas> 中，并返回一个 Promise 对象。然后，通过 then() 方法来处理 Promise 对象的结果，从 <canvas> 中获取图片数据 URL。创建一个新的a标签元素，将截图的数据 URL 设置为a标签元素的 href 属性，并使用js点击、处理下载对话框指令下载图片。

1.执行js脚本引入 html2canvas 库

function (element, input) {
    // 创建 script 元素
    var script = document.createElement('script');
    // 将 script 元素添加到文档中
    document.head.appendChild(script);
    // 设置 src 属性
    script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.2.2/dist/html2canvas.min.js';
}

2.在 JavaScript 文件中使用 html2canvas 库的 html2canvas() 方法来截取网页元素的长截图，并将其转化下载

// 需要获取截图元素的js路径
var element = document.querySelector("xxxxxxxx")
function get_image(){
    html2canvas(element, {
        useCORS: true, // 如果元素涉及来自其他域的图像，请设置为 true
    }).then(function(canvas) {
        // 将截取的长截图转为图片数据 URL
        var image = canvas.toDataURL('image/png',1);
        // 创建一个a标签元素
        var a = document.createElement('a')
        document.body.appendChild(a)
        // a标签元素的href属性等于图片数据URL
        a.href = image
        // 设置下载链接的文件名为'pic'
        a.download = 'pic'
        // 触发链接被点击的事件，点击下载图片
        a.click()
        });
}
get_image()

因影刀运行的时候是在影刀域中执行的js脚本，而上面的脚本在影刀域里面不生效，需要在全局作用域里面执行，故需要创建一个script标签，把上述代码写入到script标签的innerHTML属性中，直接在全局生效。

function (element, input) {
    // 创建 script 元素
    var script1 = document.createElement('script');
    // 将 script 元素添加到文档中
    document.body.appendChild(script1);
    // 设置 innerHTML 属性
    script1.innerHTML = `
        // 需要获取截图元素的js路径
        var element = document.querySelector("xxxxxxxxxx")
        function get_image(){
            html2canvas(element, {
                useCORS: true, // 如果元素涉及来自其他域的图像，请设置为 true
            }).then(function(canvas) {
                // 将截取的长截图转为图片数据 URL
                var image = canvas.toDataURL('image/png',1);
                // 创建一个a标签元素
                var a = document.createElement('a')
                document.body.appendChild(a)
                // a标签元素的href属性等于图片数据URL
                a.href = image
                // 设置下载链接的文件名为'pic'
                a.download = 'pic'
                // 触发链接被点击的事件，点击下载图片
                a.click()
                });
        }
        get_image()
    `;}

代码中需要修改的地方是截图元素的js路径 ，如何获取呢？

三.完整代码截图

以帮助中心为例：

https://www.yingdao.com/yddoc/command-doc/fe4f833ac591699a2e9ebcf679e992b4.html?

四.效果展示

五.最后

某些网址不适用，如不能引入html2canvas库的网址以及某些特殊的网址。

目前1.1版本的影刀插件支持上述操作，0.0.0.5版本的影刀插件不支持