From 8ab769575b9254c360a9284611b3af7dd7c4a574 Mon Sep 17 00:00:00 2001 From: gocivici Date: Fri, 9 Aug 2024 12:26:49 +0300 Subject: [PATCH] first commit --- astrosketch.css | 144 +++++++++++++++++++++++++++++++++++++++++++++++ astrosketch.html | 81 ++++++++++++++++++++++++++ astrosketch.js | 102 +++++++++++++++++++++++++++++++++ 3 files changed, 327 insertions(+) create mode 100644 astrosketch.css create mode 100644 astrosketch.html create mode 100644 astrosketch.js diff --git a/astrosketch.css b/astrosketch.css new file mode 100644 index 0000000..8409e2a --- /dev/null +++ b/astrosketch.css @@ -0,0 +1,144 @@ +body{ +background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), var(--theme-3); +} +canvas{ + width:100%; + } + + #outputWindow{ + display: none; + } + + #img{ + display:none; + } + .astroContainer{ + + font-size:16px; + text-align:center; + align-items: center; + + /* flex-wrap: wrap; */ + /* {# width: 100%; #} */ + } + + .astroContainer hr{ + + border:0; + height:20px; + background:url("/images/divider.gif") 0 0; + + } + .astroFlex{ + margin-top: 20px; + display: flex; + flex: 1; + } + .astrotext{ + order:1; + text-align: left; + } + .astroContainer figure{ + order:2; + margin: auto; + padding-left: 30px; + } + + .astroContainer label{ + font-size:16px; + font-family:IBM; + /* {# margin:10px; #} */ + } + + .astroContainer button{ + width:auto; + height:auto; + font-size:20px; + } + .astroContainer form{ + font-size:16px; + } + .astroContainer input{ + font-size:10px; + /* {# margin: 0 auto !important; #} */ + + } + input::file-selector-button{ + font-size:18px; + + } + + .astroContainer input[type=checkbox]{ + /* {# margin:15px; #} */ + } + + .centerButton { + width:auto; + text-align:center; + margin: auto; + justify-content:center; + /* {# max-width:200px; #} */ + } + #dl{ + display:none; + font-size: 16px; + text-align: center; + margin: 15px; + } + #result{ + text-align:center; + font-size:22px; + display:none; + } + .settings{ + + font-size:16px !important; + max-width:400px; + text-align:center; + margin:auto; + } + + .field-row{ + margin-top:20px; + margin-bottom:20px; + width: 100%; + /* flex-wrap: wrap; */ + } + + .flexwrap{ + display:flex; + flex-wrap: wrap; + width:auto; + text-align:center; + justify-content:center; + } + + .invert, .grayscale{ + display: flex; + float:left; + margin: 10px; + } + + .checkboxContainer{ + /* margin:10px; */ + margin-bottom: 10px; + margin-top: 10px; + } + #submitButton{ + margin-bottom:20px; + } + + @media only screen and (max-width: 800px) { + + .invert, .grayscale{ + float:none; + + } + .checkboxContainer{ + margin: 0px; + } + .left-box{ + padding-right: 5px; + padding-left: 5px; + } + } \ No newline at end of file diff --git a/astrosketch.html b/astrosketch.html new file mode 100644 index 0000000..d6d51f2 --- /dev/null +++ b/astrosketch.html @@ -0,0 +1,81 @@ + + + + +
+
+ + +
+ + +
+ +
+ + +
+ +
+ +
+ + + + + +
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + +

⬇️Converted Image⬇️

+ + + + + Download Result + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/astrosketch.js b/astrosketch.js new file mode 100644 index 0000000..85e5797 --- /dev/null +++ b/astrosketch.js @@ -0,0 +1,102 @@ +brightnessSlider = document.getElementById("BrightnessSlider"); +brightnessValue = document.getElementById("BrightnessValue"); +contrastSlider = document.getElementById("ContrastSlider"); +contrastValue = document.getElementById("ContrastValue"); + +brightnessSlider.oninput = function () { + brightnessValue.innerHTML = this.value; +}; + +contrastSlider.oninput = function () { + contrastValue.innerHTML = this.value; +}; + +//console.log(contrastSlider.value); + +document.getElementById("submitButton").disabled = true; + +submitButton = document.getElementById("submitButton"); + +let loadFile = function (event) { + let image = document.getElementById("img"); + image.crossOrigin = "anonymous"; + image.src = URL.createObjectURL(event.target.files[0]); + document.getElementById("submitButton").disabled = false; +}; + +submitButton.addEventListener("click", function () { + var brightness = parseInt(brightnessSlider.value, 10); + var contrast = parseInt(contrastSlider.value, 10); + + uploadedImage = document.getElementById("img"); + let canvas = document.getElementById("myCanvas"); + let context = canvas.getContext("2d"); + canvas.width = uploadedImage.width; + canvas.height = uploadedImage.height; + context.drawImage(uploadedImage, 0, 0); + let imageData = context.getImageData(0, 0, canvas.width, canvas.height); + let data = imageData.data; + +//Grayscale image + for (let i = 0; i < data.length; i += 4) { + const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + data[i] = avg; // red + data[i + 1] = avg; // green + data[i + 2] = avg; // blue + } + +//Invert image + for (var i = 0; i < data.length; i += 4) { + data[i] = 255 - data[i]; // red + data[i + 1] = 255 - data[i + 1]; // green + data[i + 2] = 255 - data[i + 2]; // blue + } + + applyBrightness(imageData.data, brightness); + contrastImage(imageData.data, contrast); + + context.putImageData(imageData, 0, 0); + + //Thanks Nippey from: https://stackoverflow.com/questions/12796513/html5-canvas-to-png-file + function dlCanvas() { + var dt = canvas.toDataURL("image/png"); + /* Change MIME type to trick the browser to downlaod the file instead of displaying it */ + dt = dt.replace(/^data:image\/[^;]*/, "data:application/octet-stream"); + + /* In addition to 's "download" attribute, you can define HTTP-style headers */ + dt = dt.replace( + /^data:application\/octet-stream/, + "data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Sketch.png" + ); + + this.href = dt; + } + + document.getElementById("dl").addEventListener("click", dlCanvas, false); + document.getElementById("outputWindow").style.display = "block"; + document.getElementById("result").style.display = "block"; + document.getElementById("dl").style.display = "block"; + window.scrollTo(0, document.body.scrollHeight); + +}); + +function applyBrightness(data, brightness) { + for (var i = 0; i < data.length; i += 4) { + data[i] += 255 * (brightness / 100); + data[i + 1] += 255 * (brightness / 100); + data[i + 2] += 255 * (brightness / 100); + } +} + +function contrastImage(d, contrast) { + contrast = contrast / 100 + 1; + var intercept = 128 * (1 - contrast); + for (var i = 0; i < d.length; i += 4) { + //r,g,b,a + d[i] = d[i] * contrast + intercept; + d[i + 1] = d[i + 1] * contrast + intercept; + d[i + 2] = d[i + 2] * contrast + intercept; + } +} + +