shopify how to pdf file generated and set image

Question

I have created a custom section for the blog. I also insert the below button and the button name is "generated pdf". when I click on the generated button then download pdf and this pdf I want to show my article blog image.

I want to show my blog image in pdf I have no idea how to implement it. so please help me I will share my code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
{%- assign feature_blog = section.settings.feature_blog -%}
{%- assign feature_blog_articles = feature_blog.articles -%}

{% schema %}
  {
  "name": "Blog Home Page",
  "settings": [
    {
      "type": "blog",
      "id": "feature_blog",
      "label": "Feature blog"
    },
    {
        "type": "text",
        "id": "section_title",
        "label": "Section Title",
        "default": "Feature Blog"
    }
  ],
  "presets": [
    {
      "name": "Blog Home Page"
    }
  ]
}  
{% endschema %}

{% for article in blog.articles  %} 
  {% for comment in article.comments %}
    <a href="#">{{ comment.author }}</a>
  {% endfor %}
{% endfor %}

<div class="home-page section-blog">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="section-title">
                    {% if section.settings.section_title !='' %}
                    <h2>{{ section.settings.section_title }}</h2>
                    {% endif %}
                  </div>
                <div class="bloginner-main">
                    {% for article in feature_blog_articles %}
                        <div class="single-product-wrap">
                           <div class="product-image">
                                <div class="blog-item-badge">
                                    <a href="{{ article.url }}
                                    " target="_blank">
                                        {%- assign img_url = article.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                                        <img class="lazyload"
                                            src="{{ article.image.src | img_url: '2048x'  }}"
                                            data-src="{{ img_url }}"
                                            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                                            data-aspectratio="{{ article.image.src.aspect_ratio }}"
                                            data-sizes="auto"
                                            alt="{{ image.alt | escape }}">
                                    </a>
                                </div>
                           </div> 
                           <div class="product-content">
                            
                            <h3>{{ article.title }}</h3>
                            <span>{{ article.excerpt }}</span>
                            <div class="price-box">
                              {% for comment in article.comments %}
                                <a href="{{ article.url }}">{{ comment.author }}</a>
                              {% endfor %}
                            </div>
                                
                           </div> 
                           <div class="lg-banner-info">
                                <a class="btn more-product-btn" href="{{ article.url }}">View More</a>
                            </div>
                        </div>
                    {% endfor %}    
                </div>
            </div>
        </div>        
    </div>    
</div>
<button onclick="createPdf()" id="cmd">Generate PDF</button>

<script>

  var ourBlogctive = $('.bloginner-main');
  ourBlogctive.slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    margin: 30,
    prevArrow: '<button type="button" class="slick-prev"> <i class="icon-arrow-left"></i> </button>',
    nextArrow: '<button type="button" class="slick-next"><i class="icon-arrow-right"></i></button>'
  });
  


</script>



<script type="text/javascript">
function createPdf() {
    var doc = new jsPDF();
    var yOffset = 20; // Initial y-offset for text

    {% for article in feature_blog_articles %}
        // Add article title to the PDF
        doc.text("Title: <img src ='{{ article.image.src }}'>", 10, yOffset);
        

        yOffset += 10; // Adjust y-offset for the next line

        // Add a line break
        doc.text("", 10, yOffset);
        yOffset += 10; // Adjust y-offset for the next line
    {% endfor %}

    // Save the PDF
    doc.save('sample-file.pdf');
}
</script>

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}