最近在搞一个项目，用户需要截图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>
