How to Save a Section of Screen as an Image File?

Discussion Ask a question
,
1

I want to “screenshot” a container box and its contents and save the image as a .jpg or QR code in the image field of a Wix collection. This should really be a Wix Editor function.

3

You can use this code inside of an HTML-Component.
You will have to expand the code and complete it, to get your wished result!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenshot Capture</title>
<style>
  #capture {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    border: 1px solid black;
  }
</style>
</head>
<body>

<h1 id="capture">Hellooooo</h1>
<button id="btn">Capture</button>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
function capture() {
  const captureElement = document.querySelector('#capture');
  html2canvas(captureElement)
    .then(canvas => {
      const image = canvas.toDataURL('image/png');
      const a = document.createElement('a');
      a.setAttribute('download', 'my-image.png');
      a.setAttribute('href', image);
      a.click();
    });
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', capture);
</script>

</body>
</html>
1 Like
4

Thanks. I’ll give it a try.

5

Hi @russian-dima can one send data from a collection to the html component?
What I want to do is to create downloadable membership card containing name, membership number, picture and some other information. The user should be able to download the card and either have it on his phone or print it.
To create a container with the info and make it look good is no problem. But now what?
An option (maybe even better quality) would be to directly create a pdf for download but I could not find any info if that’s possible and how to do it.

6

Yes all this is doable → ABER → Du wirst eine Menge CUSTOM-CODE dafür benötigen.
I asume, you understand German :grinning:

However, since this POST has been resolved already and the POST-OPENER has found his SOLUTION already → you should open your own post with your own topic and including detailed description.

The magic word to get what you want will surely be → BASE64.

You will need…

  1. BASE64 CODER + DECODER
  2. CANVAS to BASE64 ← → BASE64 to CANVAS
  3. IMAGE to BASE64 ← → BASE64 to IMAGE
  4. TEXT to BASE64 ← → BASE64 to TEXT
  5. Other informations like VIDEOS ??? → BINARY-DATA (BUFFER).

And so on.

-Send all data as baSE64 to HTMLCOMPONENT.
-Prepare or edit your data inside of HTML-Comp.
-Convert to the format you want inside HTML-Comp.
-Download it → DONE !!!

7

Vielen Dank! Ja ich verstehe Deutsch :slight_smile:
Let me research a little and then I might make a separate post. Thanks a lot for responding!

8

I got it solved by generating a downloadable pdf file instead of trying to capture part of the screen. This article Generate and download a custom PDF with pdf-lib
helped me get started.

1 Like
9

The only problem encountered is when embedding larger images. This generates an error.