search

dmreagan / collectome

https://collectome.rt.iu.edu/
BSD 3-Clause "New" or "Revised" License
1 stars 0 forks source link

Settle on thumbnail design #3

Closed dmreagan closed 5 years ago

dmreagan commented 5 years ago

Screen layout + container layout in one image? Screen layout and container layout in separate images? Automatically capture images? Generate SVG icons based on config? User-uploaded image?

dmreagan commented 5 years ago

Try generating thumbnails dynamically with the Canvas API.

If there are performance problems with drawing many canvases simultaneously for the search results, we can explore OffscreenCanvas. It is not well supported, but perhaps there is a polyfill that can provide support.

guangchen commented 5 years ago

Implemented Canvas API based approach as suggested by Dave to draw both display and grid layouts on the fly. Note that the drawing is for illustration purpose and does not reflect the actual size/aspect ratio as indicated by the config file. However, the visual effect looks satisfactory and should serve our purpose well. Note that we need to implement custom directive to manipulate the Canvas DOM element on the fly rather than in controller since DOM elements are not initialized yet.

In the meantime, this will enable us to get rid of 'html2canvas' screenshot capture lib which has its own issues (especially for capturing iframes). Note that in the latest commit we still keep it for future review purpose.