Skip to content
λ 🖼️ Chromda is an AWS Lambda function for capturing screenshots of websites.
JavaScript
Branch: master
Clone or download
chrislentz and luisfarzati API Gateway Support (#4)
* Added commented out support for API Gateway to Serverless config
* Added a normalize response helper to support API Gateway
* Tweaked API GW support for POST instead of GET
Will now return the "Event type not supported" error if the httpMethod is a GET request, as body on GET is not standard practice.
Latest commit 39626f3 Jan 16, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
layer @ 7cd62e4 first commit Dec 29, 2019
src API Gateway Support (#4) Jan 16, 2020
.gitignore first commit Dec 29, 2019
.gitmodules first commit Dec 29, 2019
LICENSE first commit Dec 29, 2019
README.md Update README.md Dec 29, 2019
chromda.png Add files via upload Dec 30, 2019
package-lock.json first commit Dec 29, 2019
package.json first commit Dec 29, 2019
serverless.yml API Gateway Support (#4) Jan 16, 2020
webpack.config.js first commit Dec 29, 2019

README.md

Chromda – Serverless screenshots

Chromda is an AWS Lambda function for serverless capturing screenshots of websites.

Multiple sources

  • SNS topics
  • SQS queues
  • CloudWatch scheduled events
  • API Gateway proxy

Configurable

  • Capture full page, viewport or specific DOM element
  • Exclude DOM elements (useful for ads or other unwanted content)
  • Override styles

Quick start

Provided you already have AWS credentials for Serverless, do:

git clone https://github.com/luisfarzati/chromda
cd chromda
git submodule update --init
npm install

Edit the serverless.yml file and change the example bucket name with one of your own:

# serverless.yml
custom:
  s3Bucket: <your bucket name>

Deploy the function into your AWS account:

npm run deploy

Open the AWS Lambda Console and create the following test event:

{
  "source": "aws.events",
  "time": "1970-01-01T00:00:00Z",
  "detail": {
    "url": "https://www.nytimes.com"
  }
}

Click Test, wait a few seconds (it might take around 8-10 secs), then you should see a response like:

{
  "url": "https://<your bucket name>.s3.amazonaws.com/<uuid>.png"
}

Usage

Invocation

The function accepts different kind of events, extracting the data from the proper body attribute as follows:

Event Body is extracted from
SNS Message Event .Records[0].Sns.Message
SQS Message Event .Records[0].body
API Gateway Message Event .body
CloudWatch Events Message Event .detail

Options

{
  // required
  "url": "https://google.com",

  // optional - valid options: page, viewport, element
  // default: viewport
  "capture": "page",

  // selector of element to capture
  // required if capture: element
  "selector": ".container",

  // optional - S3 key for the image file
  // default: uuid()
  "s3key": "test.png",

  // optional - selectors of elements to exclude
  "exclude": [".ad", "video"],

  // optional - styles to override
  // see Puppeteer.addStyleTag
  "styles": [
    {
      "content": "body { color: #f00; }"
    }
  ],

  // optional - puppeteer options
  "puppeteer": {
    // see Puppeteer.goto options
    "navigation": {
      "timeout": 30000,
      "waitUntil": ["domcontentloaded", "networkidle2"]
    },
    // see Puppeteer.screenshot options
    "screenshot": {
      "type": "jpeg",
      "quality": 50,
      "omitBackground": false
    },
    // viewport size, overrides env defaults
    "viewport": {
      "width": 1200,
      "height": 2000
    }
  }
}

Environment Variables

Name Default
S3_BUCKET*
S3_REGION*
S3_ACL "public-read"
CHROMIUM_ARGS "[]"
TIMEOUT "30000"
IGNORE_HTTPS_ERRORS "false"
VIEWPORT_WIDTH "1920"
VIEWPORT_HEIGHT "1200"
DEVICE_SCALE_FACTOR "1"
IS_MOBILE "false"
IS_LANDSCAPE "false"

Deploy

# serverless.yml

# ...
custom:
  s3Bucket: <your bucket name>

provider:
  # ...
  layers:
    # Replace <version> with the latest version of chrome-aws-lambda-layer
    # It depends on the region you are deploying.
    # https://github.com/shelfio/chrome-aws-lambda-layer#available-regions
    - arn:aws:lambda:${self:provider.region}:764866452798:layer:chrome-aws-lambda:<version>

functions:
  captureScreenshot:
    # ...
    environment:
      # configure the environment variables
      VIEWPORT_WIDTH: "1920"
      VIEWPORT_HEIGHT: "1200"
      # ...
    events:
      # add any of the supported event source(s) you want to use
      # the provided example uses SNS
      - sns:
          arn: !Ref chromdaTopic
          topicName: ${self:custom.snsTopic}

resources:
  # following the example, we provision an SNS topic
  chromdaTopic:
    Type: AWS::SNS::Topic
    Properties:
      TopicName: ${self:custom.snsTopic}

X-Ray

AWS X-Ray support is provided and there are segments for Puppeteer navigation and screenshot:

AWS X-Ray screenshot

You can’t perform that action at this time.