Take a screenshot of a website automatically (by using a URL)

Transloadit can take a screenshot of any website or HTML file. In this demo below we let 🤖/html/convert make a PNG screenshot from the Uppy website.

You could optionally use 🤖/image/resize to further resize or crop the resulting image as required.

Step 1:

Take screenshots of webpages or HTML files

We can process your documents in an automated way, saving you costly resources.Learn more

uppy-io.png

Image – 94 KB

1024 × 768

"screenshot": {
  "robot": "/html/convert",
  "result": true,
  "format": "png",
  "url": "https://uppy.io",
  "width": 1024
}

/html/convert

This bot takes screenshots of web pages or uploaded HTML pages

Step 2:

Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.Learn more

uppy-io.png

Image – 33 KB

1024 × 768

"resized": {
  "use": "screenshot",
  "robot": "/image/resize",
  "result": true,
  "gravity": "top",
  "height": 768,
  "resize_strategy": "fillcrop",
  "width": 1024,
  "zoom": false
}

/image/resize

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 3:

Export files to Amazon S3

We export to the storage platform of your choice.Learn more

screenshot

https://demos.transloadit.com/25/d51f2396de4c51ade1f5eb0a471cd5/uppy-io.png

resized

https://demos.transloadit.com/0a/177dbb9573408999c8fd22a8a984b2/uppy-io.png

"exported": {
  "use": [
    "screenshot",
    "resized",
    ":original"
  ],
  "robot": "/s3/store",
  "credentials": "demo_s3_credentials",
  "url_prefix": "https://demos.transloadit.com/"
}

/s3/store

This bot exports encoding results to Amazon S3

Live Demo. See for yourself

Loading Uppy demo…

Build this in your own language

<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // It's often better store encoding instructions in your account
          // and use a `template_id` instead of adding these steps inline
          steps: {
            screenshot: {
              robot: '/html/convert',
              result: true,
              format: 'png',
              url: 'https://uppy.io',
              width: 1024,
            },
            resized: {
              use: 'screenshot',
              robot: '/image/resize',
              result: true,
              gravity: 'top',
              height: 768,
              resize_strategy: 'fillcrop',
              width: 1024,
              zoom: false,
            },
            exported: {
              use: ['screenshot', 'resized', ':original'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to `waitForEncoding:true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      console.log(transloadit) // Array of Assembly Statuses
      for (const assembly of transloadit) {
        console.log(assembly.results) // Array of all encoding results
      }
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

Read docs: Browsers

So many ways to integrate

Transloadit is a service for companies with developers. And there are many ways developers can put Transloadit to good use inside your company to automate media processing.