[✅ Solution] Website screenshot API | Screenshot Machine

🙏 Ask the Community
1

So historically I have always taken my link, saved it, and then used a calc to wrap it in html for display.

I have a new application and need a way to save the image in Tape?
This is as far as I drove the car before deciding to reach out to the hive mind.

Error: “fetch is not defined”

Any help is appreciated.

let key = collected_api_field_key_value;
let cache = 0; //
let delay = 5000 //
let device = 'desktop'; //
let dimension = '1920xfull' //
let format = 'png'; //
let url = var_link;
url = encodeURIComponent(url);

let screenshot = `https://api.screenshotmachine.com/?key=${key}&cacheLimit=${cache}&delay=${delay}&device=${device}&dimension=${dimension}&format=${format}&url=${url}`

// Get the image
fetch(screenshot).then(res => res.blob()).then(blob => {
  // Create a local URL for the image and display it in an img element
  let imgURL = URL.createObjectURL(blob);
  let img = document.createElement('img');
  img.src = imgURL;
  document.body.appendChild(img);
});

PS. Screenshot Machine has a free API with 100 calls per month and friendly pricing for volume :wink:

2

Hi @1F2Ns

This should work for you:

const api = collected_api_key_field_apikey_value;
const cache = 0;
const delay = 5000;
const device = 'desktop';
const dimension = '1920xfull';
const format = 'png';
const s_url = encodeURIComponent("https://melotte.consulting");


// download your image via the external URL
const url = `https://api.screenshotmachine.com?key=${api}&cacheLimit=${cache}&delay=${delay}&device=${device}&dimension=${dimension}&format=${format}&url=${s_url}`;

const { data: file_content } = await http.get(url, {responseEncoding: 'binary'});

// upload the downloaded image to Tape
const encoded_file_content = Buffer.from(file_content, 'binary');
const { data: uploaded_file } = await tape.File.upload({filename: 'screen.png', source: encoded_file_content});

// update current record using the uploaded file reference
const uploaded_image_file_id = uploaded_file.file_id;
await tape.Record.update(current_record_id, {fields: {screenshot:uploaded_image_file_id }})

Obviously, just replace my test website with your variable and the API key variable with yours. :slight_smile:

Oh, and I forgot you also need to replace ‘screenshot’ in the last section with the field name (External ID) of the field you want to save the image in:

melotte.consulting 2024-02-11 at 08.47.15@2x
melotte.consulting 2024-02-11 at 08.47.15@2x1454×164 29 KB

melotte.consulting 2024-02-11 at 08.48.40@2x
melotte.consulting 2024-02-11 at 08.48.40@2x972×680 50.7 KB

Hope that all makes sense

1 Like
3

Thank you sir :raised_hands:
This is exactly what I was hoping to accomplish.

3 Likes
4

No problem I am pleased it worked. I am not sure I have a use for the Screenshot Machine service myself right now but it does seem very cool :slight_smile:

5

So, I have built out an external page in tape that shows data (an estimate).

When I save it as a PDF the format gets weird. We would run into this issue with Podio as well because of how TinyMCE converts the data.

My thought was to take a screenshot of the external page and tape. Unfortunately, even with the APIs 10000ms wait, the page isn’t loaded so it just returns the circle loading gif.

I’m currently reconfiguring all of our HTML to play with the TinyMCE PDF conversion. In Podio, we ended up using RightSignature so a signed doc was returned and this became a non issue.

1 Like