js实现一键任意html元素生成截图功能

Dan.Qiao

已于 2024-07-13 12:18:02 修改

阅读量653

点赞数 16

文章标签： javascript html 前端 html元素转图片一键截图

于 2024-07-13 11:57:25 首次发布

本文链接：https://blog.csdn.net/ACBC12345/article/details/140397477

版权

最近在搞一个项目，用户需要截图datatable表格，表格出现滚动条时，用户需要滚动表格并截图多次，截图大小不一，比较麻烦，于是我实现一键生成html任意元素截图的功能，对于出现滚动条看不见的元素也能生成图片，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
    <title>Canvas to Image</title>
</head>
<body>

<div id="mydiv" style="background-color:yellow">1</div>
<div id="mydiv2" style="background-color:red">2</div>
<div id="mydiv3" style="background-color:black">3</div>
<div id="mydiv4" style="background-color:purple">4</div>

<button id="pic_btn">Convert to Image</button>

<script>

$("#pic_btn").click(function(){
    convert_elements_to_image_and_download(["#mydiv", "#mydiv2", "#mydiv3", "#mydiv4"]);
})

async function convert_elements_to_image_and_download(array_ele_selectors, is_vertical=true) {
    // 元素img data保存列表
    let array_ele_img_datas = new Array();
    // 元素img 宽度保存列表
    let array_ele_img_widths = new Array();
    // 元素img 高度保存列表
    let array_ele_img_heights = new Array();
    for(let i=0; i < array_ele_selectors.length; i++){
        let selector = document.querySelector(array_ele_selectors[i]);
        array_ele_img_datas.push(await generate_img_data(selector));
        array_ele_img_widths.push(get_ele_width(selector));
        array_ele_img_heights.push(get_ele_height(selector));
    }

    let img_data = null;
    if(is_vertical){
        //垂直排列合并元素图片
        img_data = await vertical_merge_elements_pic(
            array_ele_img_datas,
            array_ele_img_widths,
            array_ele_img_heights);
    }else{
       console.log("Not support yet!");
       return false;
    }

    download_picture(img_data);
}

async function vertical_merge_elements_pic(array_ele_img_datas,
                                     array_ele_img_widths,
                                     array_ele_img_heights){
    // 垂直方向合并各个元素图片

    let total_height = 0;
    let max_width = 0;
    for(let i=0; i < array_ele_img_datas.length; i++){
        total_height += array_ele_img_heights[i];
        if(max_width < array_ele_img_widths[i]){
            max_width = array_ele_img_widths[i];
        }
    }

    // 创建canvas元素
    var canvas = document.createElement('canvas');
    // 设置canvas的宽高
    canvas.width = max_width;
    canvas.height = total_height;
    // 获取canvas的2D绘图上下文
    var ctx = canvas.getContext('2d');

    //在canvas上绘制图片
    let already_have_height = 0;
    for(var j=0;j<array_ele_img_datas.length;j++){
        await new Promise((resolve, reject) => {
            let tmp_img = new Image();
            tmp_img.onload = () => {
              ctx.drawImage(tmp_img, 0, already_have_height);
              resolve();
            };
            tmp_img.onerror = reject;
            tmp_img.src = array_ele_img_datas[j];
        });
        already_have_height += array_ele_img_heights[j];
    }

    // 返回合并后的图片
    return canvas.toDataURL();
}

function get_ele_width(element){
    //获取元素宽度
    return element.clientWidth;
}

function get_ele_height(element){
    //获取元素高度
    return element.clientHeight;
}


async function generate_img_data(element) {
  //返回的是图片base64编码
  try {
    // html2canvas是异步执行的
    // 使用await关键字等待html2canvas的Promise完成
    const canvas = await html2canvas(element);
    console.log("Canvas generated:", canvas);
    return canvas.toDataURL();
  } catch (error) {
    console.error('Error generating canvas:', error);
  }
}

function download_picture(data_url){
    // 创建一个a标签用于下载
    const a = document.createElement('a');
    a.href = data_url;
    // 设置下载的文件名
    a.download = 'screenshot.png';
    // 触发点击事件
    a.click();
}

</script>

</body>
</html>