Javascript

Question

我在页面上有一个 canvas，我在里面画了一张图片，现在我想应用亮度、对比度、棕褐色等滤镜...

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

因此，例如，如果用户选择棕褐色和对比度滤镜，我会将这两个滤镜都应用于 canvas，但如果他不使用 select 棕褐色，我需要从中删除棕褐色滤镜canvas（种类重置过滤器并仅应用对比度）...等等所有可用的过滤器。

我怎样才能做到这一点？

有什么简单的方法吗？

目前我尝试的非常糟糕：

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

您可以将 canvas 克隆到一个隐藏的缓冲区并拥有 canvas 的 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);
}

Answer 2

你可以使用 'none' 属性

节点：未应用过滤器。初始值。

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

Javascript - 对 canvas 应用过滤器并重置为原始

Javascript - apply filters to canvas and reset to original

html

canvas

filter