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

Javascript - apply filters to canvas and reset to original

本文关键字：原始 过滤器 应用于 Javascript      更新时间：2023-09-26

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

当用户选择筛选器

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

因此，例如，如果用户选择棕褐色和对比度滤镜，我会将这两个滤镜应用于画布，

但如果他取消选择棕褐色，我需要从画布中删除棕褐色滤镜（种类重置滤镜并仅应用对比度）...依此类推，以此类推，用于所有可用的过滤器。

我怎样才能做到这一点？

有没有一些简单的方法？

我目前尝试的非常糟糕：

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

您可以使用"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

您可以将画布克隆到隐藏缓冲区并拥有 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);
}
相关文章：