使用TOAST UI for HTML Canvas能否添加基于颜色/图片的自定义滤镜？

当然可以。TOAST UI Canvas 基于原生 HTML5 Canvas 封装，因此原生 Canvas 支持的滤镜能力都能直接复用，实现自定义颜色或图片滤镜。以下是具体实现方式：

一、自定义颜色滤镜 #

1. 使用原生 Canvas Filter 属性 #

直接通过上下文的 filter 属性快速应用预设或自定义颜色滤镜，比如灰度、色相旋转等：

const canvas = new tui.Canvas('#canvas', { width: 800, height: 600 });
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'your-image.jpg';
img.onload = () => {
  // 应用自定义色相旋转+饱和度增强滤镜
  ctx.filter = 'hue-rotate(90deg) saturate(150%)';
  ctx.drawImage(img, 0, 0);
};

2. 手动像素级处理 #

如果需要更精细的自定义颜色逻辑，可以直接操作图像像素数据：

function applyCustomColorFilter(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    // 自定义颜色转换：增强红色通道，降低蓝色通道
    data[i] = Math.min(255, data[i] * 1.3);     // 红色通道
    data[i + 2] = Math.max(0, data[i + 2] * 0.7); // 蓝色通道
  }
  return imageData;
}

// 使用示例
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.width, img.height);
  const filteredData = applyCustomColorFilter(imageData);
  ctx.putImageData(filteredData, 0, 0);
};

二、基于图片的自定义滤镜 #

通过叠加图片并设置混合模式，实现纹理、柔光等图片类滤镜效果：

const canvas = new tui.Canvas('#canvas', { width: 800, height: 600 });
const ctx = canvas.getContext('2d');

const baseImg = new Image();
const filterImg = new Image();

baseImg.src = 'base-image.jpg';
filterImg.src = 'filter-texture.png';

// 确保两张图片都加载完成
Promise.all([
  new Promise(resolve => baseImg.onload = resolve),
  new Promise(resolve => filterImg.onload = resolve)
]).then(() => {
  // 绘制基础图像
  ctx.drawImage(baseImg, 0, 0);
  // 设置混合模式为"柔光"，可根据需求更换（如multiply、screen等）
  ctx.globalCompositeOperation = 'soft-light';
  // 叠加滤镜图片，匹配基础图像尺寸
  ctx.drawImage(filterImg, 0, 0, baseImg.width, baseImg.height);
  // 恢复默认混合模式
  ctx.globalCompositeOperation = 'source-over';
});

总结来说，只要是原生 HTML5 Canvas 支持的滤镜操作，包括 CSS 滤镜、像素处理、混合模式叠加图片等，都能在 TOAST UI Canvas 中实现自定义滤镜需求。

内容的提问来源于stack exchange，提问作者Mike