0

When making something like a bio-card creator, I realised it would be helpful if there was a way to download just the "card" as an image, instead of the user having to screenshot. I know this is possible, but I'm not sure exactly how to do this. My code looks like this (note that the user can edit the sections to personalise)

<div class="profileoutline">
   <form>
       <input type="text" id="name" placeholder="Name here">
           <center>                    
                 <p contenteditable="true" id="desc">E.g. They/Them/Theirs</p>
           </center>
           <br>                   
           <div class="col-xs-5 col-sm-5 col-lg-5">
                <div class="box">
                     &nbsp&nbsp&nbsp&nbsp&nbsp Likes
                     <p contenteditable="true" class="boxlefttext">-Something you like <br> -Something you like</p>
                     <br>
                     &nbsp&nbsp&nbsp&nbsp&nbsp Dislikes
                     <p contenteditable="true" class="boxlefttext">-Something you dislike <br> -Something you dislike</p>
                </div>
           </div>
           <div class="col-xs-7 col-sm-7 col-lg-7">
             <p contenteditable="true">Something about you.....<br><br><br><br><br><em style="color:rgb(96, 96, 126); font-size:10px;">this box will grow larger if you type more!</em></p>
           </div>
     </form>
</div>

The CSS is pretty basic, just to make it styled like a card. I would like a way for the user to download the card they made, something like this website (see how there is a download button at the bottom, where the card itself- not the whole website- is able to be downloaded). I'd also like for this to be used on mobile and desktop.

Anyone have any idea how to do this?

Jon P
  • 19,442
  • 8
  • 49
  • 72
Iamahuman
  • 13
  • 7
  • Some HTML advice. The `center` tag is [obsolete](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) so don't use that. Use more semantic mark up in conjunction with margins and padding to avoid using `&nbsp` and `
    ` for spacing purposes.     – Jon P Nov 16 '20 at 23:55
  • Ah, thank you. Also, I thought I saw something about html2canvas here, and have been wrestling with it for several hours (and failing) but it seems it was deleted, anyone have any ideas how to use it? (I've not used it before. The documentation is extremely lacking imo and nothing I see online seems to be working). – Iamahuman Nov 17 '20 at 02:21
  • Html2convas is just the first step. You then need to convert the canvas to an image and then allow the image to be downloaded to the client. – Jon P Nov 17 '20 at 04:18
  • Thank you. I figured this out a couple hours ago (before I saw your post), but thanks – Iamahuman Nov 17 '20 at 14:17

0 Answers0