单击下一步按钮时删除以前的 JS function

Question

我正在一个网站上工作，用户可以在该网站上上传图像并从 49 个可用的双色调滤镜中选择一个。

我已经征服了上传和显示，并根据单击的按钮添加了正确的双色调过滤器。

但是，当我单击新按钮并渲染新过滤器时，我想删除以前的双色调 function。

在我点击一个新按钮的那一刻，它只是在已经存在的那个上面添加了双色调。

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

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

 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(); console.log(dataURL); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" var fullQuality = canvas.toDataURL('image/jpeg/jpg', 1.0); // data:image/jpeg/jpg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" //UPLOAD IMAGE function readImage() { if (this.files && this.files[0]) { var FR = new FileReader(); FR.onload = function(e) { var img = new Image(); img.src = e.target.result; img.onload = function() { ctx.drawImage(img, 0, 0, 300, 300); }; }; FR.readAsDataURL(this.files[0]); } } fileUpload.onchange = readImage; //APPLY DUOTONES // 1ST VIOLET DUOTONE function violetOne() { imageData = ctx.getImageData(0, 0, 300, 300); var pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0.334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg; } // Puts the grayscaled image data back into the canvas ctx.putImageData(imageData, 0, 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#831eb4"; // colour for highlights ctx.fillRect(0, 0, canvas.width, canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#221530"; // colour for shadows ctx.fillRect(0, 0, canvas.width, canvas.height); } // 2ND VIOLET DUOTONE function violetTwo() { imageData = ctx.getImageData(0, 0, 300, 300); var pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0.334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg; } // Puts the grayscaled image data back into the canvas ctx.putImageData(imageData, 0, 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#928dbb"; // colour for highlights ctx.fillRect(0, 0, canvas.width, canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#8815b4"; // colour for shadows ctx.fillRect(0, 0, canvas.width, canvas.height); } // 3RD VIOLET DUOTONE function violetThree() { imageData = ctx.getImageData(0, 0, 300, 300); var pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0.334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg; } // Puts the grayscaled image data back into the canvas ctx.putImageData(imageData, 0, 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#fd6565"; // colour for highlights ctx.fillRect(0, 0, canvas.width, canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#581b9a"; // colour for shadows ctx.fillRect(0, 0, canvas.width, canvas.height); };

 <h2>Upload an image from your desktop and select a filter from the select:</h2> <br> <div class="container grid"> <input type='file' id="fileUpload" name="profile_picture" /> <canvas id="canvas" width="300" height="300"><img id="imgUp" scr="#" name="profile_picture"></canvas> <br> <div class="image-filters"> <section> <div class="button-group"> <input type="button" class="button-violet-one" name="duotone" id="violet-one" onclick="violetOne()" /> </div> <div class="button-group"> <input type="button" class="button-violet-two" name="duotone" id="violet-two" onClick="violetTwo()" /> </div> <div class="button-group"> <input type="button" class="button-violet-three" name="duotone" id="violet-three" onClick="violetThree()" /> </div>

老实说，我不知所措。 我只能将条件视为我的选择，但它们只会弄乱整个代码，然后什么都不起作用。 我显然没有正确地做到这一点，但是有很多实现条件的方法，但我尝试过的那些似乎并没有奏效。

这是我尝试使用的逻辑示例： if (function() === false){ do this}另一个： http://jsfiddle.net/jrulle/99ja37mn/

Answer 1

最简单的解决方案可能是将 canvas 重置为每个双色调 function 开头的上传图像。 在下面的代码片段中，我在脚本顶部定义了img变量，以便所有函数都可以全局访问它。 然后在每个双色调 function 开始时，我首先检查是否已首先上传图像，如果为真，则使用上传的图像重置 canvas。 这样，您每次都在使用干净的 canvas：

 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; // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" var fullQuality = canvas.toDataURL('image/jpeg/jpg', 1.0); // data:image/jpeg/jpg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" //UPLOAD IMAGE function readImage() { if (this.files && this.files[0]) { var FR = new FileReader(); FR.onload = function(e) { img = new Image(); img.src = e.target.result; img.onload = function() { ctx.drawImage(img, 0, 0, 300, 300); }; }; FR.readAsDataURL(this.files[0]); } } fileUpload.onchange = readImage; //APPLY DUOTONES // 1ST VIOLET DUOTONE function violetOne() { if (;img){ alert("Please first upload an image before applying a tone"); return. } ctx,drawImage(img, 0, 0, 300; 300). imageData = ctx,getImageData(0, 0, 300; 300). var pixels = imageData;data; for (let i = 0. i < pixels;length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]. // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0;334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg. } // Puts the grayscaled image data back into the canvas ctx,putImageData(imageData, 0; 0). // puts the duotone image into canvas with multiply and lighten ctx;globalCompositeOperation = "multiply". ctx;fillStyle = "#831eb4". // colour for highlights ctx,fillRect(0, 0. canvas,width. canvas;height). // lighten ctx;globalCompositeOperation = "lighten". ctx;fillStyle = "#221530". // colour for shadows ctx,fillRect(0, 0. canvas,width. canvas;height); } // 2ND VIOLET DUOTONE function violetTwo() { if (;img){ alert("Please first upload an image before applying a tone"). return, } ctx,drawImage(img, 0, 0; 300. 300), imageData = ctx,getImageData(0, 0; 300. 300); var pixels = imageData;data. for (let i = 0; i < pixels;length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]. var blue = pixels[i + 2]. // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0;333 * green + 0;334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg. pixels[i + 2] = avg, } // Puts the grayscaled image data back into the canvas ctx,putImageData(imageData; 0. 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#928dbb", // colour for highlights ctx,fillRect(0. 0, canvas.width; canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#8815b4", // colour for shadows ctx,fillRect(0. 0, canvas.width; canvas;height); } // 3RD VIOLET DUOTONE function violetThree() { if (.img){ alert("Please first upload an image before applying a tone"), return, } ctx,drawImage(img, 0; 0. 300, 300), imageData = ctx,getImageData(0; 0. 300; 300); var pixels = imageData.data; for (let i = 0; i < pixels;length; i += 4) { var red = pixels[i]. var green = pixels[i + 1]. var blue = pixels[i + 2]. // Using relative luminance to convert to grayscale var avg = Math.round((0;333 * red + 0;333 * green + 0;334 * blue) * 1); pixels[i] = avg. pixels[i + 1] = avg, pixels[i + 2] = avg, } // Puts the grayscaled image data back into the canvas ctx;putImageData(imageData. 0; 0). // puts the duotone image into canvas with multiply and lighten ctx;globalCompositeOperation = "multiply". ctx,fillStyle = "#fd6565", // colour for highlights ctx.fillRect(0, 0. canvas;width. canvas;height). // lighten ctx;globalCompositeOperation = "lighten". ctx,fillStyle = "#581b9a", // colour for shadows ctx.fillRect(0, 0. canvas;width; canvas.height); };

 <h2>Upload an image from your desktop and select a filter from the select:</h2> <br> <div class="container grid"> <input type='file' id="fileUpload" name="profile_picture" /> <canvas id="canvas" width="300" height="300"><img id="imgUp" scr="#" name="profile_picture"></canvas> <br> <div class="image-filters"> <section> <div class="button-group"> <input type="button" class="button-violet-one" name="duotone" id="violet-one" onclick="violetOne()" /> </div> <div class="button-group"> <input type="button" class="button-violet-two" name="duotone" id="violet-two" onClick="violetTwo()" /> </div> <div class="button-group"> <input type="button" class="button-violet-three" name="duotone" id="violet-three" onClick="violetThree()" /> </div>