Javascript 单击“下一步”按钮时删除以前的JS函数

我在一个网站上工作，用户可以上传一张图片，并从49个可用的duotone过滤器中选择一个

我已经克服了上传和显示以及添加正确的duotone过滤器的基础上点击按钮

但是，当我单击一个新按钮并渲染一个新的过滤器时，我想删除以前的duotone函数

当我点击一个新按钮时，它只是在已经存在的按钮上添加了duotone

我尝试过使用“if true”和“else”条件，但它们会导致结束错误，即使所有打开的参数都已关闭

下面是html和JavaScript代码（我没有包括CSS，因为这太长了，我只包括前3个duotone选项）：

var fileUpload=document.getElementById（'fileUpload'）；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（“2d”）；
var reset=document.getElementById（'canvas'）
var resetCtx=canvas.getContext（'2d'）；
var dataURL=canvas.toDataURL（）；
log（dataURL）；
//数据：图片/png；base64，IVBORW0KGGOAAAANSUHEUGAAUAAAAFCAYAAACNBY
//Blaaaadeleqvqimwngobmaaabpaafei8araaaaelftksuqmcc”
var fullQuality=canvas.toDataURL（'image/jpeg/jpg'，1.0）；
//数据：image/jpeg/jpg；base64，/9j/4AAQSkZJRgABAQ…9OADAMBAIRAXEAPWD/AD/6AP/Z“
//上传图像
函数readImage（）{
if（this.files&&this.files[0]）{
var FR=new FileReader（）；
FR.onload=功能（e）{
var img=新图像（）；
img.src=e.target.result；
img.onload=函数（）{
ctx.drawImage（img，0，0，300，300）；
};
};
FR.readAsDataURL（this.files[0]）；
}
}
fileUpload.onchange=readImage；
//使用Duotone
//第一紫罗兰双酮
函数violetOne（）{
imageData=ctx.getImageData（0,03000）；
var像素=imageData.data；
对于（设i=0；i

从桌面上传图像，然后从“选择：

最简单的解决方案可能是在每个duotone函数开始时将画布重置为上载的图像。在下面的代码片段中，我在脚本顶部定义了img变量，以便所有函数都可以全局访问它。然后在每个duotone函数开始时，我首先检查图像是否具有第一个b即使已上载，如果为true，我将使用上载的图像重置画布。这样，每次都可以使用干净的画布：

var fileUpload=document.getElementById（'fileUpload'）；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（“2d”）；
var reset=document.getElementById（'canvas'）
var resetCtx=canvas.getContext（'2d'）；
var dataURL=canvas.toDataURL（）；
var-img；
//“数据：图像/png；Ivborw0kgoaaaansuhueugaaaaaaaaaaaafcayaaacnby基地64
//Blaaaadeleqvqimwngobmaaabpaafei8araaaaelftksuqmcc”
var fullQuality=canvas.toDataURL（'image/jpeg/jpg'，1.0）；
//数据：image/jpeg/jpg；base64，/9j/4aaqskzjrgaaq…9oadambairaxeapwd/AD/6AP/Z“
//上传图像
函数readImage（）{
if（this.files&&this.files[0]）{
var FR=new FileReader（）；
FR.onload=功能（e）{
img=新图像（）；
img.src=e.target.result；
img.onload=函数（）{