HTML5提供Canvas像素编辑和CSS filter滤镜两种动态调图方式：Canvas通过JavaScript操作RGBA实现精确处理，CSS filter则用内置函数高效叠加效果，二者可混合使用但toDataURL不捕获CSS滤镜。
如果您希望在网页中动态调整图片的视觉效果，HTML5 提供了两种主流方式：通过 Canvas 进行像素级编辑，或利用 CSS filter 实现非破坏性滤镜叠加。以下是具体操作方法：
一、使用 Canvas 修改图片效果
Canvas 允许获取图像原始像素数据，通过 JavaScript 操作 RGBA 值，实现亮度、对比度、灰度、反色等自定义处理。该方法适用于需要精确控制每个像素的场景。
1、在 HTML 中创建一个 元素，并设置其宽高与目标图片一致。
2、使用 document.getElementById() 获取 canvas 上下文对象：const ctx = canvas.getContext('2d');
立即学习“前端免费学习笔记（深入）”；
3、创建 onload 事件，在图片加载完成后调用 ctx.drawImage(img, 0, 0); 将图片绘制到 canvas 上。
4、调用 ctx.getImageData(0, 0, canvas.width, canvas.height) 获取图像数据对象，其 data 属性为 Uint8ClampedArray 类型的一维数组，每 4 个连续值代表一个像素的 R、G、B、A。
5、遍历 data 数组，按需修改数值，例如实现灰度化：data[i] = data[i+1] = data[i+2] = (data[i] * 0.299 + data[i+1] * 0.587 + data[i+2] * 0.114)，其中 i 以 4 为步长递增。
6、调用 ctx.putImageData(imageData, 0, 0) 将修改后的数据写回 canvas。
二、使用 CSS filter 修改图片效果
CSS filter 属性提供一组内置图像处理函数，可直接作用于 元素，无需 JavaScript 编程，渲染性能高且支持硬件加速。
1、为图片元素添加 class 名，例如 class="filtered-img"。
2、在 CSS 中定义该 class 的 filter 属性，如 .filtered-img { filter: brightness(1.2) contrast(1.1) saturate(1.3); }。
3、可组合多个函数，顺序影响最终效果，例如 filter: blur(2px) grayscale(50%) sepia(30%);。
4、若需动态切换效果，可通过 JavaScript 修改元素的 style.filter 属性，例如 img.style.filter = 'hue-rotate(90deg) invert(1)';。
5、注意部分 filter 函数（如 drop-shadow()）会生成脱离原图边界的投影，务必确保父容器未设置 overflow: hidden，否则阴影可能被裁剪。
三、Canvas 与 CSS filter 混合使用
将 Canvas 绘制结果作为 CSS filter 的作用目标，可在保留像素级编辑能力的同时叠加快速滤镜，适合复杂图像处理流程。
1、完成 Canvas 像素编辑后，保持 canvas 元素在 DOM 中可见且未被 display: none 隐藏。
2、对 canvas 元素本身应用 CSS filter，例如 canvas { filter: contrast(1.4) brightness(0.95); }。
3、若需导出混合后图像，调用 canvas.toDataURL('image/png') 获取 base64 字符串，该字符串已包含 filter 渲染效果 —— 但注意：toDataURL 不捕获 CSS filter 效果，仅输出原始 canvas 像素。
4、如需保存滤镜叠加结果，须改用 drawImage() 将当前 canvas 内容绘制到另一个离屏 canvas，再对该离屏 canvas 执行像素操作模拟 filter，或使用 getComputedStyle() 提取 filter 值后在 JS 中复现计算逻辑。
