Estoy construyendo un transmutador de proyección de mapas del lado del cliente. Debo pedirle al cliente que seleccione una imagen, cree un objeto de imagen, obtenga su tamaño, cambie el tamaño de un lienzo y pinte la imagen en el lienzo. Estoy atascado en el paso uno.
Una prioridad en este proyecto es la legibilidad para que otros archivistas puedan mejorarla. Tengo prohibido usar recursividad, autorreferencia, funciones que se llaman durante la creación, nombres de variables que son idénticos a clases de CUALQUIER tipo y funciones de flecha.
Esto debería funcionar. No es asi. No hay comentarios utilizables en la consola.
function imagetocanvas(element) { let file = element.files[0]; let reader = new FileReader(); reader.onloadend = function() { const bob = reader.result; var inmap = new Image(); inmap.src = bob; alert(bob.width); // UNDEFINED?...WHY?? } reader.readAsDataURL(file); } <input type="file" accept="image/*" id="inputtag" onchange="imagetocanvas(inputtag)" > <canvas id="primary" width="" height="" >Creo que lo siguiente se ajusta a sus criterios restrictivos. Aborda ambas preocupaciones que se plantearon en los comentarios; ninguno de los cuales contradice al otro.
Image antes de intentar acceder a su width .URL.createObjectURL en lugar de un FileReader si todo lo que está haciendo es mostrar el archivo. Consulte ¿Cómo trabajar con la URL de un objeto fileReader?Incluso he agregado la representación de la imagen al lienzo. Consulte Cómo agregar una imagen al lienzo para obtener más información sobre ese proceso.
const fileInput = document.getElementById('inputtag'); const currentImage = new Image(); const primaryCanvas = document.getElementById('primary'); const context = primaryCanvas.getContext('2d'); // Handle changes to the selected file. fileInput.addEventListener('change', function (changeEvent) { // Guard against invalid input (no files). if (!changeEvent?.target?.files?.length) return; // Read the file as a blob. const firstFile = changeEvent.target.files[0]; const fileUrl = URL.createObjectURL(firstFile); // Update the image. currentImage.src = fileUrl; }); // Wait for the image to load before accessing its // current width or drawing it to the canvas. currentImage.addEventListener('load', function () { console.log(currentImage.width); context.drawImage(currentImage, 0, 0); }); <input type="file" accept="image/*" id="inputtag"> <canvas id="primary" width="" height=""> Utilicé el encadenamiento opcional ( ?. ) para verificar que la matriz de files existiera y tuviera al menos un elemento. Si no está autorizado a usarlo, una verificación equivalente sería:
// Guard against invalid input (no files). if (!changeEvent || !changeEvent.target || !changeEvent.target.files || !changeEvent.target.files.length) { return; } La verificación contra length sirve para verificar undefined , null y length == 0 porque todos son falsos . Este no es un concepto específico de JS, pero puede que no le resulte familiar según las características del lenguaje a las que esté acostumbrado.
Como referencia, aquí está la documentación de Blob y la documentación de URL.createObjectURL que juntas cubren cómo se leen los archivos en la memoria y cómo se accede a ellos.