Skip to Content (Press Enter)
2020-02-13 05-29-21
Anagha Chikate
31Views
9Comments
[Html 2 Image] Get binary image of the url displayed in iframe on the screen
Question
Reactive
Forge
HTML
html-2-image
Reactive icon
Html 2 Image (O11)
Forge asset by Romel Guerra
Application Type
Reactive

Hello Team,

Currently we are implementing Tableau integration.
We are embedding a view from Tableau in outsystems on screen using JavaScript, which as per the html shows this view inside an iframe.
We now need to generate an image of this iframe container to store it in our db.
I have tried HTML2Image forge component, but it is giving blank container image and not the iframe image.
Can please suggest what else i can try?
Is it not possible to convert iframe to image ?
Thanks in advance

Regards,
Anagha 

0
0
21 May 2024
Copy Link
2019-01-07 16-04-16
Siya
 
MVP
  1. Download html2canvas.js and include in your Script folder from http://html2canvas.hertzen.com/
  2. Refer html2canvas.js in your screen. Add a local variable Data : Text
  3. Add the following in the JS node of image Capture action  var iframe = document.getElementById($parameters.Id);var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;html2canvas(iframeDocument.body).then(function(canvas) {var img = canvas.toDataURL("image/png");$actions.ImageCaptured(img);}).catch(function(error) {console.error('Error capturing iframe content:', error);}); 
  4. Create a Screen action - ImageCaptured( input : text) and assign input to Data
  5. Add a Image to Screen set the type as external url and source as the Data.




0
0
21 May 2024
Copy Link
2020-02-13 05-29-21
Anagha Chikate

Hello Siya,


Thank you for taking out time and replying.
I tried the above approach, but its throwing error saying Cannot read properties of undefined (reading 'document')I have referred html2canvas.js  script in the screen.

Thanks,
Anagha

0
0
23 May 2024
Copy Link
2019-01-07 16-04-16
Siya
 
MVP

Replying to Anagha Chikate's comment on 23 May 2024 06:38:23

Attached a reference implementation that works for me. Do change the source for iframe to any application hosted in your environment and test.

IframetoImage.oml
0
0
23 May 2024
Copy Link
2020-02-13 05-29-21
Anagha Chikate

Replying to Siya's comment on 23 May 2024 12:40:09

Thanks a lot for this OML Siya.
I was able to make it work with using the application in our env.
However, i am still getting the error when i am trying with the link we have created through tableau api embedding. Below is the html snippet of the code with tableau link inside an iframe. Attaching it since i see the structure of the html different with this tableau link and the working file as its application inside our outsystems env. 
I think the JS code would be different for such structure?

Appreciate your help.
Thanks a lot
Regards,
Anagha 


0
0
23 May 2024
Copy Link
2019-01-07 16-04-16
Siya
 
MVP

Replying to Anagha Chikate's comment on 23 May 2024 13:42:44

btw is the tableau report is getting rendered on the screen ? You are seeing this error when you click on the Capture ?

0
0
23 May 2024
Copy Link
2020-02-13 05-29-21
Anagha Chikate

Replying to Siya's comment on 23 May 2024 14:03:43

yes the report is loading correctly.
The error is coming on the capture button click.

0
0
23 May 2024
Copy Link
2019-01-07 16-04-16
Siya
 
MVP

Replying to Anagha Chikate's comment on 23 May 2024 14:07:36

Could you try using the URL of an existing Outsystems application from your environment instead of the Tableau URL? Wanted to confirm this is indeed an issue with tableau.  

0
0
23 May 2024
Copy Link
2020-02-13 05-29-21
Anagha Chikate

Replying to Siya's comment on 23 May 2024 17:44:47

Hey,
Yes as i mentioned earlier this is working when i try with any screen within the environment, but is not working with the tableau view.

Thanks,
Anagha

0
0
24 May 2024
Copy Link
2019-01-07 16-04-16
Siya
 
MVP

Replying to Anagha Chikate's comment on 24 May 2024 04:16:35

Looks like this is an open issue. I could find a similar issue in Tableau forum. https://community.tableau.com/s/question/0D54T00000C695YSAR/snapshot-embeded-dashboard-view 

Would it be possible to post in the Tableau forums or reach out Tableau support for a resolution ? 

0
0
24 May 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.