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 <div> 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 <div> after uploading on it as appendChild. 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.
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',()=>{
const file2 = document.getElementById("mainup").files[0];
const reader2 = new FileReader();
if (file2) {
fileName = file2.name;
reader2.readAsDataURL(file2);
}
reader2.onload = ()=>{
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 = ()=>{
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;
};<body>
<div class="bgimg"></div>
<div class="box"><a href="file:///G:/HTML%20CSS%20JAVA/Project%20Filter/filter.html">
<h1>Filtaro</h1>
</a></div>
<div class="intro">
<h2>Welcome to Filtaro !</h2> <br>
<p>Filter your images with different filters.No quality decrease ! Have Fun !</p>
</div>
<div class="drop__zone" id="drop__zone"></div>
<div class="dropzone" id="drop__zone">
<span class="dropzone__span">
Drag a Image Here <br>or<br>
</span><br>
<input type="file" id="mainup" multiple="false" accept="image/*" class="fileinput">
<label for="mainup" class="btn__label" id="lab1">Upload a Picture</label
</div>
<div class="btn">
<input type="button" id="maindown">
<label for="maindown" class="btn__label" id="lab2">Download</label></div>
<div class="filter">
<label for="blur" id="blur__label" class="filter__label">Blur</label><br>
<input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="blur" data-scale="px" class="filter__slider" id="blur"><br>
<label for="brightness" id="brightness__label" class="filter__label">Brightness</label><br>
<input type="range" min="0" max="400" value="100" step="1" onchange="filter()" data-filter="brightness" data-scale="%" class="filter__slider" id="brightness"><br>
<label for="contrast" id="contrast__label" class="filter__label">Contrast</label><br>
<input type="range" min="0" max="400" value="100" step="1" onchange="filter()" data-filter="contrast" data-scale="%" class="filter__slider" id="contrast"><br>
<label for="gray" id="gray__label" class="filter__label">Grayscale</label><br>
<input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="grayscale" data-scale="%" class="filter__slider" id="gray"><br>
<label for="Hue" id="Hue__label" class="filter__label">Hue</label><br>
<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"><br>
<label for="inv" id="blur__label" class="filter__label">Invert</label><br>
<input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="invert" data-scale="%" class="filter__slider" id="inv"><br>
<label for="opacity" id="opacity__label" class="filter__label">Opacity</label><br>
<input type="range" min="0" max="400" value="100" step="1" onchange="filter()" data-filter="opacity" data-scale="%" class="filter__slider" id="opacity"><br>
<label for="saturate" id="saturate__label" class="filter__label">Saturate</label><br>
<input type="range" min="1" max="200" value="1" step="1" onchange="filter()" data-filter="saturate" data-scale="" class="filter__slider" id="saturate"><br>
<label for="sepia" id="sepia__label" class="filter__label">Sepia</label><br>
<input type="range" min="0" max="200" value="0" step="1" onchange="filter()" data-filter="sepia" data-scale="%" class="filter__slider" id="sepia">
</div>
<script src="filter.js"></script>
</body>