title: How to create a PNG image from HTML page and save it to the database using Django?
body: <p>I'm new to django.
  So basically i have created a card view in my HTML page.</p>
  
  <p>When i click download buttton, an image file (PNG) of the HTML card (as exactly shown in the picture) should be created and saved it to the database.
  The downloaded image should be in media/cardimage folder in django project.
  The image is shown below.(Screenshot)<a href="https://i.stack.imgur.com/386kZ.png" rel="nofollow noreferrer">card image</a>
  HTML code is shown below</p>
  
  <p>How can i achieve this task ??
  Help from anynone is much appreciated.</p>
  
  <p>Thankyou.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
          &lt;div class="col" &gt;
              &lt;div class="col-lg-4 d-flex align-items-stretch" &gt;
                  &lt;div id="html-content-holder" class="card rounded-lg shadow bg-white rounded" style="width: 25rem; width: 50vw; margin:auto;"&gt;
                      &lt;div class="overlay"&gt;
                          &lt;img class="card-img-top" src="{% static 'images/ab_nba_040320.jpg' %}" alt="Card image cap"&gt;
                      &lt;/div&gt;
                      &lt;!-- Card content --&gt;
                      &lt;div class="card-body"&gt;
                          &lt;!-- Title --&gt;
                          &lt;div style="text-align: left;"&gt;
                              &lt;h4 class="card-title font-weight-bold align-left"&gt;
                                  &lt;p style="font-size: 80%;"&gt;NBA: Davis sparks Lakers over Sixers with hot second quarter, LeVert hits career-best 51pts as Nets beat Celtics
                                      &lt;a id="btn-Convert-Html2Image" class="fa fa-download" aria-hidden="true" style="cursor: pointer;" title="Download"&gt;&lt;/a&gt;
                                  &lt;/p&gt;
                              &lt;/h4&gt;
                              &lt;!-- Text --&gt;
                              &lt;p class="card-text" style="font-size: 85%;"&gt;Anthony Davis produced a devastating burst of scoring, as the Los Angeles Lakers came from behind to defeat the Philadelphia 76ers 120-107 on Tuesday (March 3) in their National Basketball Association (NBA) game.
                                  He led the Lakers' surge with 37 points at the Staples Centre after the hosts recovered from a slow start to run out convincing winners.&lt;/p&gt;
                              &lt;p style="font-size: 70%; opacity: 30%;"&gt;Published Date: 05 Mar 2020&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;img class="" style="width: 30%; height: auto; margin-bottom: -5%;" src="{% static 'images/cover.png' %}" alt="Card image cap"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>