[Screenshot Plugin] Is there any alternative way to capture screenshots efficiently in a reactive web app

Back to Forums

Nattasit Wanatananan

Solved

Question

Reactive

Forge

Application Type

Reactive

I previously used html2canvas, which works well on desktop browsers and Android mobile web. However, on iOS Safari, capturing and downloading the image is very slow. I then tried switching to the Screenshot Plugin (ODC), but it requires cordova-screenshot. Is there any alternative way to capture screenshots efficiently in a reactive web app on iOS Safari?

24 Feb

Gourav Shrivastava

Champion

Solution

Hello @Nattasit Wanatananan

I have attached an HTML file with sample running code. You can use the same code to implement the

HTML2Canvas in your application. You just need to go to this link:-

https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js

add JS code to your script section, and add the same script to your screen. so that you can run this code

function takeScreenshot() {
html2canvas(document.getElementById("CONTAINER_ID"), {
scale: 1 // faster on iOS
}).then(canvas => {
const link = document.createElement("a");
link.download = "screenshot.png";
link.href = canvas.toDataURL();
link.click();
});
}

Thanks

Gourav Shrivastava

See solution in context

24 Feb

1 reply

27 Feb

Show thread

Hide thread

Nattasit Wanatananan

Thank you for your response. It was very helpful.

27 Feb

Lavanya Kamalaguru

Hi @Nattasit Wanatananan ,

I have implemented a screenshot feature in ODC using JavaScript and the html2canvas library. It allows capturing a specific container or full screen.

I have attached the OML file.

Screenshot.oml

24 Feb

1 reply

24 Feb

Show thread

Hide thread

Nattasit Wanatananan

Sorry, I can’t open this file. I’m using ODC Studio version 1.6.20, and I also tried opening it with O11 version 11.55.60, but it still wouldn’t open.

24 Feb

Gourav Shrivastava

Champion

Solution

Hello @Nattasit Wanatananan

I have attached an HTML file with sample running code. You can use the same code to implement the

HTML2Canvas in your application. You just need to go to this link:-

https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js

add JS code to your script section, and add the same script to your screen. so that you can run this code

function takeScreenshot() {
html2canvas(document.getElementById("CONTAINER_ID"), {
scale: 1 // faster on iOS
}).then(canvas => {
const link = document.createElement("a");
link.download = "screenshot.png";
link.href = canvas.toDataURL();
link.click();
});
}

Thanks

Gourav Shrivastava

24 Feb

1 reply

27 Feb

Show thread

Hide thread

Nattasit Wanatananan

Thank you for your response. It was very helpful.

27 Feb

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines