Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*=============*\
- |░ image thing ░|
- \*=============*/setTimeout(function(){
- function log(a){
- console.log("[] "+a); //just a thing so I can read the messages more easily
- }
- //variables
- //var canvas=document.querySelector("#chatdraw canvas");
- //canvas.width=300;
- var z=new Image(); //best variable name (c) Trinitro 2016
- var noise=0;
- var isImage=false;
- var elemX=0;
- var elemY=0;
- var offsetX,offsetY;
- var moving=false;
- var scale=1;
- var colorButtons=document.querySelectorAll("#chatdraw button-area button.colorChange");
- var paletteSize=colorButtons.length;
- document.getElementById("colorPicker").addEventListener("change",()=>{updateImage()});
- document.querySelector("#chatdraw button-area button").addEventListener("click",()=>{
- isImage=false;
- moveBoxParent.style.backgroundImage="";
- pc2d.clearRect(0,0,cW,cH);
- });//✖ button
- var canvas=document.querySelector("#chatdraw canvas");
- var c2d=canvas.getContext("2d");
- var cW=canvas.width,cH=canvas.height;
- var cR=cW/cH;
- var cM=Math.min(cW,cH);
- //html stuff
- var sidePane=document.querySelector("#sidepane");
- //paste box
- var pasteImageHere=document.createElement("div");
- pasteImageHere.style.width="3.25rem";
- pasteImageHere.contentEditable=true;
- pasteImageHere.oninput=function(){
- var thing=this.getElementsByTagName("img")[0];
- if (thing) {
- loadImage(thing.src);
- }
- while (this.firstChild) this.removeChild(this.lastChild); //delete everything
- };
- document.querySelector("#sendpane").appendChild(pasteImageHere);
- //file upload button
- var fileBrowse=document.createElement("input");
- fileBrowse.type="file";
- fileBrowse.onchange=function(){
- log("User uploaded an image...");
- var reader=new FileReader();
- reader.readAsDataURL(this.files[0]);
- reader.onload=function(){loadImage(this.result)};
- };
- sidePane.appendChild(fileBrowse);
- //dither slider
- var ditherSlider=document.createElement("input");
- ditherSlider.type="range";
- ditherSlider.min="0";
- ditherSlider.max="1";
- ditherSlider.step="0.001";
- ditherSlider.onchange=function(){
- updateImage();
- };
- sidePane.appendChild(ditherSlider);
- //blurring checkbox
- var blurring=document.createElement("input");
- blurring.type="checkbox";
- blurring.checked=true;
- blurring.onchange=function(){
- c2d.webkitImageSmoothingEnabled=c2d.mozImageSmoothingEnabled=c2d.imageSmoothingEnabled=this.checked;
- pc2d.webkitImageSmoothingEnabled=pc2d.mozImageSmoothingEnabled=pc2d.imageSmoothingEnabled=this.checked;
- updateImage();
- };
- sidePane.appendChild(blurring);
- //
- var moveBoxParent=document.createElement("div");
- moveBoxParent.style.width=cW+"px";
- moveBoxParent.style.height=cH+"px";
- moveBoxParent.style.backgroundSize="contain";
- moveBoxParent.style.backgroundRepeat="no-repeat";
- moveBoxParent.style.backgroundColor="white";
- moveBoxParent.style.border="1px solid black";
- moveBoxParent.onmousemove=function(e){
- if (moving){
- updateMoveBoxPos(e.pageX-offsetX,e.pageY-offsetY);
- updatePreview();
- }
- };
- moveBoxParent.onmouseup=moveBoxParent.onmouseleave=function(){
- moving=false;
- moveBox.style.cursor="grab";
- updateImage();
- };
- var updateImageTimeout;
- var mouseSens=200;
- moveBoxParent.onwheel=function(e){
- updateScale(scale+e.deltaY/mouseSens);
- updatePreview();
- window.clearTimeout(updateImageTimeout);
- updateImageTimeout=window.setTimeout(function(){updateImage();},mouseSens);
- };
- sidepane.appendChild(moveBoxParent);
- var scaleSlider=document.createElement("input");
- scaleSlider.type="range";
- scaleSlider.min=0.0001;
- scaleSlider.max=1;
- scaleSlider.step=0.0001;
- scaleSlider.value=1;
- scaleSlider.oninput=function() {
- updateScale(this.value);
- };
- scaleSlider.onchange=function(){updateImage()};
- sidepane.appendChild(scaleSlider);
- var pCanvas=document.createElement("canvas");
- pCanvas.width=cW;
- pCanvas.height=cH;
- //pCanvas.style.cursor="crosshair";//this cursor sucks...
- pCanvas.style.backgroundColor="white";
- pCanvas.style.border="1px solid black";
- var pc2d=pCanvas.getContext("2d");
- pCanvas.onclick=function(e){
- if (isImage){
- var rect=pCanvas.getBoundingClientRect();
- var x=Math.round(e.clientX-rect.left-1);
- var y=Math.round(e.clientY-rect.top-1);
- var pixel=pc2d.getImageData(x,y,1,1).data;
- if (pixel[3]==-0) pixel=[255,255,255,255];
- var button=document.querySelector('#chatdraw button-area button[data-selectedcolor="true"]');
- button.style.color=rgbToFillStyle(pixel);
- log(x+","+y+" "+pixel.join());
- updateImage();
- }
- return false;
- };
- sidePane.appendChild(pCanvas);
- //
- var moveBox=document.createElement("div");
- //moveBox.style.backgroundColor="rgba(128,128,128,0.5)";
- moveBox.style.position="relative";
- moveBox.style.border="1px solid red";
- moveBox.style.width=cW-2+"px";
- moveBox.style.height=cH-2+"px";
- moveBox.style.cursor="grab";
- moveBox.onmousedown=function(e){
- moving=true;
- moveBox.style.cursor="grabbing";
- offsetX=e.pageX-elemX;
- offsetY=e.pageY-elemY;
- };
- moveBoxParent.appendChild(moveBox);
- //more functions
- function updateScale(newScale){
- var oldScale=scale;
- scale=Math.min(Math.max(newScale,0.001),1);
- midX=elemX+oldScale*cW/2;
- midY=elemY+oldScale*cH/2;
- updateMoveBoxPos(midX-scale*cW/2,midY-scale*cH/2);
- moveBox.style.width=scale*cW-2+"px";
- moveBox.style.height=scale*cH-2+"px";
- scaleSlider.value=scale;
- if (oldScale!=scale) updatePreview();
- }
- function updateMoveBoxPos(x,y){
- elemX=Math.min(Math.max(x,0),(1-scale)*cW);
- elemY=Math.min(Math.max(y,0),(1-scale)*cH);
- moveBox.style.left=elemX+"px";
- moveBox.style.top=elemY+"px";
- }
- function loadImage(source){
- log("Found an image. (assume load failed)");
- z=new Image();
- z.crossOrigin="Anonymous";
- z.onload=function(){
- log("Image loaded successfully!");
- moveBoxParent.style.backgroundImage="url('"+source+"')";
- isImage=true;
- updateImage();
- };
- z.src=source;
- }
- function updateImage(){
- if (isImage){
- updatePreview();
- putImage(z);
- }
- }
- function updatePreview(){
- if (isImage){
- pc2d.clearRect(0,0,cW,cH);
- var maxHeight=Math.max(z.width/cW,z.height/cH)*cM;
- pc2d.drawImage(z,elemX/cW*maxHeight*cR,elemY/cH*maxHeight,scale*maxHeight*cR,scale*maxHeight,0,0,cW,cH);
- }
- }
- //put image on canvas, and convert to 4 colors.
- function putImage(img){
- var dither=ditherSlider.value;
- var i,palette=[];
- for(i=0;i<paletteSize;i++) palette.push(fillStyleToRgb(colorButtons[i].style.color));
- c2d.rect(0,0,cW,cH);c2d.fillStyle="white";c2d.fill(); //clear canvas
- var maxHeight=Math.max(img.width/cW,img.height/cH)*cM;
- c2d.drawImage(img,elemX/cW*maxHeight*cR,elemY/cH*maxHeight,scale*maxHeight*cR,scale*maxHeight,0,0,cW,cH);
- var data=c2d.getImageData(0,0,cW,cH);
- for(var x=0,bestIndex,nextErr;x<cW*cH*4;x+=4){
- if (noise) for (i=0;i<3;i++) data.data[x+i]+=Math.random()*noise-noise/2;
- //find the best color
- var bestDist=Infinity;
- for (i=0;i<paletteSize&&bestDist!==0;i++) {
- for (var j=0,dist=0,color=palette[i];j<3;j++) dist+=Math.abs(data.data[x+j]-color[j])*(1+(j==1));
- if (dist<bestDist){bestDist=dist;bestIndex=i}
- }
- //dithering
- if (dither){
- for (i=0;i<3;i++) {
- var err=(data.data[x+i]-palette[bestIndex][i])*dither/3;
- //if (err<0) nextErr=-err; else nextErr=0;
- data.data[x+i]=palette[bestIndex][i];
- data.data[x +4+i]+=err; // right
- data.data[x+cW*4-4+i]+=err/2; // bottom left
- data.data[x+cW*4 +i]+=err; // bottom
- data.data[x+cW*4+4+i]+=err/2; // bottom right
- }
- } else for (i=0;i<3;i++) data.data[x+i]=palette[bestIndex][i];
- }
- c2d.putImageData(data,0,0);
- log("Image conversion sucessful.");
- }
- },2000);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement