| chaos_Source | chaos_Hovered color | chaos_Selected color | chaos_Source 2 | chaos_Hovered color 2 | chaos_Selected color 2 | chaos_Pixel color 2 | chaos_Pixel colorCrop 2 | chaos_Palette colorCrop 2 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
||||||||||||||||
|
X:
Y:
W:
H:
cropBox square (px) |
|
|
|
|
|
|
|
|
|
` ; const inBLOBhtml2 = `
` ; */ //const inBLOBurl = URL.createObjectURL( //new Blob([inBLOBhtml], { type: "text/html" }) //); //const inBLOBwindow = window.open( //inBLOBurl, //"win", //`width=300,height=500,screenX=10,screenY=10` //); //const inBLOBurl2 = URL.createObjectURL( //new Blob([inBLOBhtml2], { type: "text/html" }) //); //const inBLOBwindow2 = window.open( //inBLOBurl2, //"win", //`width=300,height=500,screenX=10,screenY=10` //); //var chaosImg = new Blob([blob], { type: 'image/png' }); //var chaosImgURL = URL.createObjectURL(chaosImg); const chaosIMGurl2 = URL.createObjectURL( new Blob([chaos_newImg2], { type: "image/png" }) ); // firstEVER opens new window with blob of chaos_newImg2 //const inBLOBwindow3 = window.open( //chaosIMGurl, //"win", //`width=300,height=200,screenX=10,screenY=10` //); // firstEVER opens new window with iframe with src = chaos_url2 //var chaos = window.open("chaosIMGurl",`width=300,height=100,screenX=10,screenY=10`); // var win = window.open("win",`width=300,height=500,screenX=10,screenY=10`); //chaos.document.write('') // chaos.document.write('') // firstEVER write "file" chaos_url2 img as innerHTML to id imgfile //const imgFile = document.getElementById("imgfile"); //imgFile.innerHTML = chaosIMGurl; // imgFile.innerHTML = chaos_url2; // chaos_url2 possibly pullsERROR not type Blob //const imgFile2 = document.getElementById("imgfile"); //chaos_img2.innerHTML = chaos_newImg2; // chaosIMGurl; // chaos_img2.innerHTML = chaos_url2; // const image = new Image(); // const file = imgFile2.files[0]; // firstEVER almost chaosCrop // firstEVER almost ,image: chaos_url2 // ,image: 'demo.png' // notFUNCTIONALLYfunctional chaos_newImg2 chaosIMGurl /* var infoNode2 = document.getElementById('info2'); var ic2 = new ICropper( 'cropperContainer2' ,{ ratio: 0 ,image: chaos_url2 ,onChange: function(info){ //onChange must be set when constructing. infoNode2.innerHTML = 'Left: ' + info.l + 'px, Top: ' + info.t + 'px, Width: ' + info.w + 'px, Height: ' + info.h + 'px'; } ,preview: [ 'previewSmall2' ] }); //use bindPreview to dynamically add preview nodes ic2.bindPreview('previewBig2'); var infoNode3 = document.getElementById('info3'); var ic3 = new ICropper( 'chaos_cropperContainer2' ,{ ratio: 0 ,image: chaos_url2 ,onChange: function(info){ //onChange must be set when constructing. // infoNode3.innerHTML = chaos_newImg2; // chaos_newImg2 chaos_url2 infoNode3.innerHTML = 'Left: ' + info.l + 'px, Top: ' + info.t + 'px, Width: ' + info.w + 'px, Height: ' + info.h + 'px'; //chaos_img2.innerHTML = chaosIMGurl; // chaos_img2.innerHTML = chaos_url2; } ,preview: [ 'chaos_previewSmall2' ] }); //use bindPreview to dynamically add preview nodes ic2.bindPreview('chaos_previewBig2'); */ // firstEVERcolorPalette // const imgFile = document.getElementById("imgfile"); const image = chaos_newImg2; // chaos_url2; // chaos_newImg2; // const image = new Image(); const file = chaos_url2; // const file = chaosIMGurl; // const file = imgFile.files[0]; // const fileReader = new FileReader(); // Whenever file & image is loaded procced to extract the information from the image // fileReader.onload = () => { // image.onload = () => { // Set the canvas size to be the same as of the // chaos image // uploaded image const canvas = document.getElementById("canvas"); // const canvas = document.getElementById("chaos_Pixel_colori"); // const canvas = document.getElementById("canvas"); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); // find this image canvas = source /** * getImageData returns an array full of RGBA values * each pixel consists of four values: the red value of the colour, the green, the blue and the alpha * (transparency). For array value consistency reasons, * the alpha is not from 0 to 1 like it is in the RGBA of CSS, but from 0 to 255. */ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Convert the image data to RGB values so its much simpler const rgbArray = buildRgb(imageData.data); /** * Color quantization * A process that reduces the number of colors used in an image * while trying to visually maintin the original image as much as possible */ const quantColors = quantization(rgbArray, 0); // Create the HTML structure to show the color palette ////buildPalette(quantColors); // firstEVERcolorPalette cropCanvas n cropBoxCanvas // const imgFile = document.getElementById("imgfile"); const cropCanvasimage = chaos_newImg2; // chaos_url2; // chaos_newImg2; // const image = new Image(); const cropCanvasfile = chaos_url2; // const file = chaosIMGurl; // const file = imgFile.files[0]; // const fileReader = new FileReader(); const cropCanvasimage2 = chaos_newImg2; // chaos_url2; // chaos_newImg2; // const image = new Image(); const cropCanvasfile2 = chaos_url2; // const file = chaosIMGurl; // const file = imgFile.files[0]; const cropBoxCanvasimage = cropBoxchaos_newImg2; // chaos_newImg2; // chaos_url2; // chaos_newImg2; // const image = new Image(); const cropBoxCanvasfile = chaos_url2; // const file = chaosIMGurl; // const file = imgFile.files[0]; // Whenever file & image is loaded procced to extract the information from the image // fileReader.onload = () => { // image.onload = () => { // Set the canvas size to be the same as of the // chaos image // uploaded image const cropCanvas = document.getElementById("cropCanvas"); // const canvas = document.getElementById("chaos_Pixel_colori"); // const canvas = document.getElementById("canvas"); cropCanvas.width = cropCanvasimage.width; cropCanvas.height = cropCanvasimage.height; const ctxcropCanvas = cropCanvas.getContext("2d"); ctxcropCanvas.drawImage(cropCanvasimage, 0, 0); const cropBoxCanvas = document.getElementById("cropBoxCanvas"); // const canvas = document.getElementById("chaos_Pixel_colori"); // const canvas = document.getElementById("canvas"); cropBoxCanvas.width = cropBoxCanvasimage.width; cropBoxCanvas.height = cropBoxCanvasimage.height; const ctxcropBoxCanvas = cropBoxCanvas.getContext("2d"); // danteDgiggle dont draw so src = "" ctxcropBoxCanvas.drawImage(cropBoxCanvasimage, 0, 0); const cropCanvas2 = document.getElementById("cropCanvas2"); // const canvas = document.getElementById("chaos_Pixel_colori"); // const canvas = document.getElementById("canvas"); cropCanvas2.width = cropCanvasimage2.width; cropCanvas2.height = cropCanvasimage2.height; const ctxcropCanvas2 = cropCanvas2.getContext("2d"); ctxcropCanvas2.drawImage(cropCanvasimage2, 0, 0); /** * getImageData returns an array full of RGBA values * each pixel consists of four values: the red value of the colour, the green, the blue and the alpha * (transparency). For array value consistency reasons, * the alpha is not from 0 to 1 like it is in the RGBA of CSS, but from 0 to 255. */ const cropCanvasimageData = ctxcropCanvas.getImageData(0, 0, cropCanvas.width, cropCanvas.height); const cropBoxCanvasimageData = ctxcropBoxCanvas.getImageData(0, 0, cropBoxCanvas.width, cropBoxCanvas.height); // Convert the image data to RGB values so its much simpler const cropCanvasrgbArray = buildRgb(cropCanvasimageData.data); const cropBoxCanvasrgbArray = buildRgb(cropBoxCanvasimageData.data); /** * Color quantization * A process that reduces the number of colors used in an image * while trying to visually maintin the original image as much as possible */ const cropCanvasquantColors = quantization(cropCanvasrgbArray, 0); const cropBoxCanvasquantColors = quantization(cropBoxCanvasrgbArray, 0); //remOUT var cropBoxCanvasquantColors_multiDeriv_1_15_more = quantizationagainMore3(cropBoxCanvasrgbArray, 0); // const cropBoxCanvasquantColors_multiDeriv_1_15_more = quantizationagainMore3(cropBoxCanvasrgbArray, 0); // Create the HTML structure to show the color palette //// buildPalettecropCanvas(cropCanvasquantColors); ////buildPalettecropBoxCanvas(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_colori(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_coloriText(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_coloriText_deltaPower(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_coloriText_2ndDeriv(cropBoxCanvasquantColors); // buildPalettecropBoxCanvas_chaos_Pixel_coloriText_2ndDeriv(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_coloriText_3rdDeriv(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_coloriText_4thDeriv(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_1_4(cropBoxCanvasquantColors); //buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_5_more(cropBoxCanvasquantColors); ////buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_6_only(cropBoxCanvasquantColors); //remOUT buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_1_15_more(cropBoxCanvasquantColors_multiDeriv_1_15_more); // buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_1_15_more(cropBoxCanvasrgbArray); // buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_1_15_more(cropBoxCanvasquantColors); //remOUT buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_1_15_more_data(cropBoxCanvasquantColors_multiDeriv_1_15_more); // buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_1_15_more(cropBoxCanvasrgbArray); // buildPalettecropBoxCanvas_chaos_Pixel_coloriText_multiDeriv_1_15_more(cropBoxCanvasquantColors); //buildPalettecropBoxCanvas_chaos_Pixel_coloriText_5thDeriv(cropBoxCanvasquantColors); // open inDpureChaosDiDiD4232.chaos.spaceid.art/inDchaosDna_data.html in newWINDOW - zoiks - writes window over itself wiyh "win"- fixed by modulation to "win2" const inBLOBhtml_data = `