diff --git a/README.es-ES.md b/README.es-ES.md new file mode 100644 index 0000000..07c5334 --- /dev/null +++ b/README.es-ES.md @@ -0,0 +1,175 @@ +# image2pixel + +Una herramienta web que convierte imágenes regulares en pixel art con ajustes personalizables. + +| Original | Resultado | +|----------|-----------| +| ![Original 1](web/o1.PNG) | ![Result 1](web/r1.PNG) | +| ![Original 2](web/o2.PNG) | ![Result 2](web/r2.PNG) | +| ![Original 3](web/o3.png) | ![Result 3](web/r3.PNG) | + +## Versión + +Versión actual: v1.0.7 + + +v1.0.7 + +- Se añadió la casilla de exportación 1:1 en el panel de resultados (guarda un píxel físico por bloque de color) + +v1.0.6 + +- Se añadió soporte para exportación de planos de cuentas perler (拼豆) +- Se añadieron 7 paletas de marcas de cuentas termofusibles integradas (Perler, Hama, Nabbi, Artkal) + +v1.0.4 + +- Se añadió soporte para Impresión + +v1.0.3 + +- Se añadió soporte para imágenes con transparencia (canal alfa) + +v1.0.2 + +- Se añadió la función de visualización de cuadrícula +- Se mejoró la interacción del botón de descarga + +v1.0.1 + +- Se añadió una media query de CSS para ocultar el contenedor de la imagen original en pantallas móviles (ancho <= 768px) +- Se ajustó el contenedor de resultados para que ocupe todo el ancho y proporcione una mejor utilización de la altura +- Se mejoró la experiencia de visualización móvil centrándose en el resultado convertido + +v1.0.0 + +- Interfaz fácil de usar +- Vista previa en tiempo real +- Tamaño de bloque de píxel ajustable (2-20 píxeles) +- Paleta de colores personalizable (2-64 colores) +- Descarga de resultados como PNG +- No requiere instalación - funciona en el navegador + +### Detalles Técnicos + +#### Detección de Color de Fondo +- Muestrea las esquinas de la imagen para determinar el color de fondo +- Calcula los valores RGB promedio para una detección consistente + +#### Algoritmo de Eliminación de Anti-Aliasing +- Utiliza la comparación de distancia de color +- Umbral predeterminado: 30 (ajustable) +- Reemplaza colores similares con el color de fondo exacto + +#### Escalado de Imagen +- Escalado dinámico basado en las dimensiones de entrada +- Preserva la relación de aspecto +- Utiliza el escalado del vecino más cercano (nearest-neighbor) para resultados de píxeles perfectos + +## Cómo Usar + +1. Sube una imagen utilizando el selector de archivos +2. Ajusta la configuración: + - Block Size (Tamaño de bloque): Controla el tamaño del píxel + - Color Count (Cantidad de colores): Establece el número de colores en la imagen final +3. La imagen se procesará automáticamente con: + - Dimensiones escaladas (si es necesario) + - Bloqueo de píxeles + - Cuantización de color + - Eliminación de anti-aliasing +4. Descarga o imprime el resultado utilizando los botones Save o Print + - La función de impresión llena automáticamente una página A4 + - La visualización de la cuadrícula se preserva al imprimir (si está activada) + +## Versión de Escritorio en Steam + +¡Una versión de escritorio de este generador de pixel art ya está disponible en Steam! Basada en el mismo algoritmo, la aplicación de escritorio ofrece funciones adicionales y mayor comodidad. + +**[Image2pixel-PixelArtGenerator en Steam](https://store.steampowered.com/app/3475120)** + +Si disfrutas de esta herramienta web, por favor considera agregar la versión de escritorio a tu lista de deseos de Steam. ¡Gracias por tu apoyo! 🙏 + +## Requisitos Técnicos + +- Navegador web moderno con soporte para HTML5 Canvas +- JavaScript habilitado +- Navegadores recomendados: Chrome, Firefox, Safari, Edge + +## Características + +- Interfaz fácil de usar +- Vista previa en tiempo real +- Tamaño de bloque de píxel ajustable (2-20 píxeles) +- Paleta de colores personalizable (2-64 colores) +- Descarga de resultados como PNG +- Impresión de resultados directamente desde el navegador +- No requiere instalación - funciona en el navegador +- Experiencia de visualización móvil mejorada + +## Estructura del Proyecto + +``` +web/ +├── css/ +│ └── style.css # Estilos +├── js/ +│ └── main.js # Funcionalidad principal +└── index.html # Página principal +``` + +## Desarrollo Local + +Simplemente clona el repositorio y abre `web/index.html` en tu navegador. No se requiere proceso de compilación ni dependencias. + +```bash +git clone htts：//github.com/JobYu/image2pixel-web.git +``` + +## Extensión de Chrome + +Este repositorio también incluye una Extensión de Chrome en `chrome-extension/` que abre una ventana emergente para los ajustes de selección de imagen, y también puede convertir una imagen a través del menú contextual (clic derecho) del navegador. + +### Cargar descomprimida + +1. Abre `chrome://extensions` +2. Activa el `Modo de desarrollador` +3. Haz clic en `Cargar descomprimida` +4. Selecciona la carpeta `chrome-extension` de este repositorio + +### Uso + +1. Abre cualquier página web que contenga imágenes +2. Haz clic en el icono de la barra de herramientas `Image2Pixel Picker` para abrir la ventana emergente +3. Ajusta `Pixel Size` y `Color Count`, luego haz clic en el botón `Select Image` en la ventana emergente +4. Regresa a la página y haz clic en la imagen que deseas convertir +5. Para convertir solo una imagen sin entrar en el modo de selección, haz clic derecho sobre esa imagen y elige `Convert this image to pixel art` + +La extensión ya no inyecta su tiempo de ejecución de página por defecto. El script de contenido se inyecta solo cuando el usuario abre el flujo de la ventana emergente o utiliza la acción de conversión de clic derecho. Si la extensión necesita obtener los bytes de la imagen original de un host de imágenes específico, Chrome solicitará acceso opcional al sitio para ese host en lugar de otorgar un acceso amplio desde el principio. + +### Archivos de lanzamiento de Chrome Web Store + +Los materiales listos para la tienda se encuentran aquí: + +- `chrome-extension/store/chrome-web-store-listing.md` +- `chrome-extension/store/privacy-policy.md` +- `chrome-extension/store/release-checklist.md` +- `web/chrome-extension-privacy-policy.html` + +Estos archivos incluyen: + +- Copia de la descripción en inglés y chino tradicional +- Texto de justificación de permisos +- Un borrador de política de privacidad específico de la extensión +- Una lista de verificación previa al envío para capturas de pantalla, empaquetado y campos del panel de control + +### Empaquetado para el envío + +Antes de subir a la Chrome Web Store, empaqueta el contenido de `chrome-extension/` como un archivo ZIP. La carpeta `store/` puede permanecer en el paquete ya que no afecta el comportamiento en tiempo de ejecución, pero es seguro excluirla si prefieres un archivo de carga más pequeño. + +## Licencia + +Copyright © 2024 [image2pixel.app](https://image2pixel.app). Todos los derechos reservados. + +## Agradecimientos + +Gracias a [Pixel It](https://github.com/giventofly/pixelit) por la inspiración.