0

I'm implementing a drag and drop grid dashboard similar to cryptotiles.io or microsoft's powerbi. I have the grid working using vue-grid-layout. I want to now implement a drawer to add in more tiles. Would it be possible to render a component on plan on displaying on the grid onto an offscreen canvas. From there convert that to an image and use the image as a preview so that user's know what the component kind of looks like before adding it to the actual grid?

edit: html2canvas offscreen I found this. I'm wondering if adding to the dom off the window somehow to make a thumbnail would affect performance?

user6728767
  • 1,123
  • 3
  • 15
  • 31
  • Do you need to keep images dynamic? If not, you don't need to render it on client side at all. – Estus Flask Jun 27 '19 at 18:01
  • It can be done, but you don't need it. The moment the image loaded, the browser has it. If you try to use it elsewhere in the page, the browser will use the same downloaded resource (except if either client or server specify request should not be cached, using cache-control, which doesn't happen by default for images). Creating an `` (with js) and setting its `src` to the image link will tell the browser to start (or queue) its loading, even without adding it to DOM. You can also have a `onload` event on the programmatic tag and run any code when it loaded (as in... add it to DOM). – tao Jun 27 '19 at 19:30
  • The component itself isn't an `` tag though. I was going to add it to the dom and then use html2canvas to kind of take a screenshot of it as a preview thumbnail. But I also don't want to make it visible to the user until they decide to "add" it after seeing the thumbnail. Wouldn't I need to render it offscreen or something first? – user6728767 Jun 27 '19 at 20:12
  • I already said you don't. The `` tag is ***irrelevant***. It is only a method to preload the file so the browser has it. Why would you go through the trouble of using any other mechanism to "screenshot" something and what are you going to do with that something? You'll turn it into a file? Where are you going to store it? And isn't that "file" going to serve the exact same purpose as the image file? Again, you don't actually need to add the `` file to DOM. You only need to create it and store in a variable and you have the "file" contents. – tao Jun 27 '19 at 21:35

0 Answers0