Making image Blur Using javaScript

  blur, canvas, html, javascript, web

I’m working on JavaScript code to upload, preview, make it blur and download the result image. currently I have done upload and preview code. after that, How to make it blur and 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 class="btnbl">Blur Image</button>
          <br>
       </div>
     </div>
 
</section>
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");
        }

Source: Ask Javascript Questions

LEAVE A COMMENT