admin/pluggable-web-controls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit. \n 1. Screen capture plugin. \n 2. PNG annotation plugin

Browse Source
This commit is contained in:
teddy
2024-08-19 08:58:38 +01:00
parent 6e3fc47d36
commit 40a8406427
40 changed files with 5622 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
DEPRECATED/view_capture_screen_v2a.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Capture Control</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<link rel="stylesheet" href="capture-screen.css">
<style>
#captureButton {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#captureButton:hover {
background-color: #0056b3;
}
.sensitive-data {
color: transparent;
background-color: #ccc;
}
</style>
</head>
<body>
<header>
<h1>Website Title</h1>
</header>
<div class="content-wrapper">
<main>
<h2>Main Content</h2>
<p>This is where the main content of your page goes. You can add articles, blog posts, or any other primary content here.</p>
<input type="text" value="Test 1" />
<input type="number" value="2" />
<textarea>Test 3</textarea>
<button class="capture-screen">Capture Screen</button>
<!-- Notification Widget -->
<div id="notification-widget" class="widget">
<h3>Notifications</h3>
<p>You have 3 new messages.</p>
</div>
<a href="#notification-widget" id="notification-toggle" class="widget-toggle">Toggle Notifications</a>
<!-- Chat Widget -->
<div id="chat-widget" class="widget">
<h3>Chat</h3>
<p>Chat content goes here...</p>
</div>
<a href="#chat-widget" id="chat-toggle" class="widget-toggle">Toggle Chat</a>
<!-- Quick Settings Widget -->
<div id="settings-widget" class="widget">
<h3>Quick Settings</h3>
<p>Adjust your settings here...</p>
</div>
<a href="#settings-widget" id="settings-toggle" class="widget-toggle">Toggle Settings</a>
</main>
</div>
<script>
$(document).ready(function() {
$('.capture-screen').on('click', function() {
// Hide the capture button
$(this).hide();
// Mask sensitive data
$('input, textarea').each(function() {
$(this).addClass('sensitive-data');
$(this).attr('data-original-value', $(this).val());
$(this).val('********');
});
// Capture the screen
html2canvas(document.body).then(function(canvas) {
// Convert canvas to PNG data URL
var dataURL = canvas.toDataURL('image/png');
// Create a temporary link and trigger download
var link = document.createElement('a');
link.href = dataURL;
link.download = 'screen_capture.png';
link.click();
// Restore sensitive data
$('input, textarea').each(function() {
$(this).removeClass('sensitive-data');
$(this).val($(this).attr('data-original-value'));
$(this).removeAttr('data-original-value');
});
// Show the capture button again
$('.capture-screen').show();
});
});
});
</script>
</body>
</html>