html css to image

Automate your image generation

9 followers

Automate your image generation

9 followers

Visit website

Automation tools

•

AI Generative Media

Convert HTML to an image (jpg, png, webp). Renders images exactly like Google Chrome. Works with PHP, JavaScript, Ruby, .NET and more.

Launch tags:API•Social Media•Developer Tools

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

PlanetScale Boost

Maker

Hi PH friends 👋, Use this API to auto generate images from code. Super useful for making custom social images on the fly. Gradients, drop shadows, emoji's, custom fonts. Basically, if Chrome can do it, this API will do it. If you've ever done this before on your own, you know how painful it is to get right 😃. My favorite use for this is generating open graph images. Auto generate an image, set the URL as your twitter OG meta tag. Now all your tweets look ✨. Images == More clicks. Here's an example I mocked up for dev.to. Code: https://codepen.io/mscccc/pen/eL... Image:

Report

8yr ago

Maker Audience List

@mscccc Great product idea. Useful, and a pain for developers, with a clear upside for marketing! Some points: Given its targeted to developers, I would add how the API works on the homepage (maybe a interactive demo)? What is counted as an 'image' in terms of the images/month pricing? A unique CSS+html combo? I could see something like a minor template change, add up quickly towards my total. And last feedback, why not also a plan where I pay for actual usage, instead of per month pricing (I know, SaaS, but maybe something to think about).

Report

8yr ago

PlanetScale Boost

Maker

@yvoschaap thanks! I definitely need to add a demo. Yes, an image is counted each time a successful request is made to create a new image (downloads are unlimited once an image is created). And it's only counted towards the month that it was created. I originally wanted to do metered billing. And started that way. But it was taking too much time to get working properly. Maybe now that I have rate limiting/usage working, it would be easier to add in.

Report

8yr ago

You CHARGE for this? Wild.

Pros:

nothing

Cons:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA

Report

8yr ago

Maker Audience List

Adam, next time when you can only troll, post under your real name!

Report

8yr ago

Get out of here you dirty commie

Report

8yr ago

My Octocat by Github

14/10

Pros:

It produces amazing looking images and works seamlessly. Mike writes excellent code.

Cons:

Why wasn’t this around sooner?!

Report

8yr ago

Timeline.io

@mscccc I see in your documentation that you can link an entire external stylesheet, rather than just a portion via inline styles, but is it possible to send in multiple stylesheets with the API request? There is often a base stylesheet for a website, then a customer layer, and perhaps another, etc. I'm considering this service as an alternative to HTML2Canvas, which is a very popular open-source solution (https://github.com/niklasvh/html...).

Report

8yr ago

PlanetScale Boost

Maker

@codyfitzpatrick Yes, that'll work. Initial render might be a bit slower than if you had the stylesheet inlined since we have to download it. But it's cached as soon as it's generated, so will be super quick on all subsequent requests. See an example here: https://codepen.io/mscccc/pen/eL.... Top of the HTML I load in Primer.css from a CDN. You can include as many as you'd like. Let me know if you have any issues!

Report

8yr ago

Timeline.io

@mscccc Thanks for the reply and linked example. Much appreciated!

Report

8yr ago

Aggregations.io

Maker

Yay HTCI is finally live! I've been playing with the API for a little while now -- trying to make the emoji.life OG images a little more fun. Well, coming soon - you'll get things like

It's so lightweight and easy - no need to really host the content and can easily create templates to create images for social, email, etc... GREAT JOB @mscccc

Report

8yr ago

Rocket Role

Seems like a really useful product. I can attest to the pain that is screenshotting webpages, and also more specifically containers within a page. I had so much hassle taking screenshots of webpages recently when implementing this https://www.letscommence.com/log.... As a free little tool for my users, the amount of time it took me to implement in the end just made me begrudge it all! If I had used something like this, then I could have spent more time implementing more important things. Bookmarked and will definitely give this a try next time round :-)

Report

8yr ago

@mscccc congratulations on the launch Mike. I can definitely see myself using this in the short term. I'm working on a project that's pretty content centric so this will come in handy to amplify the content on my platform. Thanks for building this!

Report

8yr ago

PlanetScale Boost

Maker

@_erozas Awesome, shoot me an email if you need any pointers getting started. :)

Report

8yr ago

1 2

Reviews