35.Screenshot Tool

<!DOCTYPE html>

<head>

<title>网页截图工具</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

margin: 0;

background: linear-gradient(45deg, #3498db, #8e44ad);

color: white;

}

.container {

width: 90%;

max-width: 800px;

background: rgba(255, 255, 255, 0.1);

padding: 2em;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

backdrop-filter: blur(10px);

margin-top: 2em;

}

h1 {

text-align: center;

}

.buttons {

display: flex;

justify-content: space-around;

margin-bottom: 1em;

}

button {

padding: 0.5em 1em;

border: none;

border-radius: 5px;

background-color: #2ecc71;

color: white;

cursor: pointer;

transition: background-color 0.3s;

}

button:hover {

background-color: #27ae60;

}

#result {

width: 100%;

height: 300px;

border: 1px solid white;

margin-top: 1em;

overflow: auto;

}

</style>

</head>

<body>

<h1>网页截图工具</h1>

</div>

</div>

function captureFullScreen() {

html2canvas(document.body).then(canvas => {

displayResult(canvas);

});

}

function captureArea() {

const area = document.querySelector('.container');

html2canvas(area).then(canvas => {

displayResult(canvas);

});

}

function captureScrolling() {

html2canvas(document.body, {

height: document.body.scrollHeight

}).then(canvas => {

displayResult(canvas);

});

}

function displayResult(canvas) {

const resultDiv = document.getElementById('result');

resultDiv.innerHTML = '';

resultDiv.appendChild(canvas);

// 添加下载按钮

const downloadBtn = document.createElement('button');

downloadBtn.textContent = '下载截图';

downloadBtn.onclick = () => downloadCanvas(canvas);

resultDiv.appendChild(downloadBtn);

}

function downloadCanvas(canvas) {

const link = document.createElement('a');

link.download = 'screenshot.png';

link.href = canvas.toDataURL();

link.click();

}

</script>

</body>

</html>