如何将div变成图片并用按钮下载？

如何解决如何将div变成图片并用按钮下载？

最初，我想要这个“instagram”按钮将引用框转换为具有 instagram 帖子尺寸（1080 像素到 1080 像素）的图像并自动下载。

const quoteContainer = document.getElementById('quote-container')
const quoteText = document.getElementById('quote')
const authorText = document.getElementById('author')
const twitterBtn = document.getElementById('twitter')
const newQuoteBtn = document.getElementById('new-quote')
const loader = document.getElementById('loader')

let apiQuotes = [];

// Show Loading
function loading() {
    loader.hidden = false;
    quoteContainer.hidden = true;
}

function complete(){
    quoteContainer.hidden = false;
    loader.hidden = true;
}

// Show New Quote
function newQuote( ) {
  loading();
  //  Pick a random quote from apiQuotes array
  const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
  //  Check if Author field is blank and replace it with UkNown

  authorText.textContent = quote.author;
  quoteText.textContent = quote.text;

  if (!quote.author) {
      authorText.textContent = 'UnkNown Wisdom'; 
  } else {
      authorText.textContent = quote.author;
  }

  if (quote.text.length > 120) {
      quoteText.classList.add('long-quote');
  } else {
      quoteText.classList.remove('long-quote');
  }

  quoteText.textContent = quote.text;
  complete();

}

// Get Quotes From API
async function getQuotes() {
    loading();
    const apiUrl = 'https://type.fit/api/quotes';
    try {
        const response = await fetch(apiUrl);
        apiQuotes = await response.json();
        newQuote();
    } catch (error) {
        // Catch Error Here
    }
}

newQuoteBtn.addEventListener('click',newQuote);
// On Load
getQuotes();
// loading() 

// Screenshot Download

@import url('https://fonts.googleapis.com/css2?family=Fraunces&display=swap');


html {
    Box-sizing: border-Box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: #dae7ff;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: rgb(46,46,46);
    font-family: Fraunces,sans-serif;
    font-weight: 550;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.quote-container {
    width: auto;
    max-width: 900px;
    padding: 10px 40px;
    border-radius: 10px;
    background-color: #00ffb33b;
    Box-shadow: 0 10px 10px 0px #2c244e6e;
}

.quote-text {
    font-size: 2.2rem;
}

.long-quote {
    font-size: 2rem;
}

.fa-brain {
    color: #4b4b4b60;
    font-size: 2rem;
}

.quote-author {
    margin-top: 15px;
    font-size: 1.75rem;
    font-weight: 200;
    font-style: italic;
}

.button-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

button {
    cursor: pointer;
    font-size: 1rem;
    height: 2rem;
    border: none;
    border-radius: 10px;
    color: rgba(0,0.582);
    background: #e6efff;
    outline: none;
    padding: 0.5rem 2rem;
    Box-shadow: 0 0.2rem rgba(7,73,57,0.651);
    font-style: oblique;
}

button:hover {
    filter: brightness(98%)
}

button:active {
    transform: translate(0,0.5rem);
    Box-shadow: 0 0.1rem rgba(7,0.651);
}

.instagram-button {
    background: rgb(131,58,180);
    background: linear-gradient(90deg,rgba(131,180,1) 0%,rgba(253,29,1) 50%,rgba(252,176,69,1) 100%);
}

.fa-instagram {
    color: rgb(255,255,255);
    font-size: 2rem;
    line-height: 17px;
}

.loader {
border: 16px solid #dae7ff; /* Light grey */
border-top: 16px solid #00ffb33b; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


/* Media Query */
@media screen and (max-width: 1000px) {
    .quote-container {
        margin: auto 10px;
    }

    .quote-text {
        font-size: 2rem;
    }

    button {
        font-size: 1rem;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Awesome Quotes</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/site.webmanifest">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
</head>
<body>
    <div class="quote-container" id="quote-container">
        <!-- Quote -->
        <div class="quote-text">
            <i class="fas fa-brain"></i>
            <span id="quote"></span>
        </div>
        <!-- Autor -->
        <div class="quote-author">
            <span id="author"></span>
        </div>
        <!-- Buttons -->
        <div class="button-container">
                <button class="instagram-button" id="Instagram" title="Share to your story!">
                    <i class="fab fa-instagram"></i>
                </button>
            <button id="new-quote">New Quote</button>
        </div>
    </div>
    <!-- Loader -->
    <div class="loader" id="loader"></div>

</body>
</html>