así que básicamente cargo una imagen a través de input de tipo de file y tengo una función que lee el contenido del archivo. Supongo que cada archivo dado es un archivo PNG.
Aquí está mi función:
const handleFile = (e: Event) => { const target = e.target as HTMLInputElement; const files = target.files; if (files && files.length > 0) { const file: File = files[0]; console.log("file =", file); var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onloadend = function (evt: ProgressEvent<FileReader>) { if (evt.target!.readyState === FileReader.DONE) { const arrayBuffer = evt.target!.result as ArrayBuffer; const array = new Uint8Array(arrayBuffer); console.log("array =", array); console.log("array.length =", array.length); console.log("array.byteLength =", array.byteLength); } }; } }; Para mis pruebas, utilizo una imagen de 16x16 (el bloque de piedra en Minecraft) llamada stone.png . Aquí está el resultado en la consola:
array = Uint8Array(215) [137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 16, 0, 0, 0, 16, 8, 6, 0, 0, 0, 31, 243, 255, 97, 0, 0, 0, 158, 73, 68, 65, 84, 56, 203, 133, 83, 65, 18, 0, 49, 4, 243, 92, 15, 112, 239, 19, 60, 185, 123, 98, 210, 52, 186, 7, 195, 152, 18, 34, 181, 204, 220, 104, 107, 173, 29, 17, 59, 34, 58, 118, 247, 35, 135, 102, 21, 96, 1, 63, 42, 115, 247, 110, 86, 111, 13, 81, 16, 137, 145, 167, …][0 … 99]0: 1371: 802: 783: 714: 135: 106: 267: 108: 09: 010: 011: 1312: 7313: 7214: 6815: 8216: 017: 018: 019: 1620: 021: 022: 023: 1624: 825: 626: 027: 028: 029: 3130: 24331: 25532: 9733: 034: 035: 036: 15837: 7338: 6839: 6540: 8441: 5642: 20343: 13344: 8345: 6546: 1847: 048: 4949: 450: 24351: 9252: 1553: 11254: 23955: 1956: 6057: 18558: 12359: 9860: 21061: 5262: 18663: 764: 19565: 15266: 1867: 3468: 18169: 20470: 22071: 10472: 10773: 17374: 2975: 1776: 5977: 3478: 5879: 11880: 24781: 3582: 13583: 10284: 2185: 9686: 187: 6388: 4289: 11590: 24791: 11092: 8693: 11194: 1395: 8196: 1697: 13798: 14599: 167[100 … 199][200 … 214]buffer: ArrayBuffer(215) byteLength: 215byteOffset: 0length: 215Symbol(Symbol.toStringTag): "Uint8Array"[[Prototype]]: TypedArray array.length = 215 array.byteLength = 215Mi pregunta es... ¿Cómo interpreto esos números? Quiero poder tomar cada píxel individual de la imagen y extraer su color hexadecimal.
¿Lo estoy haciendo bien o debería hacer otra cosa?
NOTAS: la imagen es 255 B y dice "color de 32 bits", pero no sé qué significa eso.
Puede haber una manera más fácil, pero podría:
En el siguiente ejemplo, puede seleccionar su pequeño archivo .png y verá una serie de números que se registran en la consola.
La forma de leer esa matriz es:
Si necesita un solo píxel, puede dividir una parte de la matriz de datos de la imagen o usar la llamada getImageData directamente.
const handleFile = (e) => { const [ file ] = e.target.files; if (file) { const reader = new FileReader(); reader.addEventListener("load", e => { const img = document.createElement("img"); img.addEventListener("load", e => { const cvs = document.createElement("canvas"); const ctx = cvs.getContext("2d"); ctx.drawImage(img, 0, 0); console.log(ctx.getImageData(0, 0, img.width, img.height)); }); img.src = e.target.result }, false); reader.readAsDataURL(file); } }; document.querySelector("input").addEventListener("change", handleFile); <input type="file">