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 de 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 de píxeles. Desata tu imaginación, píxel a píxel.

Acerca de la API:  

Presentamos la API de HTML CSS a Imagen: Tu puerta de entrada a contenido visual increíble

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 de 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 al alcance de tu mano, 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—simplemente ingresa tu código y observa cómo tu visión cobra vida.

  2. Temporización Precisa: La paciencia vale la pena, especialmente al capturar contenido web dinámico. La API ofrece la posibilidad 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 anchura. 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 de HTML CSS a Imagen: Tu puerta de entrada a contenido visual increíble

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 de 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 al alcance de tu mano, 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—simplemente ingresa tu código y observa cómo tu visión cobra vida.

  2. Temporización Precisa: La paciencia vale la pena, especialmente al capturar contenido web dinámico. La API ofrece la posibilidad 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 anchura. 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 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+to+image+api/2620/html+css+to+image
                                                                            
                                                                        

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 to Image - CÓDIGOS DE EJEMPLO


curl --location --request POST 'https://zylalabs.com/api/2612/html+css+to+image+api/2620/html+css+to+image' --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+to+image+api/2621/html+to+image
                                                                            
                                                                        

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 to Image - CÓDIGOS DE EJEMPLO


curl --location --request POST 'https://zylalabs.com/api/2612/html+css+to+image+api/2621/html+to+image' --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+to+image+api/2622/url+to+image
                                                                            
                                                                        

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 to Image - CÓDIGOS DE EJEMPLO


curl --location --request POST 'https://zylalabs.com/api/2612/html+css+to+image+api/2622/url+to+image' --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

La API HTML CSS a Imagen es una herramienta que permite la generación de imágenes PNG, JPEG o WebP a partir de HTML, código CSS o URL. Permite a los desarrolladores capturar el contenido de las páginas web como imágenes de manera programática.

Puedes usar la API haciendo solicitudes HTTP a sus endpoints, especificando el código HTML y CSS en el cuerpo de la solicitud, y recibiendo la imagen generada como respuesta. La documentación detallada está disponible para la implementación.

Sí, la API ofrece la capacidad de especificar un tiempo de espera en milisegundos, lo que te permite capturar la página web después de que se haya cargado completamente, garantizando representaciones precisas.

Absolutamente. Puedes proporcionar una URL de sitio web como entrada a la API, y capturará el contenido de la página web, ofreciendo la opción de especificar la altura y el ancho para la personalización.

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.

Cada endpoint devuelve una respuesta JSON que contiene una única clave, "url", que proporciona el enlace directo a la imagen generada en formato PNG, JPEG o WebP.

El campo principal en los datos de respuesta es "url," que contiene la URL de la imagen generada. Esto permite a los usuarios acceder y utilizar fácilmente la imagen en sus aplicaciones o sitios web.

Los usuarios pueden personalizar sus solicitudes proporcionando HTML, CSS o una URL, junto con parámetros opcionales como la altura del viewport, el ancho y el tiempo de espera en milisegundos para la carga de contenido dinámico.

Los datos de respuesta están estructurados como un objeto JSON con un único par clave-valor. La clave es "url" y el valor es la cadena URL que apunta a la imagen generada, lo que facilita su análisis y uso.

Cada endpoint permite a los usuarios convertir código HTML/CSS o una URL en una imagen, capturando la representación visual del contenido web, que se puede usar para documentación, marketing o propósitos de diseño.

Los usuarios pueden tomar la "url" de la respuesta e incrustarla en sus aplicaciones, sitios web o informes para mostrar la imagen generada, facilitando la integración fácil de contenido visual.

Los casos de uso comunes incluyen generar imágenes para publicaciones en redes sociales, crear documentación visual de páginas web y monitorear cambios en el sitio web capturando capturas de pantalla a intervalos.

Los usuarios pueden personalizar las solicitudes especificando contenido HTML/CSS o una URL, ajustando las dimensiones del viewport y estableciendo un tiempo de espera para garantizar que el contenido esté completamente cargado antes de capturar la imagen.

General FAQs

Zyla API Hub is like a big store for APIs, where you can find thousands of them all in one place. We also offer dedicated support and real-time monitoring of all APIs. Once you sign up, you can pick and choose which APIs you want to use. Just remember, each API needs its own subscription. But if you subscribe to multiple ones, you'll use the same key for all of them, making things easier for you.

