时间戳

首页 > 解决方案 > 应用过滤器后如何下载图像文件？

javascript - 应用过滤器后如何下载图像文件？

问题描述

我是初学者。我只是在做一个练习项目。在这里，我使用这些代码将图像上传拖放到 a 上<div>并在其上应用过滤器（到目前为止它工作正常）。我没有使用画布。我知道如何从画布下载的过程，但不知道如何<div>从appendChild. 我不知道 jquery 或其他类型的东西。我只想在应用过滤器后下载我的图片。我在下面给出 HTML 和 JS。如果您知道它，请帮助我提供代码和一些解释，我将不胜感激。我没有添加 CSS 代码，因为这个问题与它无关。

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>

标签： javascripthtmlimagedownload

解决方案

推荐阅读