added JSImg

Ponali · Mar 16, 2024 · 7f41795 · 7f41795
1 parent 1f88ecb
commit 7f41795
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 0 deletions.
diff --git a/files/jsimg/index.html b/files/jsimg/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas></canvas>
+<div>
+<input id="imgurl" type="text" value="https://picsum.photos/256"></input>
+<button id="refreshImgBtn">Refresh image</button>
+</div>
+<textarea id="func">return ((a,b,x,y)=>(b!=3?(a+(x^y))/2:255))</textarea>
+<select id="io">
+<option value="1">send value per value (value,channel,x,y) -> number</option>
+<option value="2">send pixel value array (r,g,b,x,y) -> [number x3]</option>
+</select>
+<script src="script.js"></script>
+<style>
+body{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;margin:5px;}
+#imgurl{width:512px;}
+#func{width:90%;}
+canvas{zoom:2;image-rendering:pixelated;}
+</style>
+</body>
+</html>
diff --git a/files/jsimg/script.js b/files/jsimg/script.js
@@ -0,0 +1,55 @@
+let hexEncode=((a)=>{return a.split("").map((b)=>b.charCodeAt().toString(16).padStart(2,"0")).join("")}),hexDecode=((a)=>{return a.match(/.{1,2}/g).map((a)=>String.fromCharCode(parseInt(a,16))).join("")}),
+d=document,Q=(a)=>d.querySelectorAll(a),q=(a)=>Q(a)[0]
+Object.getOwnPropertyNames(Math).forEach((a)=>{window[a]=Math[a]})
+let c=document.querySelector("canvas"),x=c.getContext("2d"),i=createPlainImage();
+c.width=c.height=256,imgurl="",func=(()=>{});
+function createPlainImage(){
+	let img=document.createElement("img");
+	img.crossOrigin="Anonymous";
+	img.onload=changeImage;
+	return img;
+}
+function getModifiedImageData(data){
+	if(q("#io").value=="1"){return data;}
+	let out=[];
+	for(let i=0;i<data.length;i+=4){
+		out.push([data[i],data[i+1],data[i+2]]);
+	};
+	return out;
+};
+function getOriginalImageData(dataog,data){
+	if(q("#io").value=="2"){
+		for(let i in data){
+			dataog.data[4*i]=data[i][0];
+			dataog.data[4*i+1]=data[i][1];
+			dataog.data[4*i+2]=data[i][2];
+			dataog.data[4*i+3]=255;
+		}
+	};
+	return dataog;
+}
+function changeImage(){
+	x.drawImage(i,0,0,256,256);
+	let dataog=x.getImageData(0,0,256,256),data=getModifiedImageData(dataog.data);
+	if(q("#io").value=="1"){
+		for(di in data){data[di]=0xff&func(data[di],di%4,floor(di/4)%256,floor(floor(di/4)/256))};
+	} else {
+		for(di in data){data[di]=func(data[di][0],data[di][1],data[di][2],di%256,floor(di/256));};
+	};
+	console.log(data);
+	x.clearRect(0,0,256,256);
+	x.putImageData(getOriginalImageData(dataog,data),0,0);
+}
+function update(a,b){func=b;if(a!=imgurl){i.src=a+(a.includes("?")?(a.includes("#")?"&":"#"):"?")+Date.now().toString();imgurl=a;}else{changeImage();}};
+function updateEL(){location.hash=[q("#imgurl").value,q("#func").value,q("#io").value].map(hexEncode).join("_");update(q("#imgurl").value,(new Function(q("#func").value))())}
+q("#imgurl").addEventListener("change",updateEL);
+q("#func").addEventListener("change",updateEL);
+console.log(location.hash)
+if(location.hash.replace("#","")!=""){
+	let out=location.hash.replace("#","").split("_").map(hexDecode);
+	q("#imgurl").value=out[0];
+	q("#func").value=out[1];
+	q("#io").value=out[2];
+}
+updateEL();
+q("#refreshImgBtn").addEventListener("click",()=>{i=createPlainImage();imgurl="";updateEL();});