[英]Remove previous JS function when clicking next button
I am working on a website where users will be able to upload an image and choose one of 49 available duotone filters.我正在一个网站上工作,用户可以在该网站上上传图像并从 49 个可用的双色调滤镜中选择一个。
I have conquered the upload and display as well as adding the correct duotone filter based on the button clicked.我已经征服了上传和显示,并根据单击的按钮添加了正确的双色调过滤器。
HOWEVER, I would like to erase the previous duotone function when I click a new button and render a new filter.但是,当我单击新按钮并渲染新过滤器时,我想删除以前的双色调 function。
At the moment when I click a new button it just adds the duotone on top of the one that exists already.在我点击一个新按钮的那一刻,它只是在已经存在的那个上面添加了双色调。
I have tried using the "if true" and "else" conditions but they lead to ending errors even though all the opened parameters are closed off.我曾尝试使用“if true”和“else”条件,但即使所有打开的参数都已关闭,它们也会导致结束错误。
Here is the html and JavaScript code (I haven't included the CSS as this will be too long and am only including the first 3 duotone options):这是 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>
I'm honestly at a loss.老实说,我不知所措。 I can only think of conditions as being my options but they just mess up the entire code and then nothing works.
我只能将条件视为我的选择,但它们只会弄乱整个代码,然后什么都不起作用。 I'm clearly not doing it properly but there so many ways of implementing conditions but those I've tried don't seem to be working.
我显然没有正确地做到这一点,但是有很多实现条件的方法,但我尝试过的那些似乎并没有奏效。
This is an example of the logic I was trying to use: if (function() === false){ do this} Another one: http://jsfiddle.net/jrulle/99ja37mn/这是我尝试使用的逻辑示例: if (function() === false){ do this}另一个: http://jsfiddle.net/jrulle/99ja37mn/
The easiest solution might be to reset your canvas to the uploaded image at the start of each duotone function.最简单的解决方案可能是将 canvas 重置为每个双色调 function 开头的上传图像。 In the snippet below, I've defined the img variable at the top of the script so it can accessed globally by all the functions.
在下面的代码片段中,我在脚本顶部定义了img变量,以便所有函数都可以全局访问它。 Then at the start of each duotone function, I first check that an image has first been uploaded, then if true, I reset the canvas with the uploaded image.
然后在每个双色调 function 开始时,我首先检查是否已首先上传图像,如果为真,则使用上传的图像重置 canvas。 That way you're working with a clean canvas each time:
这样,您每次都在使用干净的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.