Javascript - 将过滤器应用于画布并重置为原始

Question

我在页面上有一个画布，我在其中绘制了一个图像，现在我想应用亮度、对比度、棕褐色等滤镜...

当用户选择过滤器时会出现问题，因为用户需要能够选择和取消选择过滤器。

因此，例如，如果用户选择棕褐色和对比度过滤器，我会将两个过滤器都应用到画布上，但如果他取消选择棕褐色，我需要从画布上删除棕褐色过滤器（类型重置过滤器并仅应用对比度)... 等等所有可用的过滤器。

我怎样才能做到这一点？

有什么简单的方法吗？

目前我尝试的非常糟糕：

function applyFilter(filter) {
    
 var canvas = document.getElementById('canvas')
  , context = canvas.getContext('2d'); 
      
  if (filter === 'sepia') {
    
   context.sepia(1);
  }
    
  if (filter === 'contrast') {
    
   context.contrast(1.3);
  }
    
}
function removeFilter(filter) {
    
 var canvas = document.getElementById('canvas')
  , context = canvas.getContext('2d'); 
      
  if (filter === 'sepia') {
    
   context.sepia(0);
  }
    
  if (filter === 'contrast') {
    
   context.contrast(1);
  }
    
}

Answer 1

你可以使用'none'属性

node : 没有应用过滤器。初始值。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

ctx.filter = 'contrast(1.4)';
ctx.drawImage(image, 10, 10, 180, 120);
ctx.filter = 'none';

https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/filter

Answer 2

您可以将画布克隆到隐藏缓冲区并拥有 2 个版本的画布，然后在删除过滤器时使用缓冲区重置？

http://jsfiddle.net/grzuo9he/

var canvas = document.getElementById('canvas'),
    buffer = document.getElementById('buffer'),
    context = canvas.getContext("2d"),
    bufferContext = buffer.getContext("2d"),
    activeFilters = [];

context.moveTo(20, 20);
context.lineTo(100, 20);
context.fillStyle = "#999";
context.beginPath();
context.arc(100,100,75,0,2*Math.PI);
context.fill();

//Make buffer a clone of canvas
bufferContext.drawImage(canvas, 0, 0);

function applyFilter(filter) {
  if(filter){
    activeFilters.push(filter);
  }
  if (activeFilters.indexOf('sepia') > -1) {
   context.sepia(1);
  }
  if (activeFilters.indexOf('contrast') > -1) {
   context.contrast(1.3);
  }
}

function removeFilter(filter) {
  //Reset the canvas
  context.drawImage(buffer, 0, 0);

  //Remove this filter froma active filters
  activeFilters.splice(activeFilters.indexOf(filter), 1);

  applyFilter(false);
}