Flexible & Easy to use API to take Website Screenshots or to Convert HTML/CSS to Image or PDF.
Write custom Node.js code and use any of the 400k+ npm packages available. Refer to the Pipedream Node docs to learn more.
Capture a screenshot from a URL. See the documentation.
import { axios } from "@pipedream/platform"
export default defineComponent({
props: {
html_to_image: {
type: "app",
app: "html_to_image",
}
},
async run({steps, $}) {
const data = {
"html_content" : "<div class=\"mt-4 p-4 text-center\"style=width:500px><span class=\"mb-4 tweet-text\">This is Little Bear. He tolerates baths because he knows how phenomenal his floof will appear afterwards. 13/10</span><div class=\"mt-2 p-4\"><img class=\"mt-4 border rounded-circle shadow\"src=https://docs.htmlcsstoimage.com/assets/images/dog.jpg width=100px></div><h4 class=mt-2>WeRateDogs</h4><span class=text-muted>@dog_rates</span></div><link href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css rel=stylesheet crossorigin=anonymous integrity=sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk><link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"rel=stylesheet>",
"css_content" : ".tweet-text{background-color:#fff2ac;background-image:linear-gradient(to right,#ffe359 0,#fff2ac 100%);font-weight:bolder;font-size:32px;font-family:Roboto,sans-serif;padding:4px}",
"generate_img_url": true
}
return await axios($, {
method: "post",
url: `https://api.htmlcsstoimg.com/api/v1/generateImage`,
headers: {
"CLIENT-API-KEY": `${this.html_to_image.$auth.api_key}`,
},
data,
})
},
})
Develop, run and deploy your Node.js code in Pipedream workflows, using it between no-code steps, with connected accounts, or integrate Data Stores and File Stores.
This includes installing NPM packages, within your code without having to manage a package.json
file or running npm install
.
Below is an example of installing the axios
package in a Pipedream Node.js code step. Pipedream imports the axios
package, performs the API request, and shares the response with subsequent workflow steps:
// To use previous step data, pass the `steps` object to the run() function
export default defineComponent({
async run({ steps, $ }) {
// Return data to use it in future steps
return steps.trigger.event
},
})