I am looking for a way for the user to be able to download an image while doing the course / or at the end of the could with the learner's name included in it (as a variable). Am I dreaming big, or is this something I can get Storyline 360 to do? Thank you for your expert views on this :)
Thanks for reaching out! I'm not sure if it's possible for a learner to download an image from a course, but I have seen discussions around using a print function to print any page in Storyline.
Take a look below and feel free to reach out there for the community to offer some advice!
Thank you very much for your response. Unfortunately it is not an option – what the learner downloads needs to be an image file to use it somewhere else in a user journey.
If you do know a bit of Javascript, how to select elements in Storyline with Javascript, how to debug in Storyline you can manage it without the use of the above mentioned.
Basically it works quite simple. It generates a Canvas based image on a selection you predefine. Can be either a part of your Storyline viewport or the complete viewport. So know your selectors ;-)
When your Storyline has this javascript available...you can grab whats needed and convert it to a image. Actually this is a really nice feature as it gives you the possibility to create great interactions with Storyline. For example custom transitions and more... well thats for another time...
This line does the work and captures your screen to an image. html2canvas(document.querySelector(".card")).then((canvas) => { // document.body.appendChild(canvas); download(canvas, "mynewimage"); });
As you might notice there is a line commented. That line appends the image to the current view. As that is not needed now, its commented, but you can enable it to see it working....and show a preview...or do some other nice tricks with it.
One of Storyline's mishaps on HTML5 is the lack of the 'Canvas'-tag in its HTML-code. So you also need to manually add a 'Canvas' to get this working, as all of this is based on Canvas.
The main issue is with the way Storyline treats images. All images are converted to inline SVG, and somehow Html2Canvas doesnot see those inline SVGs. One thing to investigate further.
PS. Apparently there is an issue with Html2Canvas and inline SVGs, so thats the cause why the images wont show, when using the above. More to research.
Hello Math, I've been digging for this solution for a long time and what you have here seems to be exactly what I need. I'm newer to java script and I'm wondering if you'd be willing to share your storyline file for me to see how you implemented it in this example.
The project I'm working on is an interactive decision tree chart where the learner fills in the values on the chart. They then need to be able to put an image of their filled out chart into a paper they submit for the course. The slide that needs to be turned into an image will only have shapes and text entry boxes on it.
I tried adding the code you put in your example into my project and it didn't work.
Any help you can throw my way would be greatly appreciated!
8 Replies
Hi Viki,
Thanks for reaching out! I'm not sure if it's possible for a learner to download an image from a course, but I have seen discussions around using a print function to print any page in Storyline.
Take a look below and feel free to reach out there for the community to offer some advice!
Thank you very much for your response. Unfortunately it is not an option – what the learner downloads needs to be an image file to use it somewhere else in a user journey.
Have a nice day, Viki
[Vodafone]
Viktória Ross
EVO Learning Developer
TCC Office
+36 70 3868848
viktoria.ross@vodafone.com
Arena Corner, Kerepesi Tower, H-1087 Budapest, Hungária körύt 40-44, Hungary
vodafone.com
Together we can
C2 General
Hye can I download certain images?
With the aid of some Javascript magic this can be done.
If you donot know Javascript you can embed this tool and get it done.
https://www.screenshotapi.net/
https://codepen.io/ubahthebuilder/pen/JjyKbRQ?editors=1010
If you do know a bit of Javascript, how to select elements in Storyline with Javascript, how to debug in Storyline you can manage it without the use of the above mentioned.
HTML2Canvas does the trick as seen here.
https://codepen.io/koseare/pen/NWpMjeP
Basically it works quite simple. It generates a Canvas based image on a selection you predefine. Can be either a part of your Storyline viewport or the complete viewport. So know your selectors ;-)
This is the url of HTML2Canvas.js you need for it.
https://html2canvas.hertzen.com/dist/html2canvas.js
When your Storyline has this javascript available...you can grab whats needed and convert it to a image. Actually this is a really nice feature as it gives you the possibility to create great interactions with Storyline. For example custom transitions and more... well thats for another time...
This line does the work and captures your screen to an image.
html2canvas(document.querySelector(".card")).then((canvas) => {// document.body.appendChild(canvas);download(canvas, "mynewimage");});As you might notice there is a line commented. That line appends the image to the current view. As that is not needed now, its commented, but you can enable it to see it working....and show a preview...or do some other nice tricks with it.
One of Storyline's mishaps on HTML5 is the lack of the 'Canvas'-tag in its HTML-code. So you also need to manually add a 'Canvas' to get this working, as all of this is based on Canvas.
The above mentioned works partially. You can see that here...
https://360.articulate.com/review/content/06a7d51d-a924-49b7-a9e9-7d1819274e8e/review
The main issue is with the way Storyline treats images. All images are converted to inline SVG, and somehow Html2Canvas doesnot see those inline SVGs. One thing to investigate further.
PS. Apparently there is an issue with Html2Canvas and inline SVGs, so thats the cause why the images wont show, when using the above. More to research.
Thank you - unfortunately I do not know JAVA script, but maybe it is an opportunity to learn :) Thank you, checking it.
Hello Math, I've been digging for this solution for a long time and what you have here seems to be exactly what I need. I'm newer to java script and I'm wondering if you'd be willing to share your storyline file for me to see how you implemented it in this example.
The project I'm working on is an interactive decision tree chart where the learner fills in the values on the chart. They then need to be able to put an image of their filled out chart into a paper they submit for the course. The slide that needs to be turned into an image will only have shapes and text entry boxes on it.
I tried adding the code you put in your example into my project and it didn't work.
Any help you can throw my way would be greatly appreciated!
Also, you said that the Canvas tag needs to be added to the HTML. Do you mind sharing how you do that as well? Thank you!