mirror of
https://github.com/gocivici/astrosketch.git
synced 2025-01-08 10:52:53 -06:00
first commit
This commit is contained in:
gocivici
commit
8ab769575b
144
astrosketch.css
Normal file
144
astrosketch.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
81
astrosketch.html
Normal file
81
astrosketch.html
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="astrosketch.css">
|
||||||
|
|
||||||
|
<form id="settings">
|
||||||
|
<div class="field-row">
|
||||||
|
<input class="centerButton" type="file" accept="image/*;capture=camera" name="image" id="file" onchange="loadFile(event)">
|
||||||
|
|
||||||
|
<div class="invert">
|
||||||
|
<input checked disabled="true" type="checkbox" id="invertBox">
|
||||||
|
<label for="invertBox">Invert</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grayscale">
|
||||||
|
<input checked disabled="true" type="checkbox" id="grayscaleBox">
|
||||||
|
<label for="grayscaleBox">Grayscale</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-row">
|
||||||
|
<label for="BrightnessSlider">Brightness:</label>
|
||||||
|
<label for="BrightnessSlider" style="">L</label>
|
||||||
|
<input id="BrightnessSlider" width="200px" type="range" value="-25" min="-100" max="100">
|
||||||
|
<label for="BrightnessSlider">H</label>
|
||||||
|
<label for="BrightnessSlider">(<span style="width:24px; color:orange;" id="BrightnessValue">-25</span>)</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<label for="ContrastSlider">Contrast: </label>
|
||||||
|
<label for="ContrastSlider">L</label>
|
||||||
|
|
||||||
|
<input id="ContrastSlider" type="range" value="38" min="-100" max="100">
|
||||||
|
<label for="ContrastSlider">H</label>
|
||||||
|
<label for="ContrastSlider">(<span style="width:24px; color:orange;" id="ContrastValue">38</span>)</label>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<img id="img" />
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<button id="submitButton">Submit</button>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="astrosketch.js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="result">⬇️Converted Image⬇️</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<canvas id="myCanvas"></canvas>
|
||||||
|
<a id="dl" download="Sketch.png" href="#">Download Result</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
102
astrosketch.js
Normal file
102
astrosketch.js
Normal file
@ -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 <a>'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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user