lily
/
bgleam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Normalize colors for color pickers

This commit is contained in:
Lily Rose 2024-04-26 15:35:28 +10:00
parent a1f3ffc1da
commit 61381e2d3c
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -193,35 +193,35 @@
<div id="colorSchemeInputs" class="hidden"> <div id="colorSchemeInputs" class="hidden">
<label for="textPrimaryColorInput">Text Primary Color</label> <label for="textPrimaryColorInput">Text Primary Color</label>
<input id="textPrimaryColorInput" name="textPrimaryColorInput" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = this.value"> <input id="textPrimaryColorInput" name="textPrimaryColorInput" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = normalizeColor(this.value)">
<input id="textPrimaryColorPicker" name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColorInput.value = this.value"> <input id="textPrimaryColorPicker" name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColorInput.value = this.value">
<label for="textShadowColorInput">Text Shadow Color</label> <label for="textShadowColorInput">Text Shadow Color</label>
<input id="textShadowColorInput" name="textShadowColorInput" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = this.value"> <input id="textShadowColorInput" name="textShadowColorInput" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = normalizeColor(this.value)">
<input id="textShadowColorPicker" name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColorInput.value = this.value"> <input id="textShadowColorPicker" name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColorInput.value = this.value">
<label for="lucyColorInput">Lucy Color</label> <label for="lucyColorInput">Lucy Color</label>
<input id="lucyColorInput" name="lucyColorInput" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = this.value"> <input id="lucyColorInput" name="lucyColorInput" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = normalizeColor(this.value)">
<input id="lucyColorPicker" name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColorInput.value = this.value"> <input id="lucyColorPicker" name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColorInput.value = this.value">
<label for="lucyFaceColorInput">Lucy Face Color</label> <label for="lucyFaceColorInput">Lucy Face Color</label>
<input id="lucyFaceColorInput" name="lucyFaceColorInput" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = this.value"> <input id="lucyFaceColorInput" name="lucyFaceColorInput" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = normalizeColor(this.value)">
<input id="lucyFaceColorPicker" name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColorInput.value = this.value"> <input id="lucyFaceColorPicker" name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColorInput.value = this.value">
<label for="lambdaColorInput">Lambda Color</label> <label for="lambdaColorInput">Lambda Color</label>
<input id="lambdaColorInput" name="lambdaColorInput" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = this.value"> <input id="lambdaColorInput" name="lambdaColorInput" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = normalizeColor(this.value)">
<input id="lambdaColorPicker" name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColorInput.value = this.value"> <input id="lambdaColorPicker" name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColorInput.value = this.value">
<label for="outlineColorInput">Outline Color</label> <label for="outlineColorInput">Outline Color</label>
<input id="outlineColorInput" name="outlineColorInput" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = this.value"> <input id="outlineColorInput" name="outlineColorInput" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = normalizeColor(this.value)">
<input id="outlineColorPicker" name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColorInput.value = this.value"> <input id="outlineColorPicker" name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColorInput.value = this.value">
<label for="backgroundColorInput">BG Color</label> <label for="backgroundColorInput">BG Color</label>
<input id="backgroundColorInput" name="backgroundColorInput" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = this.value"> <input id="backgroundColorInput" name="backgroundColorInput" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = normalizeColor(this.value)">
<input id="backgroundColorPicker" name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColorInput.value = this.value"> <input id="backgroundColorPicker" name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColorInput.value = this.value">
<label for="backgroundLucyColorInput">BG Lucy Color</label> <label for="backgroundLucyColorInput">BG Lucy Color</label>
<input id="backgroundLucyColorInput" name="backgroundLucyColorInput" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = this.value"> <input id="backgroundLucyColorInput" name="backgroundLucyColorInput" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = normalizeColor(this.value)">
<input id="backgroundLucyColorPicker" name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColorInput.value = this.value"> <input id="backgroundLucyColorPicker" name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColorInput.value = this.value">
</div> </div>
@ -230,7 +230,7 @@
<div id="vignetteInputs" class="hidden"> <div id="vignetteInputs" class="hidden">
<label for="vignetteColorInput">Vignette Color</label> <label for="vignetteColorInput">Vignette Color</label>
<input id="vignetteColorInput" name="vignetteColorInput" type="text" value="#916dab" oninput="this.form.vignetteColorPicker.value = this.value"> <input id="vignetteColorInput" name="vignetteColorInput" type="text" value="#916dab" oninput="this.form.vignetteColorPicker.value = normalizeColor(this.value)">
<input id="vignetteColorPicker" name="vignetteColorPicker" type="color" value="#916dab" oninput="this.form.vignetteColorInput.value = this.value"> <input id="vignetteColorPicker" name="vignetteColorPicker" type="color" value="#916dab" oninput="this.form.vignetteColorInput.value = this.value">
<label for="vignetteStartInput">Vignette Start</label> <label for="vignetteStartInput">Vignette Start</label>
@ -385,8 +385,16 @@
const savePNGButton = document.getElementById("savePNGButton") const savePNGButton = document.getElementById("savePNGButton")
const preview = document.getElementById("preview") const preview = document.getElementById("preview")
const canvas = document.createElement("canvas") const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")
const img = document.createElement("img") const img = document.createElement("img")
const normalizeColor = color => {
ctx.fillStyle = color
const m = ctx.fillStyle.match(/rgba\((.*?), (.*?), (.*?), .*?\)/)
if (m) ctx.fillStyle = `rgb(${m[1]}, ${m[2]}, ${m[3]})`
return ctx.fillStyle
}
const getFormData = () => { const getFormData = () => {
const formData = new FormData(form) const formData = new FormData(form)
const width = +formData.get("widthInput") const width = +formData.get("widthInput")
@ -444,7 +452,7 @@
canvas.width = curData.width canvas.width = curData.width
canvas.height = curData.height canvas.height = curData.height
img.onload = () => { img.onload = () => {
canvas.getContext("2d").drawImage(img, 0, 0, curData.width, curData.height) ctx.drawImage(img, 0, 0, curData.width, curData.height)
canvas.toBlob(pngBlob => { canvas.toBlob(pngBlob => {
const pngUrl = window.URL.createObjectURL(pngBlob) const pngUrl = window.URL.createObjectURL(pngBlob)
savePNGButton.setAttribute("href", pngUrl) savePNGButton.setAttribute("href", pngUrl)