To achieve the screenshot function through the front-end means, there are mainly two situations:

  1. A screenshot of a browser web page.
  2. Only screenshots of canvas canvas, such as visual diagrams, webGL, etc.

For the first case, the screenshot of the web page of the browser is achieved by converting the page DOM into canvas or SVG images when the front end has no authority to control the relevant interface of the browser. Html2canvas and DOM-to-Image are two well-known libraries that provide this functionality, although there are some limitations and pitfalls.

In practice, on the PC side, this need is not much, and the browser itself provides a screenshot of the web page, does not need a front-end application to control. If you are interested, you can check out this article for details.

In the second case, the screenshot of canvas is mainly focused on saving charts and visual interface, but it is very easy to realize, because Canvas itself has the function of saving as pictures, and it has two apis for exporting pictures, namely toDataURL and toBlob.

The toDataURL method converts the entire canvas to a Base64 URL address, and the toBlob method creates a Blob object with the default image type image/ PNG.

Note: Canvas’s two apis, toDataURL() and toBlob(), are restricted by the same origin policy and cannot cross domain. That is to say, if canvas’s picture source is a cross-domain request, a cross-domain error will be reported when calling this API. The common solution is to allow the backend Settings to cross domain. The front end sets the crossOrigin property value to Anonymous.

Taking the 3D visualization interface made by Three. js as an example, we need to save the screenshots of the 3D model. Since our model is rendered on a Canvas canvas, we can save the screenshot directly using the toBlob method, which we encapsulate as a screenshot method:

// Encapsulate the screenshot method as a method, passing two arguments:
Canvas: Specifies the canvas element of the screenshot
// fileName: indicates the fileName to download
const screenshotCanvas = (canvas, fileName) = > {
  // Validate the Canvas element
  if(! canvas || canvas.nodeType ! == Node.ELEMENT_NODE || canvas.nodeName.toLowerCase() ! = ='canvas'
  ) {
    throw new Error('Please pass in the Canvas element you want to screenshot')}try {
    canvas.toBlob((blob) = > {
    	// Create an A element for the download
    	const a = document.createElement('a')
    	a.style.display = 'none'
    	document.body.appendChild(a)
    	a.href = window.URL.createObjectURL(blob)
    	// The file name of the download
    	a.download = fileName || `screenshot-${canvas.width}x${canvas.height}.png`
    	a.click()
    	// After the download is triggered, the element is removed
    	a.remove()
  	})
  } catch (e) {
    console.log(e)
  }
}
Copy the code

This saves a screenshot of the Canvas canvas content.

Note: For performance and compatibility reasons, by default the browser clears the drawing buffer of the WebGL canvas after drawing it, so make sure you render it once before taking a screenshot, otherwise the screenshot won’t come out.