Forum Discussion
downloading a customized image from the course
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.
Thank you - unfortunately I do not know JAVA script, but maybe it is an opportunity to learn :) Thank you, checking it.
Related Content
- 7 months ago
- 2 months ago
- 2 months ago