{"id":26912669,"url":"https://github.com/seb-rm/javasript_html_css-image-editor","last_synced_at":"2026-04-09T23:56:47.771Z","repository":{"id":285464389,"uuid":"955576571","full_name":"Seb-RM/Javasript_Html_Css-Image-Editor","owner":"Seb-RM","description":"Basic Image Editor es una aplicación web ligera que permite realizar ediciones básicas a imágenes directamente en el navegador.","archived":false,"fork":false,"pushed_at":"2025-03-31T21:29:56.000Z","size":9,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T22:28:07.114Z","etag":null,"topics":["css3","dom-manipulation","html5","javascript"],"latest_commit_sha":null,"homepage":"https://seb-rm.github.io/Javasript_Html_Css-Image-Editor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Seb-RM.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-26T21:24:50.000Z","updated_at":"2025-03-31T21:30:00.000Z","dependencies_parsed_at":"2025-03-31T22:38:07.916Z","dependency_job_id":null,"html_url":"https://github.com/Seb-RM/Javasript_Html_Css-Image-Editor","commit_stats":null,"previous_names":["seb-rm/javasript_html_css-image-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Seb-RM/Javasript_Html_Css-Image-Editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavasript_Html_Css-Image-Editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavasript_Html_Css-Image-Editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavasript_Html_Css-Image-Editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavasript_Html_Css-Image-Editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Seb-RM","download_url":"https://codeload.github.com/Seb-RM/Javasript_Html_Css-Image-Editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavasript_Html_Css-Image-Editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270912539,"owners_count":24666745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","dom-manipulation","html5","javascript"],"created_at":"2025-04-01T15:24:37.859Z","updated_at":"2026-04-09T23:56:47.744Z","avatar_url":"https://github.com/Seb-RM.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🖼️ Basic Image Editor - Editor de Imágenes Básico\n\nEditor de Imágenes\nUn editor de imágenes sencillo pero poderoso para transformaciones básicas.\n\n## 📝 Descripción\n\nEste Basic Image Editor es una aplicación web ligera que permite realizar ediciones básicas a imágenes directamente en el navegador. Con una interfaz intuitiva y minimalista, los usuarios pueden aplicar filtros, ajustar colores y voltear imágenes sin necesidad de software complejo.\n\n## ✨ Características Principales\n\n- 🔄 Aplicar efectos de desenfoque (blur)\n\n- 🌗 Ajustar contraste de la imagen\n\n- 🌈 Rotar tonos (hue-rotate)\n\n- 🟤 Aplicar efecto sepia\n\n- ↔️ Voltear imagen horizontal/verticalmente\n\n- ⬇️ Descargar la imagen editada\n\n- 🎨 Interfaz con diseño atractivo y oscuro\n\n## 🛠️ Tecnologías Utilizadas\n\n- **HTML5** - Estructura de la aplicación\n\n- **CSS3** - Estilos y diseño responsive\n\n- **JavaScript Vanilla** - Lógica y manipulación del DOM\n\n- **Canvas API** - Para procesamiento y descarga de imágenes\n\n## 🚀 Funcionamiento\n\nLa aplicación funciona completamente en el cliente (frontend) y no requiere backend. Estos son los componentes clave:\n\n### 🖌️ Manipulación de Imágenes\n\nEl corazón de la aplicación está en el archivo `script.js` donde se implementan las funciones principales:\n\n```javascript\nfunction addFilter() {\n    image.style.filter = `blur(${filterA.value}px)\n                        contrast(${filterB.value}%)\n                        hue-rotate(${filterC.value}deg)\n                        sepia(${filterD.value}%)`;\n}\n```\n\nEsta función combina todos los filtros seleccionados y los aplica a la imagen usando la propiedad `filter` de CSS.\n\n### 🔄 Volteado de Imagen\n\n```javascript\nfunction flipImage() {\n    if (flipXBtn.checked) {\n        image.style.transform = \"scaleX(-1)\";\n    } else if (flipYBtn.checked) {\n        image.style.transform = \"scaleY(-1)\";\n    } else {\n        image.style.transform = \"scale(1,1)\";\n    }\n}\n```\n\nUsa transformaciones CSS para voltear la imagen horizontal o verticalmente según la selección del usuario.\n\n### ⬇️ Descarga de Imagen\n\n```javascript\ndownloadButton.onclick = () =\u003e {\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n    // ... configuración del canvas ...\n    ctx.drawImage(img, -canvas.width / 2, canvas.height / 2, canvas.width, canvas.height);\n    const link = document.createElement(\"a\");\n    link.download = 'edited-image.png';\n    link.href = canvas.toDataURL();\n    link.click();\n};\n```\n\nEsta función crea un canvas temporal, aplica los filtros y transformaciones, y luego genera un enlace de descarga.\n\n## 🎮 Cómo Usar la Aplicación\n\n1. **Sube una imagen** haciendo clic en \"Choose an Image\"\n\n1. **Ajusta los controles deslizantes** para aplicar filtros:\n\n    - Blur: Añade desenfoque\n\n    - Contrast: Ajusta el contraste\n\n    - Hue-Rotate: Cambia los tonos de color\n\n    - Sepia: Aplica efecto sepia\n\n1. **Selecciona la orientación** con los botones de radio\n\n1. **Descarga tu imagen editada** con el botón \"Download Image\"\n\n## 📥 Instalación y Desarrollo\n\nPara ejecutar localmente o contribuir al proyecto:\n\n1. Clona el repositorio:\n\n    ```bash\n    git clone https://github.com/Seb-RM/Javasript_Html_Css-Image-Editor.git\n    ```\n\n1. Abre el archivo `index.html` en tu navegador\n\n1. ¡Listo! No se requieren dependencias adicionales\n\n## 🌟 Fragmentos Destacados\n\n### Manejo de Eventos\n\n```javascript\nconst sliders = document.querySelectorAll(\".filter input[type='range']\");\nsliders.forEach((slider) =\u003e {\n    slider.addEventListener(\"input\", addFilter);\n    slider.addEventListener(\"input\", showRangeValue);\n});\n```\n\nEste código muestra cómo se manejan los eventos de los controles deslizantes para aplicar los filtros en tiempo real.\n\n### Lectura de Archivos\n\n```javascript\nuploadButton.onchange = () =\u003e {\n    resetFilter();\n    const reader = new FileReader();\n    reader.readAsDataURL(uploadButton.files[0]);\n    reader.onload = () =\u003e {\n        image.setAttribute(\"src\", reader.result);\n    };\n};\n```\n\nAquí se usa la API FileReader para cargar la imagen seleccionada por el usuario y mostrarla en el editor.\n\n## 🎨 Diseño Responsive\n\nEl CSS utiliza unidades relativas (vmin) y un diseño basado en grid para asegurar que la aplicación se vea bien en diferentes tamaños de pantalla:\n\n```css\n.wrapper {\n    width: 85vw;\n    min-height: 50vmin;\n    display: grid;\n    grid-template-columns: 5fr 7fr;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-rm%2Fjavasript_html_css-image-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseb-rm%2Fjavasript_html_css-image-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-rm%2Fjavasript_html_css-image-editor/lists"}