Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 175 additions & 0 deletions README.es-ES.md
Original file line number Diff line number Diff line change
@@ -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.