How can we capture screenShot of figma design and send it to s3 bucket

Question

I am new to figma plugins. I am createing a figma plugin using plain html and javascript. What I want to do is to capture a snapshot of figma design on screen. And Convert it to png/jpg to store it on s3 Bucket.

What I tried

  try {
    const viewport = figma.viewport;
    const image = await figma.viewport.snapshotAsync({
        format: 'PNG',
        viewport,
    });

    console.log("Snapshot captured:", image);
} catch (error) {
    console.error("An error occurred:", error);
}

In above I just getting an error message " not a function" nothing else.

Thanks in advance. Note: I forgot to mention I am using figma windows applicaiton for development purpose.

Answer 1

This answer heavily inspires from an article written by James Bugherd that can be found at the time of this writing here: https://hackernoon.com/how-to-take-screenshots-in-the-browser-using-javascript-l92k3xq7

According to this SO answer, you can take a screenshot using html2canvas via

const screenshotTarget = document.body;

html2canvas(screenshotTarget).then((canvas) => {
    const base64image = canvas.toDataURL("image/png");
    console.log("Snapshot captured:", base64image);
});

see https://hackernoon.com/how-to-take-screenshots-in-the-browser-using-javascript-l92k3xq7

The idea is to get the structure from document.body, pass it to html2canvas and then convert it into a base64 image in the callback which can then be used as you please.

However, html2canvas is not perfect in implementing CSS rules and external sources are also possibly quite blocked due to CORS.

Alternatively you can use navigator.mediaDevices.getDisplayMedia():

const capture = async () => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const video = document.createElement("video");

  try {
    const captureStream = await navigator.mediaDevices.getDisplayMedia();
    video.srcObject = captureStream;
    context.drawImage(video, 0, 0, window.width, window.height);
    const frame = canvas.toDataURL("image/png");
    captureStream.getTracks().forEach(track => track.stop());
    window.location.href = frame;
  } catch (err) {
    console.error("Error: " + err);
  }
};

capture();

A third possibility is to create a screenshot as a service:

const url2png = require('url2png')('API_KEY', 'PRIVATE_KEY');
const fs = require('fs');

app.get('/screenshot', (req, res) => {
    url2png.readURL(req.query.url, {}).pipe(fs.createWriteStream('screenshot.png'));
    res.json({success: true})
});

You can return the result as a response to the request, see https://www.url2png.com/docs?ref=hackernoon.com

If you create a service at your server and either send to it your figma resource via your Figma plugin (be careful of CORS headers and CSP), or use your service to query Figma. Such a service is not necessary to take a screenshot of the content it receives (and which is not actually displayed in the screen), so, alternatively you can use the GET image API function Figme provides.