GithubHelp home page GithubHelp logo

imadeanaccount1 / simple-screenshot Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 1.0 290 KB

Generate Screenshots using Next.js API Routes and Puppeteer

Home Page: https://simple-screenshot.vercel.app

TypeScript 97.47% JavaScript 2.53%
api puppeteer screenshot nextjs

simple-screenshot's Introduction

Simple Screenshot Generator

A simple Next.js API that takes a screenshot of a website and returns it.

API Endpoint: https://simple-screenshot.vercel.app/api

Usage

If you want to run this API locally, use the local branch, which has the same request formatting/schemas. If you want to deploy to Vercel or Netlify, use the main branch.

Simply run npm run dev or npm run build && npm run start on either branch to run!

Methods

  • GET api/screenshot

    Get a screenshot of an entire page based on its URL.

    Example URL: https://simple-screenshot.vercel.app/api/screenshot?width=500&height=500&url=https://wasteof.money

    You can choose to pass parameters through query parameters, headers, cookies, or a mix.

    Request Parameters (cookies, headers, or URL params):

    • url (required)
    • width (number of pixels) (optional) - Default Value: 1920
    • height (number of pixels) (optional) - Default Value: 1080
    • cookiesList (a JSON string array in the form [{ "name": "token", "value": "", "domain": "wasteof.money" }] that can be used to pass cookies to the site you are taking a screenshot of (e.g. for authentication)) (optional) - Default Value: "[]"
    • scale (float representing the scale of the screenshot) (optional) - Default Value: 1
    • extraHeaders (a JSON string object in the form {"user-agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36"} that allows you to pass headers to the site you are taking a screenshot of (e.g. to set user theme, user agent, language)) (optional) - Default Value: "{}"
    • mediaFeatures (a JSON string array in the form [{ "name": "prefers-color-scheme", "value": "dark" }] that allows you to specify media feature values to the page you are screenshotting (e.g. to set color theme preference)) (optional) - Default Value: "[]"

    Returns: a jpeg image response

Credits

This API was made for @radeeyate.

Todo:

  • better type safety
  • error handling

simple-screenshot's People

Contributors

imadeanaccount1 avatar

Stargazers

 avatar Oren Lindsey avatar Andrew avatar

Watchers

 avatar

Forkers

radeeyate

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.