尝试将滤镜添加到画布图像

Question

我目前正在尝试将画布图像上传到页面后，将一个或多个滤镜应用于画布图像，但是如果他们想将滤镜更改为更加模糊或更改为另一个滤镜，则会删除该图像，因此您必须重新上传图片。 我打算在有几个不同滤镜的按钮的地方进行制作，然后他们单击要应用于图像的滤镜。 关于如何解决它的任何想法？

现在，当您上传图像时，它将使图像模糊至5px，但是例如，如果您希望图像减少或更多模糊，它将删除图像。 谢谢！ 提前！ 这是我的代码的实时链接： 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();
}