Forum Discussion
Drawing Annotation on Storyline Slide
Demo: https://360.articulate.com/review/content/518383b2-1161-408d-b9f5-adb9a6f57a11/review Inspired by code discussed on: https://img.ly/blog/how-to-draw-on-an-image-with-javascript/ Using C...
Offcourse i cannot resist a challenge. So to detect whether a user's drawing is valid you need to convert the image to base64. Do try it with 2 similar but different images.
https://www.base64-image.de/
Here you can create base64 encoding.
Then you compare the outputs like here.
https://codepen.io/rosca/pen/NWLqLJ
And you get a result in amounts of pixels that differ. If you would want this to work in Storyline, you need to do some testruns...how much pixels the endresult may vary. I made 2 images, i with an ok-selection...that varied 750 pixels, and one completely off..that varied > 8000 pixels.
If time permits i make a demo of this.
Good example math. If we wanted to incorporate that into this canvas drawing demo, it might be good to just forego the base image and just use the user drawn components to compare to a similar key overlay. This way, we could make generic keys that could be more easily applied to multiple image scenarios.
Indeed. I do think i have parts for the code for that available in some older project 😀
