Overview

Web Screenshot enables you to capture either a specific section or an entire webpage and share it as an image. You can optionally include text and a URL for better context.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/web-screenshot/

Implementation Guide

Sharing the visible web content

The following command allows you to capture and share the visible portion of a webpage, excluding native UI elements such as native navigation bars.

↔️Median JavaScript Bridge

Run the following Median JavaScript Bridge command to share the screen content

JavaScript

median.webScreenshot.shareScreen({url: "https://www.median.dev", text: "Median Developer Demo" });

Sharing a web element

The following command allows you to capture and share a specific web element, such as a <div> container.

↔️Median JavaScript Bridge

Run the following Median JavaScript Bridge command to share a div with id content

JavaScript

const element = document.getElementById("content");
median.webScreenshot.shareElement(element, {
  url: "https://median.dev/",
  text: "Median Developer Demo",
});

Exporting the screenshot

You can export the screenshot as a Blob object to upload to your server or use it with another plugin e.g. Social Share

↔️Median JavaScript Bridge

Run the following Median JavaScript Bridge command to share the screen content

JavaScript

// Capture the visible screen area
const screenShotblob = median.webScreenshot.captureScreen();
// Capture a web element
const screenShotblob = median.webScreenshot.captureElement(element);

Demo App

Try out the plugin on iOS and Android with our interactive demo apps.