javascript - 单击按钮即可截取窗口的屏幕截图
问题描述
本质上,我有这个纯 HTML 网站——我只想拥有一个 html 文件,上面包含所有内容。在站点上,应该有一个按钮,单击它会截取页面的屏幕截图,并将其上传到域上的 /image。我尝试使用 HTML2Canvas,但在大多数文章中,它说要下载东西并制作新文件等。如何在一个 HTML 文件上全部使用 HTML2Canvas?
<!DOCTYPE html>
<html>
<!--CSS:-->
<style>
#mydiv {
position: absolute;
z-index: 9;
text-align: center;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
</style>
<!--HTML:-->
<body>
<a href="#" onclick="capture()">Click for screenshot!</a>
<div id="mydiv">
<img class="two" src=https://pbs.twimg.com/profile_images/786024596998909953/ubcBmeAM_400x400.jpg width="40%" height="40%">
</div>
<!--JavaScript:-->
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
elmnt.style.left = 20 + "px";
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<script>
function capture() {
html2canvas($('body'),{
onrendered: function (canvas) {
var imgString = canvas.toDataURL("image/png");
window.open(imgString);
}
}
});
---JUST COPPIED AND PASTED the HTML2canvas code, from this site: https://html2canvas.hertzen.com/dist/html2canvas.js
</script>
</body>
</html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url(https://rfclipart.com/image/big/af-4a-f2/neighbourhood-silhouettes-of-country-houses-Download-Royalty-free-Vector-File-EPS-69644.jpg);
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
解决方案
我在这里找到了另一篇文章很好地解释了它,但本质上你需要 jQuery、HTML2Canvas(你似乎已经拥有它)和 jQuery.plugin.html2canvas.js。这是您应该使用的代码:
function capture() {
html2canvas($('body'),{
onrendered: function (canvas) {
var imgString = canvas.toDataURL("image/png");
window.open(imgString);
}
}
});
然后添加此代码:
<a href="#" onclick="capture()">Click for screenshot!</a>
当您单击按钮时,这将使<body>
元素的背景(因此,页面的背景)成为页面的屏幕截图。
推荐阅读
- amazon-s3 - 使用 Glue 从 AWS RDS 到 S3 的管道
- knex.js - 使用 knex.raw() 创建枚举类型时出现语法错误
- python - Python 2.7 忽略 else 和组合的“if not”语句
- python - 如何从包含 discord.py 的嵌入中获取文本?
- ruby - 在 AIX 7.1 上从源代码编译 Ruby
- javascript - 如何在javascript中定义settimeout函数
- javascript - 使用 javascript 创建累积对象
- bash - 批处理文件复制到另一个文件夹,并覆盖共享部分名称的文件
- sprite-kit - Swift - SpriteKit - 移动节点和固定节点之间的距离
- azure - 无法在 Azure Functions v2 中运行 PowerShell 脚本