尝试将过滤器添加到画布图像

Question

我目前正在尝试在画布图像上传到页面后对其应用一个或多个过滤器，但如果他们想将过滤器更改为更模糊或另一个过滤器，它会删除图像，您将不得不重新- 上传图片。我计划在有几个不同过滤器的按钮的地方制作它，然后他们单击要应用于图像的过滤器。关于如何解决它的任何想法？

现在当您上传图片时，它会将其模糊为 5 像素，但如果您希望它更模糊或更模糊，例如它会删除该图片。 谢谢！提前！这是我的代码的实时链接： 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

在drawCanvas 中，您清除画布但从不重新绘制图像。只需向drawImage 添加电话即可。

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