title: How to download an Image file after applying filter on it?
body: <p>I am a beginner. I am just making a practice project. Here I used these codes for drag and drop an image upload on a <code>&lt;div&gt;</code> and apply filters on it (it works fine till now). I didn't use a canvas. I know the process of how to download from the canvas but don't know how to download from a <code>&lt;div&gt;</code> after uploading on it as <code>appendChild</code>. I don't know jquery or other kinds of stuff. I just want to download my picture after applying a filter on it. I am giving HTML and JS down below. If you know it please help me with code and a little bit of explanation, I will be grateful. I am not adding CSS code as this question doesn't relate to it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const dropzone = document.querySelector(".drop__zone");
  const fileinput = document.getElementById("mainup");
  const dropzone2 = document.querySelector(".dropzone");
  const img = new Image();
  const downloadBtn = document.getElementById("maindown");
  
  const filtercontrols = document.querySelectorAll('.filter__slider');
  let fileName = "";
  
  fileinput.addEventListener('change',()=&gt;{
                             
                            
    
   const file2 = document.getElementById("mainup").files[0];
   
    const reader2 = new FileReader();
  
   
    if (file2) {
     
     fileName = file2.name;
      
      reader2.readAsDataURL(file2);
    }
  
    
      reader2.onload = ()=&gt;{
          
          img.src = reader2.result;
          img.style.maxHeight = "480px";
          img.style.maxWidth = "640px";
          dropzone.style.backgroundColor = "transparent";
        dropzone2.style.display = "none";
          dropzone.style.border = "none";
          
         dropzone.appendChild(img);
     return false;     
      };
     
   });
  
  
  
  
      
      
  
  
       dropzone.ondragover = function (){
      
          this.className = "drop__zone can__over";
           dropzone2.style.display = "none";
           
          return false;
      };
  
  dropzone.ondragleave = function(){
   
      this.className = "drop__zone";
      dropzone2.style.display = "block";
      
      return false;
  };
  
  dropzone.ondrop = function (e){
       
      e.preventDefault();
      e.stopPropagation();
      this.className = "drop__zone";
      dropzone2.style.display = "none";
       dropzone2.style.border = "none";
      
      update(e.dataTransfer.files[0]);
  };
  
  var update = function(file){
      var reader = new FileReader();
      reader.readAsDataURL(file);
      
      reader.onload = ()=&gt;{
         
          img.src = reader.result;
          img.style.maxHeight = "480px";
          img.style.maxWidth = "640px";
          dropzone.style.backgroundColor = "transparent";
        
          
         dropzone.appendChild(img);
     return false;     
      };
     
  };
  
  
  function filter(){
      var computedfilters = "";
      
      
      filtercontrols.forEach(function(item){
          computedfilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') ';
          
      });
      
      
  
      img.style.filter = computedfilters;
       
       
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
      &lt;div class="bgimg"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;a href="file:///G:/HTML%20CSS%20JAVA/Project%20Filter/filter.html"&gt;
              &lt;h1&gt;Filtaro&lt;/h1&gt;
          &lt;/a&gt;&lt;/div&gt;
  
  
  
  
      &lt;div class="intro"&gt;
          &lt;h2&gt;Welcome to Filtaro !&lt;/h2&gt; &lt;br&gt;
          &lt;p&gt;Filter your images with different filters.No quality decrease ! Have Fun !&lt;/p&gt;
      &lt;/div&gt;
  
  
  
      &lt;div class="drop__zone" id="drop__zone"&gt;&lt;/div&gt;
  
  
      &lt;div class="dropzone" id="drop__zone"&gt;
          &lt;span class="dropzone__span"&gt;
              Drag a Image Here &lt;br&gt;or&lt;br&gt;
          &lt;/span&gt;&lt;br&gt;
          &lt;input type="file" id="mainup" multiple="false" accept="image/*" class="fileinput"&gt;
          &lt;label for="mainup" class="btn__label" id="lab1"&gt;Upload a Picture&lt;/label
      &lt;/div&gt;
      &lt;div class="btn"&gt;
          &lt;input type="button" id="maindown"&gt;
          &lt;label for="maindown" class="btn__label" id="lab2"&gt;Download&lt;/label&gt;&lt;/div&gt;
  
  
  
  
  
      &lt;div class="filter"&gt;
          &lt;label for="blur" id="blur__label" class="filter__label"&gt;Blur&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="blur" data-scale="px" class="filter__slider" id="blur"&gt;&lt;br&gt;
  
          &lt;label for="brightness" id="brightness__label" class="filter__label"&gt;Brightness&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="400" value="100" step="1" onchange="filter()" data-filter="brightness" data-scale="%" class="filter__slider" id="brightness"&gt;&lt;br&gt;
  
          &lt;label for="contrast" id="contrast__label" class="filter__label"&gt;Contrast&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="400" value="100" step="1" onchange="filter()" data-filter="contrast" data-scale="%" class="filter__slider" id="contrast"&gt;&lt;br&gt;
  
          &lt;label for="gray" id="gray__label" class="filter__label"&gt;Grayscale&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="grayscale" data-scale="%" class="filter__slider" id="gray"&gt;&lt;br&gt;
  
          &lt;label for="Hue" id="Hue__label" class="filter__label"&gt;Hue&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="360" value="0" step="1" onchange="filter()" data-filter="hue-rotate" data-scale="deg" class="filter__slider" id="Hue"&gt;&lt;br&gt;
  
          &lt;label for="inv" id="blur__label" class="filter__label"&gt;Invert&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="invert" data-scale="%" class="filter__slider" id="inv"&gt;&lt;br&gt;
  
          &lt;label for="opacity" id="opacity__label" class="filter__label"&gt;Opacity&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="400" value="100" step="1" onchange="filter()" data-filter="opacity" data-scale="%" class="filter__slider" id="opacity"&gt;&lt;br&gt;
  
          &lt;label for="saturate" id="saturate__label" class="filter__label"&gt;Saturate&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="1" max="200" value="1" step="1" onchange="filter()" data-filter="saturate" data-scale="" class="filter__slider" id="saturate"&gt;&lt;br&gt;
  
          &lt;label for="sepia" id="sepia__label" class="filter__label"&gt;Sepia&lt;/label&gt;&lt;br&gt;
          &lt;input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="sepia" data-scale="%" class="filter__slider" id="sepia"&gt;
  
  
  
      &lt;/div&gt;
  
  
  
  
      &lt;script src="filter.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>