Last active
November 26, 2022 03:18
-
-
Save zvodd/05a1142245174c86bc22946b11f855ee to your computer and use it in GitHub Desktop.
color palette js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>whatever</title> | |
<script> | |
/* | |
This is a completly disorganised mess of shoehorning old code into a new proof of concept. | |
*/ | |
const $ = document.querySelector.bind(document) | |
const $$ = document.querySelectorAll.bind(document) | |
var stuff = [] | |
document.addEventListener("DOMContentLoaded",()=>{ | |
let html = document.body.parentElement | |
let dropzone = $(`#drop_zone`) | |
const noevent = function (ev){ ev.preventDefault(); ev.stopPropagation(); }; | |
dropzone.addEventListener("drop", onDrop, false) | |
html.addEventListener("dragenter", (ev)=>{noevent(ev); dropzone.style.backgroundColor='blue'}, false); | |
html.addEventListener("dragover", noevent, false); | |
dropzone.addEventListener("dragend", (ev)=>{delete dropzone.style.backgroundColor}, false); | |
$(`#actionButton`).addEventListener("click",onAction,false) | |
$(`#filetarget`).addEventListener("change", onFileChange, false) | |
}) | |
function onAction(event){ | |
event.preventDefault(); event.stopPropagation(); | |
for (let f of stuff){ | |
let img = f.element.querySelector('img'); | |
let canvas = f.element.querySelector('canvas'); | |
blobToBase64(f.slice(0,f.size)).then( | |
(d)=>{ | |
let src = d | |
console.log(src) | |
img.src = src | |
doet(img, canvas); | |
}) | |
} | |
} | |
function onFileChange(event){ | |
addFiles($(`#filetarget`).files) | |
} | |
function onDrop(event){ | |
event.preventDefault(); | |
event.stopPropagation(); | |
let files = event?.dataTransfer?.files || null; | |
if (files){ | |
addFiles(files) | |
} | |
} | |
function addFiles(files){ | |
console.log(files) | |
for (let f of files){ | |
stuff.push(fileThinger(f)) | |
} | |
$("#info").replaceChildren( | |
...stuff.map((f,i)=> { | |
let el = htmlFrag(`<li>${f.name}<br/><pre>${JSON.stringify(f, null, 2)}</pre><img/><br/><canvas/></li>`) | |
f.element = el.children.item(0) | |
return el | |
}) | |
) | |
} | |
function fileThinger(file){ | |
let FileThing = { | |
name : file.name, | |
size : file.size, | |
type : file.type, | |
slice: file.slice.bind(file), | |
stream: file.stream.bind(file), | |
text: file.text.bind(file), | |
element: null, | |
} | |
return FileThing | |
} | |
// function ploop(msg, obj){ | |
// let body = JSON.stringify(obj, null, 2) | |
// return htmlFrag(`<li>${msg}<br/><pre>${body}</pre></li>`) | |
// } | |
function htmlFrag(strHTML) { | |
return document.createRange().createContextualFragment(strHTML); | |
} | |
function blobToBase64(blob) { | |
return new Promise((resolve, _) => { | |
const reader = new FileReader(); | |
reader.onloadend = () => resolve(reader.result); | |
reader.readAsDataURL(blob); | |
}); | |
} | |
function doet(img_el, canvas){ | |
var width = img_el.width, | |
height = img_el.height, | |
ctx = canvas.getContext('2d'), | |
tmp = scale_to(width,height); | |
width = tmp[0]; | |
height = tmp[1]; | |
canvas.setAttribute("width", width) ; | |
canvas.setAttribute("height", height); | |
ctx.drawImage(img_el, 0, 0, width, height); | |
var imgdata = ctx.getImageData(0,0,width,height); | |
function do_the_sort(){ | |
//sort the pixels | |
var sorted_imgdata = qsort_image_data(imgdata.data), | |
multiply = 8, | |
border = 2, | |
// calculate new canvas size | |
neww = (width * multiply) + (width * border), | |
newh = (height * multiply) + (height * border), | |
draw_rect = [width,height,0,0]; | |
// set new canvase size | |
canvas.setAttribute("width", neww); | |
canvas.setAttribute("height", newh); | |
// draw the pixels | |
do_draw(canvas, sorted_imgdata, draw_rect, multiply, border); | |
} | |
//_.do_the_sort = do_the_sort; | |
// $(canvas).click(function(){do_the_sort()}); | |
do_the_sort() | |
} | |
function do_draw(canvas, image_data, rect, multiply, border){ | |
var width = rect[0], | |
height = rect[1], | |
xoffset = rect[2], | |
yoffset = rect[3] | |
neww = (width * multiply) + (width * border), | |
newh = (height * multiply) + (height * border), | |
x = 0, | |
y = 0; | |
for (var i = 0; i < image_data.length ; i= i + 4) { | |
// if not first pixle, calculate x and y; | |
if (i != 0){ | |
x = Math.floor((i / 4) % width); | |
// whenever x hits zero, increment y. | |
if (x == 0) { | |
y = y+1; | |
} | |
} | |
var color = "#"+pad_string(rgb2int(image_data, i).toString(16),6,"0"); | |
draw = canvas.getContext('2d'); | |
draw.fillStyle = color; | |
draw.fillRect( | |
(x * multiply)+(x * border) + xoffset, // x | |
(y * multiply)+(y * border) + yoffset, // y | |
multiply , // w | |
multiply ); // h | |
} | |
} | |
function check_aspect(w,h){ | |
m = Math.max(w,h); | |
l = Math.min(w,h); | |
if (m < (l*2)) | |
return true; | |
return false; | |
} | |
function qsort_image_data(a) { | |
if (a.length == 0) return []; | |
var left = [], | |
right = [], | |
pivot = rgb2int(a, 0); | |
for (var i = 4; i < a.length ; i= i + 4) { | |
if ( rgb2int(a, i) < pivot ){ | |
left.push(a[i]); | |
left.push(a[i+1]); | |
left.push(a[i+2]); | |
left.push(a[i+3]); | |
}else{ | |
right.push(a[i]); | |
right.push(a[i+1]); | |
right.push(a[i+2]); | |
right.push(a[i+3]); | |
} | |
} | |
return qsort_image_data(left).concat([a[0], a[1], a[2], a[3]], qsort_image_data(right)); | |
} | |
function rgb2int(rgbarray, pixel){ | |
var r = rgbarray[pixel+0], | |
g = rgbarray[pixel+1], | |
b = rgbarray[pixel+2], | |
// a = rgbarray[pixel+3], | |
value = r << 16, | |
value = value + (g << 8), | |
value = value + b; | |
return value; | |
} | |
function pad_string(str, tolength, padchar){ | |
s = str; | |
if (s.length < tolength){ | |
dif = tolength - s.length; | |
for (var i = 0; i < dif; i++){ | |
s = padchar.concat(s); | |
} | |
} | |
return s; | |
} | |
function scale_to(width, height, size){ | |
if (typeof size === 'undefined') | |
size = 100; | |
var xx,xy, newxx, newxy; | |
if (width > height) {xx = width; xy = height;} | |
else {xx = height; xy = width;} | |
z = xx / size; | |
//newxx = xx / z; // (size) | |
nxx = size; | |
nxy = Math.floor(xy / z); | |
if (width > height) {width = nxx; height = nxy;} | |
else {height = nxx; width=nxy;} | |
return [width, height]; | |
} | |
function log(msg, nonewline){ | |
var tel= $('#log')[0], | |
t = tel.textContent; | |
msg = msg.concat(nonewline === true ? "": "\n") | |
t = t.concat(msg) | |
tel.textContent = t; | |
} | |
function doStuffWithFiles(filesList) | |
{ | |
i = new Image(); | |
} | |
</script> | |
<style> | |
.button { | |
border: none; | |
color: white; | |
padding: 15px 32px; | |
text-align: center; | |
text-decoration: none; | |
display: inline-block; | |
font-size: 16px; | |
background: #929292; | |
} | |
.colourful{ | |
background: #ef32d9; | |
background: linear-gradient(to top, #89fffd, #ef32d9); | |
} | |
.bg-grad-light{ | |
background-image: linear-gradient(to left top, #e9e9e9, #e2e1ec, #d9d9f0, #cdd2f4, #c0ccf8); | |
} | |
.bg-grad-dark{ | |
background-image: linear-gradient(to left top, #929292, #8c8c93, #858694, #7d8095, #747b96); | |
} | |
</style> | |
</head> | |
<body> | |
<pre> | |
Usage: Drag files into the box below, press go. | |
</pre> | |
<input id="filetarget" type="file" style="display:none" /> | |
<label for="filetarget" > | |
<div class="button bg-grad-dark">Choose Files</div> | |
</label> | |
<div id="drop_zone" class="colourful" style="min-width:200px;min-height:200px;background-color:red;"> | |
</div> | |
<ul id="info"> | |
</ul> | |
<div id="actionButton" class="button bg-grad-dark">Go</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment