HTML CSS a Imagen API

Presentamos la API HTML CSS a Imagen, una herramienta mágica para crear visuales cautivadores a partir de la magia HTML y CSS. Transmuta tu código en impresionantes imágenes PNG, JPEG o WebP sin esfuerzo. Aprovecha el poder de pausar, personalizar y deslumbrar con precisión perfecta en píxeles. Desata tu imaginación, píxel por píxel.

Acerca de la API:  

Presentamos la API HTML CSS a Imagen: Tu Puerta de Entrada a Contenidos Visuales Impresionantes

En la era digital, el contenido visual reina supremo, y crear imágenes llamativas a partir de HTML y CSS nunca ha sido tan fácil como con la API HTML CSS a Imagen. Esta robusta API empodera a desarrolladores, diseñadores y creadores de contenido para transformar sin esfuerzo elementos web en imágenes PNG, JPEG o WebP, abriendo un mundo de posibilidades para mejorar sitios web, aplicaciones y materiales de marketing digital.

Características Clave:

  1. Conversión Versátil: Con esta API en tus manos, puedes convertir sin problemas código HTML y CSS simple en imágenes PNG, JPEG o WebP de alta calidad. No necesitas software complejo ni creación manual de imágenes, solo ingresa tu código y observa cómo tu visión cobra vida.

  2. Temporización Precisa: La paciencia da sus frutos, especialmente al capturar contenido web dinámico. La API ofrece la capacidad de esperar un número especificado de milisegundos antes de tomar una captura de pantalla. Esto asegura que tus imágenes representen con precisión el estado completamente cargado de la página web, evitando capturas prematuras y proporcionando a los usuarios una experiencia de navegación fluida.

  3. Magia de URL: A veces, toda la web es tu lienzo. Genera imágenes directamente desde URLs de sitios web, con la opción de especificar altura y ancho. Ya sea que estés mostrando contenido web o monitoreando cambios, esta función simplifica el proceso y te permite capturar exactamente lo que necesitas.

  4. Control Perfecto de Píxeles: Perfeccionar las proporciones de píxeles es muy fácil con la funcionalidad de ajuste de proporción de píxeles de la API. Logra niveles precisos de claridad y detalle en tus capturas de pantalla, asegurando que tus imágenes se vean impresionantes en una variedad de dispositivos y resoluciones.

 

¿Qué recibe esta API y qué proporciona tu API (entrada/salida)?

Pasa tu HTML CSS o URL para recuperar una imagen generada. 

 

¿Cuáles son los casos de uso más comunes de esta API?

Presentamos la API HTML CSS a Imagen: Tu Puerta de Entrada a Contenidos Visuales Impresionantes

En la era digital, el contenido visual reina supremo, y crear imágenes llamativas a partir de HTML y CSS nunca ha sido tan fácil como con la API HTML CSS a Imagen. Esta robusta API empodera a desarrolladores, diseñadores y creadores de contenido para transformar sin esfuerzo elementos web en imágenes PNG, JPEG o WebP, abriendo un mundo de posibilidades para mejorar sitios web, aplicaciones y materiales de marketing digital.

Características Clave:

  1. Conversión Versátil: Con esta API en tus manos, puedes convertir sin problemas código HTML y CSS simple en imágenes PNG, JPEG o WebP de alta calidad. No necesitas software complejo ni creación manual de imágenes, solo ingresa tu código y observa cómo tu visión cobra vida.

  2. Temporización Precisa: La paciencia da sus frutos, especialmente al capturar contenido web dinámico. La API ofrece la capacidad de esperar un número especificado de milisegundos antes de tomar una captura de pantalla. Esto asegura que tus imágenes representen con precisión el estado completamente cargado de la página web, evitando capturas prematuras y proporcionando a los usuarios una experiencia de navegación fluida.

  3. Magia de URL: A veces, toda la web es tu lienzo. Genera imágenes directamente desde URLs de sitios web, con la opción de especificar altura y ancho. Ya sea que estés mostrando contenido web o monitoreando cambios, esta función simplifica el proceso y te permite capturar exactamente lo que necesitas.

  4. Control Perfecto de Píxeles: Perfeccionar las proporciones de píxeles es muy fácil con la funcionalidad de ajuste de proporción de píxeles de la API. Logra niveles precisos de claridad y detalle en tus capturas de pantalla, asegurando que tus imágenes se vean impresionantes en una variedad de dispositivos y resoluciones.

 

¿Hay alguna limitación en tus planes?

Además del número de llamadas a la API disponibles para el plan, no hay otras limitaciones.

Documentación de la API

Endpoints


Envía un HTML en la solicitud con un parámetro CSS opcional y recibe una URL en la respuesta que lo renderiza como una imagen en formato PNG, JPEG o WebP.



                                                                            
POST https://zylalabs.com/api/2612/html+css+a+imagen+api/2620/html+css+a+imagen
                                                                            
                                                                        

HTML CSS a Imagen - Características del Endpoint

Objeto Descripción
Cuerpo de la Solicitud [Requerido] Json
Probar Endpoint

RESPUESTA DE EJEMPLO DE LA API

       
                                                                                                        
                                                                                                                                                                                                                            {"url":"https://htmltoimage-s3bucket-1lw6aoyde4nz5.s3.amazonaws.com/18253aa7-8e49-4a31-b228-8330bbffcf26.png"}
                                                                                                                                                                                                                    
                                                                                                    

HTML CSS a Imagen - CÓDIGOS DE EJEMPLO


curl --location --request POST 'https://zylalabs.com/api/2612/html+css+a+imagen+api/2620/html+css+a+imagen' --header 'Authorization: Bearer YOUR_API_KEY' 

--data-raw '{
    "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Four Aunties and a Wedding

\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

₹199.00 x 1

\n\t\t\t\t\t

₹199.00

\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

It Starts With Us

\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

₹179.00 x 1

\n\t\t\t\t\t

₹179.00

\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

When I Am With You

\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

₹120.00 x 1

\n\t\t\t\t\t

₹120.00

\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Standard shipping ( for online payments )

\n\t\t\t\t\t
\n\t\t\t\t\t\t

INR

\n\t\t\t\t\t\t

₹40.00

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Total

\n\t\t\t\t\t
\n\t\t\t\t\t\t

INR

\n\t\t\t\t\t\t

₹538.00

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t", "css": "* {\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\nbody {\n\tfont-family: "Roboto", sans-serif;\n}\n\np {\n\tfont-size: 20px;\n}\n\n.container {\n\twidth: 900px;\n\tborder: 1px solid black;\n\tpadding: 60px 60px 40px 60px;\n}\n\n.flex {\n\tdisplay: flex;\n}\n\n.product {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tmargin-bottom: 40px;\n}\n\n.product-image {\n\twidth: 100px;\n\theight: 100px;\n\tborder: 1px solid #dddddd;\n\tborder-radius: 8px;\n}\n\n.product-details {\n\tmargin-left: 20px;\n}\n\n.product-details h2 {\n\tmargin-bottom: 10px;\n\tmax-width: 400px;\n}\n\n.price {\n\tfont-weight: bold;\n\tmargin-left: 40px;\n}\n\n.currency {\n\tcolor: gray;\n\tmargin-right: 10px;\n}\n\n.footer {\n\tmargin-top: 40px;\n}\n\n.total {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tmargin-bottom: 20px;\n}\n\n.total h2 {\n\tfont-size: 28px;\n}", "ms_delay": 250, "selector": ".container", "format": "png", "device_scale": 1 }'

Envía un HTML en la solicitud con un parámetro CSS opcional y recibe una URL en la respuesta que lo renderiza como una imagen en formato PNG, JPEG o WebP.



                                                                            
POST https://zylalabs.com/api/2612/html+css+a+imagen+api/2621/html+a+imagen
                                                                            
                                                                        

HTML a Imagen - Características del Endpoint

Objeto Descripción
Cuerpo de la Solicitud [Requerido] Json
Probar Endpoint

RESPUESTA DE EJEMPLO DE LA API

       
                                                                                                        
                                                                                                                                                                                                                            {"url":"https://htmltoimage-s3bucket-1lw6aoyde4nz5.s3.amazonaws.com/11133f47-7843-47f8-9294-b57252d39e13.png"}
                                                                                                                                                                                                                    
                                                                                                    

HTML a Imagen - CÓDIGOS DE EJEMPLO


curl --location --request POST 'https://zylalabs.com/api/2612/html+css+a+imagen+api/2621/html+a+imagen' --header 'Authorization: Bearer YOUR_API_KEY' 

--data-raw '{
    "html": "\n\t\n\t\t\n\t\n\t\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Four Aunties and a Wedding

\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

₹199.00 x 1

\n\t\t\t\t\t

₹199.00

\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

It Starts With Us

\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

₹179.00 x 1

\n\t\t\t\t\t

₹179.00

\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

When I Am With You

\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

₹120.00 x 1

\n\t\t\t\t\t

₹120.00

\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Standard shipping ( for online payments )

\n\t\t\t\t\t
\n\t\t\t\t\t\t

INR

\n\t\t\t\t\t\t

₹40.00

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Total

\n\t\t\t\t\t
\n\t\t\t\t\t\t

INR

\n\t\t\t\t\t\t

₹538.00

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t\n", "ms_delay": 250, "selector": ".container", "format": "png", "device_scale": 1 }'

Envía una URL de sitio web en la solicitud y recibe de vuelta una URL de imagen en el formato que especifiques.

También puedes especificar una altura y ancho del viewport para que tu captura de pantalla se vea como se supone que debe verse en tu pantalla cuando abres este sitio web.

También puedes especificar el número de milisegundos que deseas que nuestro navegador sin cabeza espere antes de tomar una captura de pantalla.



                                                                            
POST https://zylalabs.com/api/2612/html+css+a+imagen+api/2622/url+a+la+imagen.
                                                                            
                                                                        

URL a la imagen. - Características del Endpoint

Objeto Descripción
Cuerpo de la Solicitud [Requerido] Json
Probar Endpoint

RESPUESTA DE EJEMPLO DE LA API

       
                                                                                                        
                                                                                                                                                                                                                            {"url":"https://htmltoimage-s3bucket-1lw6aoyde4nz5.s3.amazonaws.com/775c69b1-c623-4e99-b162-116d66699c6c.png"}
                                                                                                                                                                                                                    
                                                                                                    

URL a la imagen. - CÓDIGOS DE EJEMPLO


curl --location --request POST 'https://zylalabs.com/api/2612/html+css+a+imagen+api/2622/url+a+la+imagen.' --header 'Authorization: Bearer YOUR_API_KEY' 

--data-raw '{
    "url": "https://www.zylalabs.com/",
    "ms_delay": 1000,
    "format": "png",
    "viewport_height": 851,
    "viewport_width": 393
}'

    

Clave de Acceso a la API y Autenticación

Después de registrarte, a cada desarrollador se le asigna una clave de acceso a la API personal, una combinación única de letras y dígitos proporcionada para acceder a nuestro endpoint de la API. Para autenticarte con el HTML CSS a Imagen API simplemente incluye tu token de portador en el encabezado de Autorización.
Encabezados
Encabezado Descripción
Autorización [Requerido] Debería ser Bearer access_key. Consulta "Tu Clave de Acceso a la API" arriba cuando estés suscrito.

Precios Simples y Transparentes

Sin compromiso a largo plazo. Mejora, reduce o cancela en cualquier momento. La Prueba Gratuita incluye hasta 50 solicitudes.

🚀 PLAN CORPORATIVO A MEDIDA

Comienza en
$ 10.000/Año


  • Volumen Personalizado
  • Límite de solicitudes personalizado
  • Soporte al Cliente Especializado
  • Monitoreo de API en Tiempo Real

Funciones favoritas de los clientes

  • ✔︎ Paga Solo por Solicitudes Exitosas
  • ✔︎ Prueba Gratuita de 7 Días
  • ✔︎ Soporte Multilenguaje
  • ✔︎ Una Clave API, Todas las APIs.
  • ✔︎ Panel de Control Intuitivo
  • ✔︎ Manejo de Errores Integral
  • ✔︎ Documentación Amigable para Desarrolladores
  • ✔︎ Integración con Postman
  • ✔︎ Conexiones HTTPS Seguras
  • ✔︎ Tiempo de Actividad Fiable

HTML CSS a Imagen API FAQs

The HTML CSS to Image API is a tool that enables the generation of PNG, JPEG, or WebP images from HTML, CSS code, or URLs. It allows developers to capture website content as images programmatically.

You can use the API by making HTTP requests to its endpoints, specifying the HTML and CSS code in the request body, and receiving the generated image as the response. Detailed documentation is available for implementation.

Yes, the API provides the ability to specify a waiting time in milliseconds, allowing you to capture the webpage after it has fully loaded, ensuring accurate representations.

Absolutely. You can provide a website URL as input to the API, and it will capture the webpage's content, offering the option to specify the height and width for customization.

The API allows you to adjust the pixel ratio, enabling you to control the image's clarity and detail to ensure it appears correctly on different devices and resolutions.

Each endpoint returns a JSON response containing a single key, "url," which provides the direct link to the generated image in PNG, JPEG, or WebP format.

The primary field in the response data is "url," which contains the URL of the generated image. This allows users to easily access and utilize the image in their applications or websites.

Users can customize their requests by providing HTML, CSS, or a URL, along with optional parameters like viewport height, width, and wait time in milliseconds for dynamic content loading.

The response data is structured as a JSON object with a single key-value pair. The key is "url," and the value is the string URL pointing to the generated image, making it straightforward to parse and use.

Each endpoint allows users to convert HTML/CSS code or a URL into an image, capturing the visual representation of web content, which can be used for documentation, marketing, or design purposes.

Users can take the "url" from the response and embed it in their applications, websites, or reports to display the generated image, facilitating easy integration of visual content.

Common use cases include generating images for social media posts, creating visual documentation of web pages, and monitoring website changes by capturing screenshots at intervals.

Users can customize requests by specifying HTML/CSS content or a URL, adjusting viewport dimensions, and setting a wait time to ensure the content is fully loaded before capturing the image.

General FAQs

Zyla API Hub es como una gran tienda de APIs, donde puedes encontrar miles de ellas en un solo lugar. También ofrecemos soporte dedicado y monitoreo en tiempo real de todas las APIs. Una vez que te registres, puedes elegir qué APIs quieres usar. Solo recuerda que cada API necesita su propia suscripción. Pero si te suscribes a varias, usarás la misma clave para todas, lo que hace todo más fácil para ti.

Los precios se muestran en USD (dólar estadounidense), EUR (euro), CAD (dólar canadiense), AUD (dólar australiano) y GBP (libra esterlina). Aceptamos todas las principales tarjetas de débito y crédito. Nuestro sistema de pago utiliza la última tecnología de seguridad y está respaldado por Stripe, una de las compañías de pago más confiables del mundo. Si tienes algún problema para pagar con tarjeta, contáctanos en [email protected]


Además, si ya tienes una suscripción activa en cualquiera de estas monedas (USD, EUR, CAD, AUD, GBP), esa moneda se mantendrá para suscripciones posteriores. Puedes cambiar la moneda en cualquier momento siempre que no tengas suscripciones activas.

La moneda local que aparece en la página de precios se basa en el país de tu dirección IP y se proporciona solo como referencia. Los precios reales están en USD (dólar estadounidense). Cuando realices un pago, el cargo aparecerá en tu estado de cuenta en USD, incluso si ves el monto equivalente en tu moneda local en nuestro sitio web. Esto significa que no puedes pagar directamente en tu moneda local.

Ocasionalmente, un banco puede rechazar el cargo debido a sus configuraciones de protección contra fraude. Te sugerimos comunicarte con tu banco primero para verificar si están bloqueando nuestros cargos. También puedes acceder al Portal de Facturación y cambiar la tarjeta asociada para realizar el pago. Si esto no funciona y necesitas más ayuda, por favor contacta a nuestro equipo en [email protected]

Los precios se determinan mediante una suscripción recurrente mensual o anual, dependiendo del plan elegido.

Las llamadas a la API se descuentan de tu plan en base a solicitudes exitosas. Cada plan incluye una cantidad específica de llamadas que puedes realizar por mes. Solo las llamadas exitosas, indicadas por una respuesta con estado 200, se contarán en tu total. Esto asegura que las solicitudes fallidas o incompletas no afecten tu cuota mensual.

Zyla API Hub funciona con un sistema de suscripción mensual recurrente. Tu ciclo de facturación comenzará el día en que compres uno de los planes de pago, y se renovará el mismo día del mes siguiente. Así que recuerda cancelar tu suscripción antes si quieres evitar futuros cargos.

Para actualizar tu plan de suscripción actual, simplemente ve a la página de precios de la API y selecciona el plan al que deseas actualizarte. La actualización será instantánea, permitiéndote disfrutar inmediatamente de las funciones del nuevo plan. Ten en cuenta que las llamadas restantes de tu plan anterior no se transferirán al nuevo plan, por lo que debes considerar esto al actualizar. Se te cobrará el monto total del nuevo plan.

Para verificar cuántas llamadas a la API te quedan en el mes actual, revisa el campo 'X-Zyla-API-Calls-Monthly-Remaining' en el encabezado de la respuesta. Por ejemplo, si tu plan permite 1,000 solicitudes por mes y has usado 100, este campo mostrará 900 llamadas restantes.

Para ver el número máximo de solicitudes a la API que permite tu plan, revisa el encabezado de la respuesta 'X-Zyla-RateLimit-Limit'. Por ejemplo, si tu plan incluye 1,000 solicitudes por mes, este encabezado mostrará 1,000.

El encabezado 'X-Zyla-RateLimit-Reset' muestra el número de segundos hasta que tu límite se restablezca. Esto te indica cuándo tu conteo de solicitudes se reiniciará. Por ejemplo, si muestra 3,600, significa que faltan 3,600 segundos para que el límite se restablezca.

Sí, puedes cancelar tu plan en cualquier momento desde tu cuenta, seleccionando la opción de cancelación en la página de Facturación. Ten en cuenta que las actualizaciones, degradaciones y cancelaciones tienen efecto inmediato. Además, al cancelar ya no tendrás acceso al servicio, incluso si te quedaban llamadas en tu cuota.

Puedes contactarnos a través de nuestro canal de chat para recibir asistencia inmediata. Siempre estamos en línea de 8 a. m. a 5 p. m. (EST). Si nos contactas fuera de ese horario, te responderemos lo antes posible. Además, puedes escribirnos por correo electrónico a [email protected]

Para darte la oportunidad de probar nuestras APIs sin compromiso, ofrecemos una prueba gratuita de 7 días que te permite realizar hasta 50 llamadas a la API sin costo. Esta prueba solo se puede usar una vez, por lo que recomendamos aplicarla a la API que más te interese. Aunque la mayoría de nuestras APIs ofrecen prueba gratuita, algunas pueden no hacerlo. La prueba finaliza después de 7 días o cuando realices 50 solicitudes, lo que ocurra primero. Si alcanzas el límite de 50 solicitudes durante la prueba, deberás "Iniciar tu Plan de Pago" para continuar haciendo solicitudes. Puedes encontrar el botón "Iniciar tu Plan de Pago" en tu perfil bajo Suscripción -> Elige la API a la que estás suscrito -> Pestaña de Precios. Alternativamente, si no cancelas tu suscripción antes del día 7, tu prueba gratuita finalizará y tu plan se cobrará automáticamente, otorgándote acceso a todas las llamadas a la API especificadas en tu plan. Ten esto en cuenta para evitar cargos no deseados.

Después de 7 días, se te cobrará el monto total del plan al que estabas suscrito durante la prueba. Por lo tanto, es importante cancelar antes de que finalice el periodo de prueba. No se aceptan solicitudes de reembolso por olvidar cancelar a tiempo.

Cuando te suscribes a una prueba gratuita de una API, puedes realizar hasta 50 llamadas. Si deseas realizar más llamadas después de este límite, la API te pedirá que "Inicies tu Plan de Pago". Puedes encontrar el botón "Iniciar tu Plan de Pago" en tu perfil bajo Suscripción -> Elige la API a la que estás suscrito -> Pestaña de Precios.

Las Órdenes de Pago se procesan entre el día 20 y el 30 de cada mes. Si envías tu solicitud antes del día 20, tu pago será procesado dentro de ese período.


APIs Relacionadas


También te puede interesar