Spaces:
Running
Running
Update index.html
Browse files- index.html +16 -3
index.html
CHANGED
|
@@ -17,7 +17,7 @@
|
|
| 17 |
|
| 18 |
<body>
|
| 19 |
<h1>Photo Background Removal Tool By WebTech By Rohit.</h1>
|
| 20 |
-
<div id="container">
|
| 21 |
<label id="upload-button" for="upload">
|
| 22 |
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
| 23 |
<path fill="#000"
|
|
@@ -25,17 +25,30 @@
|
|
| 25 |
</path>
|
| 26 |
</svg>
|
| 27 |
Click to upload image
|
| 28 |
-
<label id="example">(or try example)</label>
|
| 29 |
</label>
|
| 30 |
</div>
|
| 31 |
<label id="status"></label>
|
| 32 |
<input id="upload" type="file" accept="image/*" />
|
| 33 |
<button id="remove-background-button" onclick="refresh()">Remove Another Photo Background</button>
|
|
|
|
| 34 |
|
| 35 |
<script>
|
| 36 |
function refresh() {
|
| 37 |
window.location.reload(); // Refresh the page
|
| 38 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 39 |
|
| 40 |
document.getElementById('upload').addEventListener('change', function () {
|
| 41 |
// Show the button when an image is uploaded
|
|
@@ -44,4 +57,4 @@
|
|
| 44 |
</script>
|
| 45 |
</body>
|
| 46 |
|
| 47 |
-
</html>
|
|
|
|
| 17 |
|
| 18 |
<body>
|
| 19 |
<h1>Photo Background Removal Tool By WebTech By Rohit.</h1>
|
| 20 |
+
<div id="container" style="background-image: url('path/to/default/image.jpg');">
|
| 21 |
<label id="upload-button" for="upload">
|
| 22 |
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
| 23 |
<path fill="#000"
|
|
|
|
| 25 |
</path>
|
| 26 |
</svg>
|
| 27 |
Click to upload image
|
|
|
|
| 28 |
</label>
|
| 29 |
</div>
|
| 30 |
<label id="status"></label>
|
| 31 |
<input id="upload" type="file" accept="image/*" />
|
| 32 |
<button id="remove-background-button" onclick="refresh()">Remove Another Photo Background</button>
|
| 33 |
+
<button id="download-button" onclick="downloadBackground()">Download Background Image</button>
|
| 34 |
|
| 35 |
<script>
|
| 36 |
function refresh() {
|
| 37 |
window.location.reload(); // Refresh the page
|
| 38 |
}
|
| 39 |
+
|
| 40 |
+
function downloadBackground() {
|
| 41 |
+
var container = document.getElementById('container');
|
| 42 |
+
var backgroundImageUrl = getComputedStyle(container).backgroundImage.slice(5, -2);
|
| 43 |
+
|
| 44 |
+
// Create a temporary anchor element
|
| 45 |
+
var link = document.createElement("a");
|
| 46 |
+
link.href = backgroundImageUrl;
|
| 47 |
+
link.download = "background_image.jpg"; // Set the download file name
|
| 48 |
+
document.body.appendChild(link);
|
| 49 |
+
link.click();
|
| 50 |
+
document.body.removeChild(link);
|
| 51 |
+
}
|
| 52 |
|
| 53 |
document.getElementById('upload').addEventListener('change', function () {
|
| 54 |
// Show the button when an image is uploaded
|
|
|
|
| 57 |
</script>
|
| 58 |
</body>
|
| 59 |
|
| 60 |
+
</html>
|