Html Renderer avatar
Html Renderer
Try for free

No credit card required

View all Actors
Html Renderer

Html Renderer

jakubbalada/html-renderer
Try for free

No credit card required

Generate image for your HTML using a headless browser

Dockerfile

1# Dockerfile contains instructions how to build a Docker image that
2# will contain all the code and configuration needed to run your actor.
3# For a full Dockerfile reference,
4# see https://docs.docker.com/engine/reference/builder/
5
6# First, specify the base Docker image. Apify provides the following
7# base images for your convenience:
8#  apify/actor-node-basic (Node.js 10 on Alpine Linux, small and fast)
9#  apify/actor-node-chrome (Node.js 10 + Chrome on Debian)
10#  apify/actor-node-chrome-xvfb (Node.js 10 + Chrome + Xvfb on Debian)
11# For more information, see https://apify.com/docs/actor#base-images
12# Note that you can use any other image from Docker Hub.
13FROM apify/actor-node-chrome
14
15# Copy all files and directories with the source code
16COPY . ./
17
18# Install NPM packages, skip optional and development dependencies to
19# keep the image small. Avoid logging to much and print the dependency
20# tree for debugging
21RUN npm --quiet set progress=false \
22 && npm install --only=prod --no-optional \
23 && echo "Installed NPM packages:" \
24 && npm list \
25 && echo "Node.js version:" \
26 && node --version \
27 && echo "NPM version:" \
28 && npm --version
29
30# Specify how to run the source code
31CMD npm start

INPUT_SCHEMA.json

1{
2    "title": "HTML renderer Input",
3    "type": "object",
4    "description": "Use the following form to configure HTML renderer.",
5    "schemaVersion": 1,
6    "properties": {
7        "html": {
8            "title": "HTML to generate",
9            "type": "string",
10            "description": "HTML to be opened in a broswer and screenshotted",
11            "editor": "textarea",
12            "example": "<html>\n<head>\n<title>Page Title</title>\n</head>\n<body>\n\n<h1>This is a Heading</h1>\n<p>This is a paragraph.</p>\n\n</body>\n</html>"
13        },
14        "viewport": {
15            "title": "Viewport",
16            "type": "object",
17            "description": "Viewport of a screenshot",
18            "default": {"width": 800, "height":600},
19            "editor": "json"
20        },
21        "format": {
22            "title": "Output format",
23            "type": "string",
24            "description": "Output format (jpeg or png)",
25            "editor": "select",
26            "default": "jpeg",
27            "enum": ["jpeg", "png"]
28        },
29        "outputType": {
30            "title": "Output type",
31            "type": "string",
32            "description": "Output type (link to screenshot or image itself)",
33            "editor": "select",
34            "default": "link",
35            "enum": ["link", "image"]
36        }
37    },
38    "required": [
39        "html"
40    ]
41}

main.js

1const Apify = require('apify');
2
3Apify.main(async () => {
4
5    const input = await Apify.getInput();
6
7    const options = {};
8
9    if (input.viewport) {
10        options.defaultViewport = input.viewport
11    }
12    const browser = await Apify.launchPuppeteer(options);
13
14    const page = await browser.newPage();
15    await page.setContent(input.html);
16    const image = await page.screenshot({type: input.format, fullPage: true});
17
18    await Apify.setValue('screenshot', image, { contentType: `image/${input.format}` });
19    if (input.outputType == "link") {
20        const keyValueStore = await Apify.openKeyValueStore();
21        const link = keyValueStore.getPublicUrl('screenshot');
22        await Apify.setValue('OUTPUT', {link});
23    } else {
24        await Apify.setValue('OUTPUT', image, { contentType: `image/${input.format}` });
25    }
26});

package.json

1{
2    "name": "my-actor",
3    "version": "0.0.1",
4    "dependencies": {
5        "apify": "^0.13.7"
6    },
7    "scripts": {
8        "start": "node main.js"
9    },
10    "author": "Me!"
11}
Developer
Maintained by Community
Actor metrics
  • 1 monthly users
  • Created in May 2019
  • Modified about 1 year ago
Categories