Component Deep Dive #58: Image Filter Adjustment — Perfect Blend of CSS Filter and Canvas Pixel Manipulation

#javascript #css #canvas

Component Deep Dive #58: Image Filter Adjustment

Have you ever wondered how hard it is to implement Instagram-like filters on the web?

The answer: if you just need preview, one line of CSS suffices. If you need export, Canvas has you covered.

Approach 1: CSS Filter (For Preview)

CSS provides 10 built-in filter functions that can be combined: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia().

Approach 2: Canvas Pixel Manipulation (For Export)

CSS filters only work on screen — they can't export modified images. To export, use Canvas getImageData for pixel-by-pixel manipulation:

Grayscale: Weighted formula R*0.299 + G*0.587 + B*0.114 (human eye is more sensitive to green)
Sepia: Matrix multiplication on RGB channels
Convolution: 3x3 kernel matrices for sharpening [0,-1,0,-1,5,-1,0,-1,0], edge detection [-1,-1,-1,-1,8,-1,-1,-1,-1]

Best Practice: CSS Preview + Canvas Export

Use CSS filter for zero-latency real-time preview (GPU-accelerated), then switch to Canvas for final export. Modern browsers support ctx.filter on Canvas 2D context, so you can apply the same CSS filter string directly when drawing to canvas.

Key Pitfalls

getImageData triggers cross-origin security errors — images must be same-origin or have crossOrigin="anonymous" with proper CORS headers
ctx.filter is not supported in Safari 14 and below — fall back to pixel manipulation
Canvas toBlob is asynchronous — don't expect immediate results in synchronous code
CSS filter: drop-shadow() follows the image's alpha shape, unlike box-shadow