How to drag - drop and preview an image file on HTML canvas with vanilla javascript?

问题

I want to make an online filter web app. So I made some filter effects and drag and drop upload (with preview) on a <div> but I can't download it(using the download button) when the filter is applied as I don't know about Screen capture API or <svg>.So I want to draw the image on <canvas> as I know how to download the filtered image from the<canvas> but it appears that the functionality of drag and drop doesn't work anymore if I use it or I don't know how to use the drag effects (like on drag over it gives an effect as well as on drag leave removes the effect) and also don't know how to drop the image on <canvas>. I am just giving some parts of my code down below. [note: I also added a button to upload an image as you can see down below in HTML that function works same as drag and drop an image function]

     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;     
    };
   
};

  <div class="drop__zone" id="drop__zone"></div>


    <div class="dropzone" id="drop__zone">
       <a  id="download_link" download="edited.jpg"  href=""></a>
        <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>

回答1:

Here is an exceedingly basic example of a way to accept a dragged-and-dropped image, draw it on a canvas with a filter, and allow one to right-click to save the image with the filter applied:

<!DOCTYPE html>
<body>
  <input type='file' />
  <canvas></canvas>
</body>
<script>
  document.querySelector('input').addEventListener('drop', e => {
    e.preventDefault();
    const reader = new FileReader();
    reader.readAsDataURL(e.dataTransfer.files[0]);
    reader.onload = () => {
      const image = new Image();
      image.src = reader.result;
      image.onload = () => {
        const canvas = document.querySelector('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext('2d');
        context.filter = 'blur(10px)';
        context.drawImage(image, 0, 0);
      }
    }
  });
</script>
</html>

来源：https://stackoverflow.com/questions/62370669/how-to-drag-drop-and-preview-an-image-file-on-html-canvas-with-vanilla-javascr

标签

javascript

html

canvas

drag-and-drop