zvodd/color_palette_from_images.html

## color_palette_from_images.html
<!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>
	<!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>