Advertisement
12Me21

I don't trust bbcode to not corrupt this

Aug 28th, 2016
295
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*=============*\
  2. |░ image thing ░|
  3. \*=============*/setTimeout(function(){
  4.  
  5. var sidePane=document.querySelector("#sidepane");
  6. var canvas=document.querySelector("#chatdraw canvas");
  7. var c2d=canvas.getContext("2d");
  8. var cW=canvas.width,cH=canvas.height;
  9. var cR=cW/cH; //width to height ratio
  10. var cM=Math.min(cW,cH); //the smaller dimension
  11. ////////////////
  12. //IMAGE UPLOAD//
  13. ////////////////
  14. var z=new Image(); //best variable name (c) Trinitro 2016
  15. var isImage=false;
  16. //paste box
  17. var pasteImageHere=document.createElement("div");
  18. pasteImageHere.style.width="3.25rem";
  19. pasteImageHere.contentEditable=true;
  20. pasteImageHere.oninput=function(){
  21. var thing=this.getElementsByTagName("img")[0];
  22. if (thing) loadImage(thing.src);
  23. while (this.firstChild) this.removeChild(this.lastChild); //delete everything
  24. };
  25. document.querySelector("#sendpane").appendChild(pasteImageHere);
  26. //file upload button
  27. var fileBrowse=document.createElement("input");
  28. fileBrowse.type="file";
  29. fileBrowse.onchange=function(){
  30. console.log("User uploaded an image...");
  31. var reader=new FileReader();
  32. reader.readAsDataURL(this.files[0]);
  33. reader.onload=function(){loadImage(this.result)};
  34. };
  35. sidePane.appendChild(fileBrowse);
  36. //image loading
  37. function loadImage(source){
  38. console.log("Found an image. (assume load failed)");
  39. z=new Image();
  40. z.crossOrigin="Anonymous";
  41. z.onload=function(){
  42. console.log("Image loaded successfully!");
  43. moveBoxParent.style.backgroundImage="url('"+source+"')";
  44. isImage=true;
  45. updateImage();
  46. };
  47. z.src=source;
  48. }
  49. /////////////////
  50. //image editing//
  51. /////////////////
  52. var elemX=0,elemY=0;
  53. var offsetX,offsetY;
  54. var moving=false;
  55. var scale=1;
  56. const mouseSens=200;
  57. //dither slider
  58. var ditherSlider=document.createElement("input");
  59. ditherSlider.type="range";
  60. ditherSlider.min="0";
  61. ditherSlider.max="1";
  62. ditherSlider.step="0.001";
  63. ditherSlider.onchange=function(){updateImage()};
  64. sidePane.appendChild(ditherSlider);
  65. //blurring checkbox
  66. var blurring=document.createElement("input");
  67. blurring.type="checkbox";
  68. blurring.checked=true;
  69. blurring.onchange=function(){
  70. c2d.webkitImageSmoothingEnabled=c2d.mozImageSmoothingEnabled=c2d.imageSmoothingEnabled=this.checked;
  71. pc2d.webkitImageSmoothingEnabled=pc2d.mozImageSmoothingEnabled=pc2d.imageSmoothingEnabled=this.checked;
  72. updateImage();
  73. };
  74. sidePane.appendChild(blurring);
  75. sidePane.appendChild(document.createTextNode("Smooth Resize"));
  76. var updateImageTimeout;
  77. //selection box parent
  78. var moveBoxParent=document.createElement("div");
  79. moveBoxParent.style.width=cW+"px";
  80. moveBoxParent.style.height=cH+"px";
  81. moveBoxParent.style.backgroundSize="contain";
  82. moveBoxParent.style.backgroundRepeat="no-repeat";
  83. moveBoxParent.style.backgroundColor="white";
  84. moveBoxParent.style.border="1px solid black";
  85. moveBoxParent.onmousemove=function(e){
  86. if (moving){
  87. updateMoveBoxPos(e.clientX-offsetX,e.clientY-offsetY);
  88. updatePreview();
  89. }
  90. };
  91. moveBoxParent.onmouseup=moveBoxParent.onmouseleave=function(){
  92. moving=false;
  93. moveBox.style.cursor="grab";
  94. updateImage();
  95. };
  96. moveBoxParent.onwheel=function(e){
  97. updateScale(scale+e.deltaY/mouseSens);
  98. updatePreview();
  99. window.clearTimeout(updateImageTimeout);
  100. updateImageTimeout=window.setTimeout(function(){updateImage()},mouseSens);
  101. };
  102. sidepane.appendChild(moveBoxParent);
  103. //selection box
  104. var moveBox=document.createElement("div");
  105. moveBox.style.position="relative";
  106. moveBox.style.border="1px solid red";
  107. moveBox.style.width=cW-2+"px";
  108. moveBox.style.height=cH-2+"px";
  109. moveBox.style.cursor="grab";
  110. moveBox.onmousedown=function(e){
  111. moving=true;
  112. moveBox.style.cursor="grabbing";
  113. offsetX=e.clientX-elemX;
  114. offsetY=e.clientY-elemY;
  115. };
  116. moveBoxParent.appendChild(moveBox);
  117.  
  118. //scale slider
  119. var scaleSlider=document.createElement("input");
  120. scaleSlider.type="range";
  121. scaleSlider.min=0.0001;
  122. scaleSlider.max=1;
  123. scaleSlider.step=0.0001;
  124. scaleSlider.value=1;
  125. scaleSlider.oninput=function(){updateScale(this.value)};
  126. scaleSlider.onchange=function(){updateImage()};
  127. sidepane.appendChild(scaleSlider);
  128. //movebox functions
  129. function updateScale(newScale){
  130. var oldScale=scale;
  131. scale=Math.min(Math.max(newScale,0.001),1);
  132. var midX=elemX+oldScale*cW/2;
  133. var midY=elemY+oldScale*cH/2;
  134. updateMoveBoxPos(midX-scale*cW/2,midY-scale*cH/2);
  135. moveBox.style.width=Math.max(scale*cW-2,0)+"px";
  136. moveBox.style.height=Math.max(scale*cH-2,0)+"px";
  137. scaleSlider.value=scale;
  138. if (oldScale!=scale) updatePreview();
  139. }
  140. function updateMoveBoxPos(x,y){
  141. elemX=Math.min(Math.max(x,0),(1-scale)*cW);
  142. elemY=Math.min(Math.max(y,0),(1-scale)*cH);
  143. moveBox.style.left=elemX+"px";
  144. moveBox.style.top=elemY+"px";
  145. }
  146. //preview/color picker canvas
  147. var pCanvas=document.createElement("canvas");
  148. pCanvas.width=cW;
  149. pCanvas.height=cH;
  150. pCanvas.style.backgroundColor="white";
  151. pCanvas.style.border="1px solid black";
  152. var pc2d=pCanvas.getContext("2d");
  153. pCanvas.onclick=function(e){
  154. if (isImage){
  155. var rect=pCanvas.getBoundingClientRect();
  156. var x=Math.round(e.clientX-rect.left-1);
  157. var y=Math.round(e.clientY-rect.top-1);
  158. var pixel=pc2d.getImageData(x,y,1,1).data;
  159. if (pixel[3]==0) pixel=[255,255,255,255];
  160. var button=document.querySelector('#chatdraw button-area button[data-selectedcolor="true"]');
  161. button.style.color=rgbToFillStyle(pixel);
  162. console.log("Got color "+pixel.join()+" at "+x+","+y);
  163. updateImage();
  164. }
  165. };
  166. sidePane.appendChild(pCanvas);
  167. ////////////////////
  168. //Image Conversion//
  169. ////////////////////
  170. var colorButtons=document.querySelectorAll("#chatdraw button-area button.colorChange");
  171. var paletteSize=colorButtons.length;
  172. var colorWeight=[3,6,1];
  173. document.getElementById("colorPicker").addEventListener("change",function(){updateImage()});
  174. document.querySelector("#chatdraw button-area button").addEventListener("click",function(){
  175. isImage=false;
  176. moveBoxParent.style.backgroundImage="";
  177. pc2d.clearRect(0,0,cW,cH);
  178. });//✖ button
  179. function updateImage(){
  180. if (isImage){
  181. updatePreview();
  182. putImage(z);
  183. }
  184. }
  185. function updatePreview(){
  186. if (isImage){
  187. pc2d.clearRect(0,0,cW,cH);
  188. var maxHeight=Math.max(z.width/cW,z.height/cH)*cM;
  189. pc2d.drawImage(z,elemX/cW*maxHeight*cR,elemY/cH*maxHeight,scale*maxHeight*cR,scale*maxHeight,0,0,cW,cH);
  190. }
  191. }
  192. //the actual converter!
  193. function putImage(img){
  194. canvas.hidden=true;
  195. var dither=ditherSlider.value;
  196. var i,palette=[];
  197. for(i=0;i<paletteSize;i++) palette.push(fillStyleToRgb(colorButtons[i].style.color));
  198. c2d.rect(0,0,cW,cH);c2d.fillStyle="white";c2d.fill(); //clear canvas
  199. var maxHeight=Math.max(img.width/cW,img.height/cH)*cM;
  200. c2d.drawImage(img,elemX/cW*maxHeight*cR,elemY/cH*maxHeight,scale*maxHeight*cR,scale*maxHeight,0,0,cW,cH);
  201. var data=c2d.getImageData(0,0,cW,cH);
  202. for(var x=0,bestIndex,nextErr;x<cW*cH*4;x+=4){
  203. //find the best color
  204. var bestDist=Infinity;
  205. for (i=0;i<paletteSize&&bestDist!==0;i++) {
  206. for (var j=0,dist=0,color=palette[i];j<3;j++)
  207. dist+=Math.abs(data.data[x+j]-color[j])*colorWeight[j];
  208. if (dist<bestDist){bestDist=dist;bestIndex=i}
  209. }
  210. //dithering
  211. if (dither){
  212. for (i=0;i<3;i++) {
  213. var err=(data.data[x+i]-palette[bestIndex][i])*dither/3;
  214. //if (err<0) nextErr=-err; else nextErr=0;
  215. data.data[x+i]=palette[bestIndex][i];
  216. data.data[x +4+i]+=err; // right
  217. data.data[x+cW*4-4+i]+=err/2; // bottom left
  218. data.data[x+cW*4 +i]+=err; // bottom
  219. data.data[x+cW*4+4+i]+=err/2; // bottom right
  220. }
  221. } else for (i=0;i<3;i++) data.data[x+i]=palette[bestIndex][i];
  222. }
  223. c2d.putImageData(data,0,0);
  224. canvas.hidden=false;
  225. console.log("Image conversion sucessful.");
  226. }
  227. },2000);
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement