download button not downloading image in javascript

Question

i have an html canvas in which the image is being displayed from database, user can add dynamic text to image and download that image with the text entered. Following is my code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">




<div class="container">
  <div style="margin-top: 5%;" class="row">

    <?php
            require('db_config.php');
$id=$_GET['editid'];

            $sql = "SELECT * FROM image_gallery where id='$id'";
            $images = $mysqli->query($sql);


            while($image = $images->fetch_assoc()){


            ?>
      <div class="col-md-5"><canvas id="imageCanvas"></canvas></div>
      <div class="col-md-1"></div>



      <div style="margin-left: 2%;" class="col-md-5">


        <div class="modal-content">
          <div class="modal-header">
            <h4 class="something">
              <?php echo $image['title']; ?>
            </h4>
            <div class="modal-body">


              <form method="post" action="" id="form_name">
                <div class="row">
                  <div class="col-md-12">
                    <input class="lolan" type="text" id="name" placeholder="Full Name" required />
                    <!-- <label for="name" class="form__label">Full Name</label> -->
                  </div>
                  <div id="chumma" class="col-md-12">

                    <button id="download" type="submit" onclick="download_image()" name="button" value="Download" class="btn btn-primary">Download</button>

                  </div>
                </div>
              </form>



            </div>
          </div>
        </div>

      </div>

  </div>
</div>





<script type="text/javascript">
  var text_title = "Heading";

  var canvas = document.getElementById('imageCanvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  // img.crossOrigin = "anonymous";

  window.addEventListener('load', DrawPlaceholder)

  function DrawPlaceholder() {
    img.onload = function() {
      DrawOverlay(img);
      DrawText(text_title);
      DynamicText(img)
    };
    img.src = 'uploads/<?php echo $image['
    image ']  ?>';

  }

  var canvas = document.getElementsByTagName('canvas')[0];
  canvas.width = 500;
  canvas.height = 500;


  function DrawOverlay(img) {

    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);


    ctx.fillStyle = 'rgba(230, 14, 14, 0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  function DrawText(text) {
    ctx.fillStyle = "black";
    ctx.textBaseline = 'middle';
    ctx.font = "50px 'Montserrat'";
    ctx.fillText(text, 50, 50);
  }

  function DynamicText(img) {
    document.getElementById('name').addEventListener('keyup', function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      DrawOverlay(img);
      text_title = this.value;
      DrawText(text_title);
    });
  }


  function download_image() {
    var canvas = document.getElementById("mcanvas");
    image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var link = document.createElement('a');
    link.download = "my-image.png";
    link.href = image;
    link.click();
  }
</script>


<?php } ?>

now when i click the download button, its not downloading the image. can anyone please tell me what is wrong in here, thanks in advance

@FunkFortyNiner its from url, the image is in database. the image is being displayed fine, but the download button not working — Seep Sooo, Jan 09 '20 at 13:05
Ok. Now I see the problem. There's are spaces in this `$image[' image ']` < at the end. Those need to be removed `$image['image']`. Spaces "count". There are others before it too. — Funk Forty Niner, Jan 09 '20 at 13:08
@FunkFortyNiner i didnt understand, image doesnt have any problem, its displaying fine. the problem is with download button — Seep Sooo, Jan 09 '20 at 13:10
Well, enable error reporting, look at HTML source, use `var_dump()` and look at the developer console. I don't know what else to say, sorry. — Funk Forty Niner, Jan 09 '20 at 13:11
@SeepSooo what is your exact problem ? whats happening, and what is the expected output — Nijeesh Joshy, Jan 09 '20 at 13:12
@NijeeshJoshy the download button is not downloading the image — Seep Sooo, Jan 09 '20 at 13:18

score 1 · Accepted Answer · answered Jan 09 '20 at 13:21

When you place a button inside a form by default the click event on the button will make the form to submit. You have to prevent it from happening.

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

 document.getElementById('download').addEventListener('click', function(e){
      e.preventDefault();
      download_image()
 });

use this instead of using onclick=download_image() user this methods.

another solution How to prevent default event handling in an onclick method?

download button not downloading image in javascript

1 Answers1