如何使用香草javascript在HTML画布上拖放和预览图像文件？
我想制作一个在线过滤web应用程序。因此，我在如何使用香草javascript在HTML画布上拖放和预览图像文件？,javascript,html,canvas,drag-and-drop,Javascript,Html,Canvas,Drag And Drop,我想制作一个在线过滤web应用程序。因此，我在上制作了一些过滤效果和拖放上传（带预览），但我无法下载（使用下载按钮）当应用过滤器时，我不知道屏幕捕获API或。因此我想在上绘制图像，因为我知道如何从下载过滤后的图像，但如果我使用它或我不知道如何使用拖动效果，拖放功能似乎不再起作用（就像拖到上面会产生效果，拖到左边会消除效果）而且也不知道如何将图像放到上。我只是在下面给出我代码的一些部分。 [注意：我还添加了一个按钮来上传图像，正如您可以在下面的HTML中看到的那样，该功能的工作原理与拖放图像功能相
dropzone.ondragover=函数（）{
this.className=“放置区域可以覆盖”；
dropzone2.style.display=“无”；
返回false；
};
dropzone.ondragleave=函数（）{
this.className=“放置区域”；
dropzone2.style.display=“块”；
返回false；
};
dropzone.ondrop=函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
this.className=“放置区域”；
dropzone2.style.display=“无”；
dropzone2.style.border=“无”；
更新（e.dataTransfer.files[0]）；
};
var update=函数（文件）{
var reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=（）=>{
img.src=reader.result；
img.style.maxHeight=“480px”；
img.style.maxWidth=“640px”；
dropzone.style.backgroundColor=“透明”；
dropzone.appendChild（img）；
返回false；
};
}；
将图像拖动到此处
或
上传图片
document.querySelector（'input'）。addEventListener（'drop'，e=>{
e、 预防默认值（）；
const reader=new FileReader（）；
reader.readAsDataURL（e.dataTransfer.files[0]）；
reader.onload=（）=>{
常量图像=新图像（）；
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）'；
drawImage（image，0,0）；
}
}
});
document.querySelector（'input'）。addEventListener（'drop'，e=>{
e、 预防默认值（）；
const reader=new FileReader（）；
reader.readAsDataURL（e.dataTransfer.files[0]）；
reader.onload=（）=>{
常量图像=新图像（）；
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）'；
drawImage（image，0,0）；
}
}
});