Prices are listed in USD (United States Dollar), EUR (Euro), CAD (Canadian Dollar), AUD (Australian Dollar), and GBP (British Pound). We accept all major debit and credit cards. Our payment system uses the latest security technology and is powered by Stripe, one of the world's most reliable payment companies. If you have any trouble paying by card, just contact us at [email protected]

Additionally, if you already have an active subscription in any of these currencies (USD, EUR, CAD, AUD, GBP), that currency will remain for subsequent subscriptions. You can change the currency at any time as long as you don't have any active subscriptions.

The local currency shown on the pricing page is based on the country of your IP address and is provided for reference only. The actual prices are in USD (United States Dollar). When you make a payment, the charge will appear on your card statement in USD, even if you see the equivalent amount in your local currency on our website. This means you cannot pay directly with your local currency.

Occasionally, a bank may decline the charge due to its fraud protection settings. We suggest reaching out to your bank initially to check if they are blocking our charges. Also, you can access the Billing Portal and change the card associated to make the payment. If these does not work and you need further assistance, please contact our team at [email protected]

Prices are determined by a recurring monthly or yearly subscription, depending on the chosen plan.

API calls are deducted from your plan based on successful requests. Each plan comes with a specific number of calls that you can make per month. Only successful calls, indicated by a Status 200 response, will be counted against your total. This ensures that failed or incomplete requests do not impact your monthly quota.

Zyla API Hub works on a recurring monthly subscription system. Your billing cycle will start the day you purchase one of the paid plans, and it will renew the same day of the next month. So be aware to cancel your subscription beforehand if you want to avoid future charges.

To upgrade your current subscription plan, simply go to the pricing page of the API and select the plan you want to upgrade to. The upgrade will be instant, allowing you to immediately enjoy the features of the new plan. Please note that any remaining calls from your previous plan will not be carried over to the new plan, so be aware of this when upgrading. You will be charged the full amount of the new plan.

To check how many API calls you have left for the current month, refer to the 'X-Zyla-API-Calls-Monthly-Remaining' field in the response header. For example, if your plan allows 1,000 requests per month and you've used 100, this field in the response header will indicate 900 remaining calls.

To see the maximum number of API requests your plan allows, check the 'X-Zyla-RateLimit-Limit' response header. For instance, if your plan includes 1,000 requests per month, this header will display 1,000.

The 'X-Zyla-RateLimit-Reset' header shows the number of seconds until your rate limit resets. This tells you when your request count will start fresh. For example, if it displays 3,600, it means 3,600 seconds are left until the limit resets.

Yes, you can cancel your plan anytime by going to your account and selecting the cancellation option on the Billing page. Please note that upgrades, downgrades, and cancellations take effect immediately. Additionally, upon cancellation, you will no longer have access to the service, even if you have remaining calls left in your quota.

You can contact us through our chat channel to receive immediate assistance. We are always online from 8 am to 5 pm (EST). If you reach us after that time, we will get back to you as soon as possible. Additionally, you can contact us via email at [email protected]

To give you the opportunity to experience our APIs without any commitment, we offer a 7-day free trial that allows you to make up to 50 API calls at no cost. This trial can be used only once, so we recommend applying it to the API that interests you the most. While most of our APIs offer a free trial, some may not. The trial concludes after 7 days or once you've made 50 requests, whichever occurs first. If you reach the 50 request limit during the trial, you will need to "Start Your Paid Plan" to continue making requests. You can find the "Start Your Paid Plan" button in your profile under Subscription -> Choose the API you are subscribed to -> Pricing tab. Alternatively, if you don't cancel your subscription before the 7th day, your free trial will end, and your plan will automatically be billed, granting you access to all the API calls specified in your plan. Please keep this in mind to avoid unwanted charges.

After 7 days, you will be charged the full amount for the plan you were subscribed to during the trial. Therefore, it's important to cancel before the trial period ends. Refund requests for forgetting to cancel on time are not accepted.

When you subscribe to an API free trial, you can make up to 50 API calls. If you wish to make additional API calls beyond this limit, the API will prompt you to perform an "Start Your Paid Plan." You can find the "Start Your Paid Plan" button in your profile under Subscription -> Choose the API you are subscribed to -> Pricing tab.

Payout Orders are processed between the 20th and the 30th of each month. If you submit your request before the 20th, your payment will be processed within this timeframe.

 Nivel de Servicio
100%
 Tiempo de Respuesta
2,355ms

APIs Relacionadas