嘗試將濾鏡添加到畫布圖像

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();
}