Versuchen, einen Filter zu einem Leinwandbild hinzuzufügen

Question

Ich versuche gerade, einen Filter oder Filter auf ein Canvas-Bild anzuwenden, nachdem es auf die Seite hochgeladen wurde, aber wenn sie Filter zu mehr verschwommen oder zu einem anderen Filter es ändern möchten entfernt das Bild und Sie müssen das Bild erneut hochladen. Ich plane, es dort zu machen, wo es eine Schaltfläche für mehrere verschiedene Filter gibt, und dann klicken sie auf den Filter, den sie auf das Bild anwenden möchten. Irgendwelche Ideen, wie man es repariert?

Gerade jetzt, wenn Sie das Bild hochladen, wird es auf 5px verwischen, aber wenn Sie es weniger oder mehr verschwommen zum Beispiel wollen, wird es das Bild entfernen. Danke! Im Voraus! Heres ein Live Link von meinem Code: https://jsfiddle.net/mbyvvszy/

html:

<canvas id="canvas" width="1000" height="500" class="playable-canvas"></canvas> 


<div id="image_div"> 
    <h1> Choose an Image to Upload </h1> 
    <input type='file' name='img' id='uploadimage' /> 

</div> 


<div class="playable-buttons"> 
  <input id="edit" type="button" value="Edit" /> 
  <input id="reset" type="button" value="Reset" /> 
</div> 
<textarea id="code" class="playable-code"> 
ctx.filter = 'blur(5px)'; 
</textarea> 

Javascript:

var drawnImage; 

function drawImage(ev) { 
    console.log(ev); 
    var ctx = document.getElementById('canvas').getContext('2d'), 
    img = new Image(), 
    f = document.getElementById("uploadimage").files[0], 
    url = window.URL || window.webkitURL, 
    src = url.createObjectURL(f); 
    img.src = src; 
    img.onload = function() { 
    drawnImage = img; 
    ctx.drawImage(img, 0, 0); 
    url.revokeObjectURL(src); 
    } 
} 
document.getElementById("uploadimage").addEventListener("change", drawImage, false); 



var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var textarea = document.getElementById('code'); 
var reset = document.getElementById('reset'); 
var edit = document.getElementById('edit'); 
var code = textarea.value; 

function drawCanvas() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    eval(textarea.value); 
} 

reset.addEventListener('click', function() { 
    textarea.value = code; 
    drawCanvas(); 
}); 

edit.addEventListener('click', function() { 
    textarea.focus(); 
}) 

textarea.addEventListener('input', drawCanvas); 
window.addEventListener('load', drawCanvas); 

Answer 1

In drawCanvas, können Sie die Leinwand zu löschen, aber nie das Bild neu zeichnen. Fügen Sie einfach einen Anruf zu drawImage hinzu.

function drawCanvas() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    eval(textarea.value); 
    drawImage(); 
}