Actor picture

Html Renderer

jakubbalada/html-renderer

Generate image for your HTML using a headless browser

No credit card required

Author's avatarJakub Balada
  • Modified
  • Users5
  • Runs13

Dockerfile

# Dockerfile contains instructions how to build a Docker image that
# will contain all the code and configuration needed to run your actor.
# For a full Dockerfile reference,
# see https://docs.docker.com/engine/reference/builder/

# First, specify the base Docker image. Apify provides the following
# base images for your convenience:
#  apify/actor-node-basic (Node.js 10 on Alpine Linux, small and fast)
#  apify/actor-node-chrome (Node.js 10 + Chrome on Debian)
#  apify/actor-node-chrome-xvfb (Node.js 10 + Chrome + Xvfb on Debian)
# For more information, see https://apify.com/docs/actor#base-images
# Note that you can use any other image from Docker Hub.
FROM apify/actor-node-chrome

# Copy all files and directories with the source code
COPY . ./

# Install NPM packages, skip optional and development dependencies to
# keep the image small. Avoid logging to much and print the dependency
# tree for debugging
RUN npm --quiet set progress=false \
 && npm install --only=prod --no-optional \
 && echo "Installed NPM packages:" \
 && npm list \
 && echo "Node.js version:" \
 && node --version \
 && echo "NPM version:" \
 && npm --version

# Specify how to run the source code
CMD npm start

INPUT_SCHEMA.json

{
    "title": "HTML renderer Input",
    "type": "object",
    "description": "Use the following form to configure HTML renderer.",
    "schemaVersion": 1,
    "properties": {
        "html": {
            "title": "HTML to generate",
            "type": "string",
            "description": "HTML to be opened in a broswer and screenshotted",
            "editor": "textarea",
            "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>"
        },
        "viewport": {
            "title": "Viewport",
            "type": "object",
            "description": "Viewport of a screenshot",
            "default": {"width": 800, "height":600},
            "editor": "json"
        },
        "format": {
            "title": "Output format",
            "type": "string",
            "description": "Output format (jpeg or png)",
            "editor": "select",
            "default": "jpeg",
            "enum": ["jpeg", "png"]
        },
        "outputType": {
            "title": "Output type",
            "type": "string",
            "description": "Output type (link to screenshot or image itself)",
            "editor": "select",
            "default": "link",
            "enum": ["link", "image"]
        }
    },
    "required": [
        "html"
    ]
}

README.md

# HTML renderer

Genereates image (png or jpeg) from given HTML. Uses headless browser and Puppeteer (open browser, set content, make screenshot).
Output can be a link to generated screenshot or image itself.
Also viewport can be defined as an input.

See input schema for more details.

Can be used as a synchronous API (HTML as an input, image/link as an output).

main.js

const Apify = require('apify');

Apify.main(async () => {

    const input = await Apify.getInput();

    const options = {};

    if (input.viewport) {
        options.defaultViewport = input.viewport
    }
    const browser = await Apify.launchPuppeteer(options);

    const page = await browser.newPage();
    await page.setContent(input.html);
    const image = await page.screenshot({type: input.format, fullPage: true});

    await Apify.setValue('screenshot', image, { contentType: `image/${input.format}` });
    if (input.outputType == "link") {
        const keyValueStore = await Apify.openKeyValueStore();
        const link = keyValueStore.getPublicUrl('screenshot');
        await Apify.setValue('OUTPUT', {link});
    } else {
        await Apify.setValue('OUTPUT', image, { contentType: `image/${input.format}` });
    }
});

package.json

{
    "name": "my-actor",
    "version": "0.0.1",
    "dependencies": {
        "apify": "^0.13.7"
    },
    "scripts": {
        "start": "node main.js"
    },
    "author": "Me!"
}