Sure. It’s so simple that you might find it underwhelming. 
I found it surprisingly difficult to explain in words, so would you mind referring to the link below? In the Wix editor, there’s an npm option where you can simply search for “html2canvas” and click to install it.
It worked! Thank you so much! All I need to do now is figure out whether I can specify the wix component so that it takes the screenshot of that part of the screen. I you have any ideas on that, I won’t be bothering you anymore, the rest I think I understand. If not, thank you a thousand times still <3
Great! 
If you’re able to capture screenshots of each component, please share the results here—it would help contribute to the growth of the community.
If I remember correctly, in Wix, each component is assigned a unique ID (different from the one in the Wix Editor), so you might need to check the developer console to view it. If the ID remains constant, it might be usable, but if it changes dynamically, some additional adjustments may be necessary. That’s something we’ll only know after trying it out.
If I have time, I’ll give it a try as well. In any case, great job on everything so far! If you ever have some free time, I’d really appreciate your continued support in helping this community grow. 
Let’s enjoy Wix together and make it even better!
Thank you! Let me know if you do. Yes, wix has unique IDs and I tried inputting it through the help of chatgpt, but it didn’t work and I’m trying to debug now. If I figure it out, I will for sure share it on the forum. Wishing you all the best!
I experimented with it, and it seems possible to capture only specific components as images.
Oh that’s great news! I got into some tutorials on custom elements and found it to be possible too to connect a custom element function with a wix element, but still debunking the code to figure out how to apply to my case. How did you manage to do it, can you share? I’ll create a new post on the forum with a full and concise breakdown 
Do I need to add a code in the Velo code as well? Or just changing the parameters of what to take a screenshot of is enough?
You don’t need to add any additional code to the Velo script. In short, what Ana needs to do is change the target from the entire page to a specific component. Do you see that the current target is document.body? This means you need to modify it to something like :
document.querySelector("#someCompId")
The someCompId here refers to an ID that Wix automatically generates for the actual HTML element. You’ll need to find that specific ID and specify it yourself. (I’m not sure if this ID remains constant, so if it changes, you might need a more complex way to select the element.)
To find the correct ID, open the page where the custom element is placed on your live site, then use your browser’s developer tools to inspect the actual HTML structure of the Wix site. Look for the component you think is the right one, find its ID, and use that.
If you’re using Google Chrome, right-click the component and select “Inspect”—this will jump directly to the corresponding tag in the HTML. Inside that tag, you’ll see an id attribute. Copy that ID and replace it in the code like this:
document.querySelector("#here!!")
I think you should be able to reproduce this on your end, but you might want to fine-tune the options for html2canvas a bit more.
There is an option called scale, which controls the resolution of the output image. The higher the value, the better the image quality—though this also increases the data size. It’s recommended to set this value to at least 2.
By default, it’s set to 1, but keeping it at this setting can lead to some strange issues. For example, if your component contains a PNG image, areas that should be transparent might appear as solid black instead.
To avoid this problem, I strongly recommend setting the scale option to 2 or higher!
That’s something I tried already and it doesn’t work. When I edit the code as you suggested and then click “screenshot”, nothing happens. Any idea why it might not be working in my case but working with you? I’m trying to screenshot a container box.
P.S. The upscaling trick I already implemented! I’m so happy I’m figuring out at least some parts of this thing Thank you for all the help!
Ohh might it be because the element I’m trying to capture is not a custom element but a regular Wix container box? I know it’s possible to connect the two, but maybe that requires an extra step? A tutorial I watched on custom elements talks about a connectedCallback function. Not sure if this is something applicable to my case as well or not.
I was using a Wix container box, where I placed text and images, and then I tried taking a screenshot. It worked, and I was able to download it. Have you checked the browser’s developer tools to see if there are any errors? I suspect that the target might be incorrect.
How did you locate the target ID? I took the ID from Velo code file. Is that an incorrect one?
It looks like the issue was simply an incorrect target ID. I’m glad the cause is now clear. As I’ve explained multiple times, the ID you need to specify is not the Velo ID. Let me explain this in a clearer way. 
When we write documents that a browser can understand, we use HTML. Wix pages are ultimately converted into HTML, which allows them to be displayed on browsers worldwide. However, when we edit our Wix sites, we don’t write raw HTML directly. Instead, we primarily write Velo code or drag and drop elements onto the page.
That being said, all of these elements are eventually converted into HTML, CSS, and JavaScript. Since only the Wix editor understands Velo code, it must be transformed into languages that browsers can interpret. During this conversion process, Wix automatically assigns unique IDs to your components.
Additionally, the custom element you created is embedded within this raw HTML as a custom tag. So, how can you access your component from within your custom element? That’s right—you need to inspect the generated HTML to find the automatically assigned ID and then use that ID in querySelector.
Did you find this explanation helpful?
Yes, I found a developer friend who helped me figure it out! It works and I’m able to duplicate the results. Thank you so much for all your help, this was a very important function for me. I’ll create a new post with the details so that others won’t have to go through this much. Wish you all the best <3
I’m glad it worked out in the end! It was a great learning experience for me as well.
html2canvas works well enough, but the recent trend seems to be using the html-to-image package. It would be helpful if you could try implementing it with that instead. I gave it a shot myself, but I couldn’t get it to work. If your developer friend could take a look at it, that would be greatly appreciated. And if you manage to get it working, sharing the results would contribute to the growth of the community! 