Jquery 在使用dom将图像下载到图像和文件保存器之前添加页脚
我使用dom转换图像和filesaver将html转换为图像，但我不知道如何在生成图像之前添加自定义文本作为页脚 这是我的代码：Jquery 在使用dom将图像下载到图像和文件保存器之前添加页脚,jquery,Jquery,我使用dom转换图像和filesaver将html转换为图像，但我不知道如何在生成图像之前添加自定义文本作为页脚 这是我的代码： <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/filesaver.js"></script>
<style>
.test{
width:300px;
height:300px;
border:1px solid #ddd;
}
</style>
<body>
<button class="btn btn-success" id="button">Save Image</button>
<div id="test" class="test">
abcd
</div>
<script>
$(document).ready(function(){
$("#button").click(function(){
domtoimage.toBlob(document.getElementById("test"))
.then(function(blob){
window.saveAs(blob,"output.png");
});
});
});
</script>
</body>
.测试{
宽度：300px；
高度：300px；
边框：1px实心#ddd；
}
保存图像
abcd
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
toBlob（document.getElementById（“测试”））
.then（函数（blob）{
saveAs（blob，“output.png”）；
});
});
});
我想您正在寻找这个输出……请告诉我……这是您想要的吗。只需复制粘贴代码并运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/filesaver.js"></script>
<style>
.test {
width: 300px;
height: 300px;
border: 1px solid #ddd;
}
#footer {
display: none;
margin-top: 200px;
}
</style>
</head>
<body>
<button class="btn btn-success" id="button">Save Image</button>
<div id="test" class="test">
<h1>abcd</h1>
<div class="footer" id="footer">
<div class="text-white text-center p-3 bg-primary">
<div class="copyright">
<strong><span>TGClickography</span></strong>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#button").click(function() {
$("#footer").show();
domtoimage.toBlob(document.getElementById("test"))
.then(function(blob) {
window.saveAs(blob, "output.png");
$("#footer").hide();
});
});
});
</script>
</body>
</html>
文件
.测试{
宽度：300px；
高度：300px；
边框：1px实心#ddd；
}
#页脚{
显示：无；
利润上限：200px；
}
保存图像
abcd
TGClickography
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#页脚”）.show（）；
toBlob（document.getElementById（“测试”））
.then（函数（blob）{
saveAs（blob，“output.png”）；
$（“#页脚”）.hide（）；
});
});
});
divdivdiv
例子
.测试{
宽度：300px；
高度：300px；
边框：1px实心#ddd；
位置：相对位置；
}
.页脚{
位置：绝对位置；
底部：0px；
显示器：flex；
证明内容：中心；
保证金：自动；
宽度：100%；
背景：青色；
文本对齐：居中；
}
保存图像
abcd
$（文档）.ready（（）=>{
$（“#按钮”）。单击（（）=>{
常量页脚=$（''）.attr（'id'，'footer'）.attr（'class'，'footer'）.text（'customfooter'）；
$（'#test'）。追加（页脚）；
toBlob（document.getElementById（'test'））
.然后（（blob）=>{
saveAs（blob，'output.png'）；
footer.remove（）；
});
});
});