如何使用香草javascript在HTML canvas上拖放和预览图像文件？ [英] How to drag - drop and preview an image file on HTML canvas with vanilla javascript?
问题描述
我想制作一个在线过滤器网络应用程序。因此，我做了一些滤镜效果，并在< div> 上拖放了上传文件（带有预览），但是当滤镜无法下载时（使用下载按钮）因为我不知道Screen Capture API或< svg> 而被应用，所以我想在< canvas> / code>，因为我知道如何从< canvas> 下载过滤后的图像，但是如果出现以下情况，则拖放功能不再起作用我使用它，或者我不知道如何使用拖动效果（例如在其上方拖动时会产生效果，而在拖动离开时会移除该效果），而且也不知道如何将图像拖放到< canvas> 。我只是在下面给出部分代码。
[注意：我还添加了一个按钮来上传图像，如您在下面的HTML中所见，该功能的作用与拖放图像功能相同]
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>
推荐答案
这是一个非常基本的示例，用于接受拖放图像并绘制在带有滤镜的画布上，并允许右键单击以保存应用了滤镜的图像：
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>
这篇关于如何使用香草javascript在HTML canvas上拖放和预览图像文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
