Two common ways to implement screenshots at the front end

The front-end screenshot function involves the Canvas API of HTML5. The following summarizes two ways to implement screenshots.

1. Use third-party library-html2canvas

1. Principle

html2canvas can be saved as an image by obtaining an element of HTML, then generating Canvas, and then generating an image by calling canvas' toDataURL() method, so that the user can save as an image.

2. Steps

• Get the tag node of the current page: Pass the DOM node to html2canvas that needs to generate the picture
• Render canvas: Wait until html2canvas generate canvas through the information of the DOM node
• Then call the ('image/png') method. The image to be generated is png in format, and the method will return a base64 of an image.

3. Code

function getScreenshot() {
  // Get the dom element that needs to be taken  const el = ('screenDiv')
  // Render the dom structure to the canvas using html2canvas  html2canvas(el, {
    useCORS: true, // Allow cross-domain  }).then((canvas) => {
    // download    const aTag = ('a') // Create a <a> tag for downloading     = ()
     = ''
    ()
    // Remove canvas    ()
  })
}

Notice:Cross-domain problem: html2canvas will not load cross-domain image resources by default. Cross-domain request support is enabled by setting useCORS: true.

two,

 It is a browser API that allows web applications to access the content of a user's screen or specific windows, and is mainly used for screen sharing or screen recording and other functions. This API is part of WebRTC, which makes it easier for developers to capture user screen content without relying on Flash or other plugins.

1. Main features

• Security: To protect user privacy, users' explicit permission is usually required when using getDisplayMedia. This means a dialog box pops up for users to select what they want to share (such as an entire screen, a single application window, or a browser tab).
• Cross-platform: Can be used in supported modern browsers, including Chrome, Firefox, Edge, etc.
• Media Stream: Returns a MediaStream object that contains a screen-shared video track (and possibly an audio track) that can be used to display in elements or as part of other media processing, such as recording or transmission.
• Parameter configuration: You can specify the captured media type (video, audio) and other constraints such as resolution, frame rate, etc. by passing the option object.

2. Use steps

• Get screen sharing stream: Use the getDisplayMedia method to get screen or window content
• Create a video element or canvas: Create an element or Canvas object to display or process the obtained media stream
• Screenshot and convert to picture: draw the video on the canvas through Canvas drawing method and convert it to picture format

3. Example

// html part<button @click="screenshot">Click on the screenshot(mediaDevices) </button>

// js partasync function screenshot() {
  // 1. Get screen or window content (get screen stream)  const stream = await ({
    video: true,
  })
  // 2. Create a video element or canvas (create a stream)  const video = ('video')
   = stream
  await ()
  // Create canvas hosting content  const canvas = ('canvas')
   = 
   = 
  const context = ('2d')
  // 3. Draw video frames to canvas  context?.drawImage(video, 0, 0, , )
  // 4. Convert canvas content to picture to base64  const base64 = ()
  // Stop recording and save resources  ().forEach((track) => )
  // download  const aTag = ('a') // Create a <a> tag for downloading   = base64
   = ''
  ()
}

Click the button to trigger the screenshot. Get the screen stream by calling the getDisplayMedia method, then play the stream with the element, draw its contents on the canvas, then convert the image data of the canvas into a base64-encoded URL, and create a tag for download.

Summarize

This is the end of this article about two common ways to implement screenshots on the front-end. For more related content on screenshots on the front-end, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!