如何使用香草 javascript 在 HTML canvas 上拖放和预览图像文件？

Question

我想做一个在线过滤器 web 应用程序。 所以我做了一些滤镜效果并在<div>上拖放上传（带预览），但是当我不知道屏幕截图 API 或<svg> 。所以我想在<canvas>上绘制图像，因为我知道如何从<canvas>下载过滤后的图像，但是如果我使用它或不使用它，拖放功能似乎不再起作用'不知道如何使用拖拽效果（比如拖过它会产生效果以及拖拽离开会去除效果），也不知道如何将图像放在<canvas>上。 我只是在下面给出我的部分代码。 [注意：我还添加了一个按钮来上传图像，您可以在下面的 HTML 中看到 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>

Answer 1

这是一个接受拖放图像的非常基本的示例，将其绘制在带有过滤器的 canvas 上，并允许右键单击以保存应用了过滤器的图像：

<!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>

如何使用香草 javascript 在 HTML canvas 上拖放和预览图像文件？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-14 12:37:59

如何使用香草 javascript 在 HTML canvas 上拖放和预览图像文件？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-14 12:37:59

解决方案1
2 已采纳 2020-06-14 12:37:59