實現圖片濾鏡主要有三種方案。1.css Filter 屬性：簡單快捷，支持 blur、grayscale、brightness 等預定義效果，適合簡單需求，但無法實現復雜自定義效果；2.canvas 方案：通過像素級操作實現自定義濾鏡，如灰度化處理，但性能較差，尤其在處理大圖時；3.webgl 方案：利用 gpu 高性能處理像素數據，適合復雜和實時濾鏡效果，但實現復雜，需掌握 glsl 和圖形渲染知識。選擇方案應根據需求權衡簡易性、性能與復雜度，若僅需基礎效果優先使用 css filter，若需定制則選 canvas 或高性能場景選用 webgl。
實現圖片濾鏡，簡單來說就是利用CSS的filter屬性，或者更高級的WebGL技術，對圖片的像素進行處理，從而達到改變圖片視覺效果的目的。
解決方案
CSS filter 屬性提供了一系列預定義的濾鏡效果，比如模糊、灰度、亮度調整等。對于更復雜的效果，就需要用到 Canvas 或者 WebGL 來進行像素級別的操作。
-
CSS Filter 方案：簡單快捷
立即學習“前端免費學習筆記（深入）”；
這是最簡單的方式，直接在CSS中應用filter屬性。
@@##@@ @@##@@ @@##@@
filter 屬性支持很多函數，比如：
- blur()：模糊
- brightness()：亮度
- contrast()：對比度
- grayscale()：灰度
- hue-rotate()：色相旋轉
- invert()：反相
- opacity()：透明度
- saturate()：飽和度
- sepia()：褐色
可以組合使用多個 filter：
@@##@@
這種方式的優點是簡單快捷，缺點是效果有限，只能使用預定義的濾鏡。
-
Canvas 方案：像素級別的控制
Canvas 提供了像素級別的操作能力，可以實現更復雜的濾鏡效果。
<canvas id="myCanvas" width="500" height="300"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const image = new Image(); image.src = 'image.jpg'; image.onload = function() { ctx.drawImage(image, 0, 0, canvas.width, canvas.height); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // Uint8ClampedArray: [r, g, b, a, r, g, b, a, ...] // 應用濾鏡 (例如，灰度) for (let i = 0; i < data.length; i += 4) { const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putImageData(imageData, 0, 0); }; </script>這段代碼首先將圖片繪制到 Canvas 上，然后獲取圖片的像素數據，對每個像素進行處理（這里是灰度化），最后將處理后的像素數據放回 Canvas。
Canvas 方案的優點是可以實現自定義的濾鏡效果，缺點是性能相對較差，特別是處理大圖片時。
-
WebGL 方案：高性能的像素處理
WebGL 是一種利用 GPU 進行圖形渲染的技術，非常適合處理大量的像素數據。
WebGL 的實現比較復雜，需要編寫著色器程序（GLSL），這里給出一個簡單的概念性例子：
- 頂點著色器 (Vertex Shader)：負責處理頂點的位置。
- 片元著色器 (Fragment Shader)：負責處理每個像素的顏色。
// 片元著色器 (Fragment Shader) - 灰度化 precision mediump float; varying vec2 v_texCoord; uniform sampler2D u_image; void main() { vec4 color = texture2D(u_image, v_texCoord); float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)); gl_FragColor = vec4(gray, gray, gray, color.a); }
WebGL 的優點是性能高，適合處理復雜的濾鏡效果和實時視頻處理。缺點是學習曲線陡峭，實現起來比較復雜。
如何選擇合適的圖片濾鏡方案？
選擇哪種方案取決于你的需求。如果只是簡單的濾鏡效果，CSS Filter 完全夠用。如果需要自定義的、復雜的濾鏡效果，Canvas 或者 WebGL 是更好的選擇。考慮到性能，WebGL 通常是最佳選擇，但實現起來也最復雜。
CSS Filter 的性能瓶頸在哪里？
CSS Filter 的性能瓶頸主要在于瀏覽器的渲染引擎。每個 filter 都會觸發一次重繪，如果組合多個 filter，性能會進一步下降。此外，一些復雜的 filter，比如 blur()，會消耗大量的計算資源。
Canvas 如何優化圖片濾鏡的性能？
Canvas 優化圖片濾鏡性能的方法有很多：
WebGL 實現圖片濾鏡的難點是什么？
WebGL 實現圖片濾鏡的難點主要在于：
- 學習 WebGL API：WebGL API 比較底層，需要理解圖形渲染的原理。
- 編寫著色器程序：需要學習 GLSL 語言，編寫頂點著色器和片元著色器。
- 調試：WebGL 的調試比較困難，需要使用專門的工具。
