Has anyone figured out how to add html2canvas on a page?
I am using Wix Studio.
I want to allow users to download a component as a png file. I understand this is a tricky procedure, and one way I found it to be possible is to write a code through which wix takes a screenshot of the container and allows users to download it. For this I first need to allow html2canvas, but I can’t figure out how. I tried a code written by chatgpt but it doesn’t work.
Anyone has ever managed to make this work? Please please let me know how.
Thank You!
In Wix Studio, you need to first add html2canvas as an external library through the Custom Code settings. Once that’s done, you can use JavaScript to capture the specific container and trigger a download when a button is clicked. Make sure the script runs inside Wix’s onReady function, and check that the element IDs match your setup. If it’s not working, try placing the script in a Custom Element instead of adding it directly to the page.
I tried the Custom Code, it didn’t work. Have you done that before? Can you please share the specific code and settings you used to implement it? I will be highly grateful.
If I understood correctly, the Custom Code didn’t work because you couldn’t directly access window and document?
which code you had used ?
This one:
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("download-btn").addEventListener("click", function () {
let element = document.getElementById("your-component-id"); // Change this to match your component ID
html2canvas(element).then(canvas => {
let link = document.createElement("a");
link.href = canvas.toDataURL("image/png");
link.download = "component.png";
link.click();
});
});
});
There are changes that need to be done would you provide me with an email where i can help you out if interested
Hi Tech Voyager, I haven’t heard back from you, did you receive my e-mail? I want to delete it from here, so I’m asking if you have saved it.
Hi, @Ana_Mikatadze !!
It’s not ideal to post an email address directly on the forum, so I think it’s better to delete that post and send a direct message to Tech_Voyager instead. 
1 Like
Thank you! Deleted it, had the same feeling myself. Any chance you could also maybe help me with the issue at hand? I can’t figure out why the html2canvas doesn’t work and no one knows why.
@Ana_Mikatadze .
I’m not exactly sure what you’re trying to achieve with html2canvas in Wix, but are you looking to capture the Wix site’s screen as an image on a canvas and download it? If that’s the case, the only possible way to do it in Wix would be through a custom element, but I think it would be quite difficult. That being said, I believe taking a screenshot within a custom element should be possible. 
1 Like
Yes, that’s what I’m trying to achieve. If this may be of your interest as well, would you be willing to help me figure this out for a small fee? I couldn’t find the direct message option here, but if you are and I’d be super glad, then send me one and we can go over the details.
@Ana_Mikatadze
I did a quick experiment with ChatGPT’s help to see if html2canvas could capture a screenshot of a Wix site. It turns out that taking a full-page screenshot and downloading it locally is indeed possible.
The following code is just a rough implementation to get it working, so I’m sure there are some issues. However, since you’ll probably want to test it right away, I’m sharing it as is.
Write this code into a .js file and set it up to load into a Custom Element. When specifying the .js file for the Custom Element, you’ll be asked to enter a tag name—please enter "screenshot-element".
Since it’s important, I’ll say it twice: This is a draft, not the final version. It’s the version that ChatGPT helped draft, and I’ve only made a few adjustments to get it working as a rough prototype. OK?
import html2canvas from "html2canvas";
class ScreenshotElement extends HTMLElement {
connectedCallback() {
this.render();
}
render() {
this.innerHTML = `
<button id="capture" style="padding: 10px; font-size: 16px; cursor: pointer; border: none; background: #007BFF; color: white; border-radius: 5px; transition: background 0.3s;">Screenshot</button>
<button id="download" style="padding: 10px; font-size: 16px; cursor: pointer; border: none; background: #28a745; color: white; border-radius: 5px; transition: background 0.3s; margin-left: 10px; display: none;">Download</button>
<div id="screenshotResult" style="margin-top: 10px;"></div>
`;
const button = this.querySelector("#capture");
const downloadButton = this.querySelector("#download");
const resultContainer = this.querySelector("#screenshotResult");
let lastImageURL = ""; // Stores the latest screenshot URL
button.addEventListener("click", async () => {
button.style.background = "#0056b3";
setTimeout(() => button.style.background = "#007BFF", 200);
try {
const target = document.body; // Capture the entire Wix page
const canvas = await html2canvas(target, { useCORS: true });
lastImageURL = canvas.toDataURL("image/png");
const img = document.createElement("img");
img.src = lastImageURL;
img.style.maxWidth = "100%";
img.style.border = "1px solid #ccc";
resultContainer.innerHTML = ""; // Clear the previous screenshot
resultContainer.appendChild(img);
downloadButton.style.display = "inline-block"; // Show the download button
} catch (error) {
console.error("An error occurred while taking the screenshot:", error);
}
});
downloadButton.addEventListener("click", () => {
if (lastImageURL) {
const link = document.createElement("a");
link.href = lastImageURL;
link.download = `screenshot_${Date.now()}.png`;
link.click();
}
});
}
}
customElements.define("screenshot-element", ScreenshotElement);
1 Like
I’m not sure if it’s possible to capture only Wix components. I think it could be done if Wix components can be specified by ID, but I can’t say for certain, as Wix has some unique behavior in that regard. Alternatively, you could create your component as a Custom Element and capture it with html2canvas, which would likely solve the problem completely. However, if you want to create the component directly in Wix, that might not be a viable solution.
1 Like