mardi 18 mai 2021

Image download using JavaScript

I'm working on JavaScript code to upload, preview, and download image. currently I have done upload and preview code. after that, How to download it?


    <section class="upload" id="upload">
            <h3>UPLOAD</h3>
          
          <div class="container">
            <div class="row">
              
              <canvas id="c" class="p-3" >Here's the canvas.</canvas>
              <br>
              <input type="file" id="infile" accept = "image/*" onchange="handleFiles(this.files)">
              <p><img id="output" /></p>
              <button onclick="blurimg()" class="btnbl">Blur Image</button>
              <br>
             </div>
            </div>
      
    </section>

 //Canvas creating with image
    document.getElementById('infile').onchange = function(e) {
      var img = new Image();
      img.onload = draw;
      img.onerror = failed;
      img.src = URL.createObjectURL(this.files[0]);
    };
    function draw() {
      var canvas = document.getElementById('c');
      canvas.width = this.width;
      canvas.height = this.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0,0);
    }
    function failed() {
      console.error("The provided file couldn't be loaded as an Image media");
    }
    
    



Aucun commentaire:

Enregistrer un commentaire