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

您可以将画布克隆到隐藏缓冲区并拥有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

您可以使用“无”属性

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

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

2 个答案: