Modern web applications often require real-time image processing capabilities. With Next.js for performance and glfx.js for GPU-accelerated image effects, we can create a fast and responsive image editor with various filters and transformations.

Demo | Source Code

In this guide, we’ll cover:

Setting up a Next.js project
Integrating glfx.js for real-time image effects
Implementing file uploads
Adding filters and transformations
Optimizing performance

Let’s get started!

Step 1: Set Up a Next.js Project

First, create a new Next.js project:

npx create-next-app@latest next-image-editor

Install glfx.js for image processing:

npm install glfx

Initialize ShadCN UI

To set up ShadCN UI for a modern interface, install it with:

npx shadcn-ui@latest init

Then, install the necessary components:

npx shadcn-ui@latest add button select slider card label tabs

Step 2: Add glfx Hook and Types

Create lib/use-glfx.ts to handle loading glfx.js dynamically:

1 'use client';
2 
3 import { useState, useEffect } from 'react';
4 
5 export function useGlfx() {
6 	const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
7 
8 	// Add a function to check if WebGL is supported
9 	const isWebGLSupported = () => {
10 		try {
11 			const canvas = document.createElement('canvas');
12 			return !!(
13 				window.WebGLRenderingContext &&
14 				(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
15 			);
16 		} catch (e) {
17 			return false;
18 		}
19 	};
20 
21 	useEffect(() => {
22 		// First check if WebGL is supported
23 		if (!isWebGLSupported()) {
24 			console.error('WebGL is not supported in this browser');
25 			setStatus('error');
26 			return;
27 		}
28 
29 		// Check if glfx is already loaded
30 		if (window.fx) {
31 			setStatus('success');
32 			return;
33 		}
34 
35 		// Function to load glfx.js directly
36 		const loadGlfx = () => {
37 			const script = document.createElement('script');
38 			script.src = 'https://evanw.github.io/glfx.js/glfx.js';
39 			script.async = true;
40 
41 			script.onload = () => {
42 				// Check if window.fx is available after script loads
43 				setTimeout(() => {
44 					if (window.fx) {
45 						setStatus('success');
46 					} else {
47 						console.error('glfx.js loaded but fx object not available');
48 						setStatus('error');
49 					}
50 				}, 300);
51 			};
52 
53 			script.onerror = () => {
54 				console.error('Failed to load glfx.js');
55 				setStatus('error');
56 			};
57 
58 			document.body.appendChild(script);
59 			return script;
60 		};
61 
62 		// Try to load the script
63 		const scriptElement = loadGlfx();
64 
65 		// Set a timeout for the load attempt
66 		const timeout = setTimeout(() => {
67 			if (status === 'loading') {
68 				console.error('glfx.js load timed out');
69 				setStatus('error');
70 			}
71 		}, 5000);
72 
73 		return () => {
74 			clearTimeout(timeout);
75 			if (scriptElement && scriptElement.parentNode) {
76 				scriptElement.parentNode.removeChild(scriptElement);
77 			}
78 		};
79 	}, [status]);
80 
81 	return status;
82 }

Create types/glfx.d.ts for type safety:

1 declare global {
2   interface Window {
3     fx: {
4       canvas: () => any;
5     };
6   }
7 }
8 
9 export {};

Create html2canvas.d.ts to work with the html2canvas library:

1 declare module 'html2canvas' {
2 	interface Html2CanvasOptions {
3 		allowTaint?: boolean;
4 		backgroundColor?: string | null;
5 		canvas?: HTMLCanvasElement;
6 		foreignObjectRendering?: boolean;
7 		imageTimeout?: number;
8 		ignoreElements?: (element: Element) => boolean;
9 		logging?: boolean;
10 		onclone?: (document: Document) => void;
11 		proxy?: string;
12 		removeContainer?: boolean;
13 		scale?: number;
14 		useCORS?: boolean;
15 		width?: number;
16 		height?: number;
17 		x?: number;
18 		y?: number;
19 		scrollX?: number;
20 		scrollY?: number;
21 		windowWidth?: number;
22 		windowHeight?: number;
23 	}
24 
25 	function html2canvas(
26 		element: HTMLElement,
27 		options?: Html2CanvasOptions,
28 	): Promise<HTMLCanvasElement>;
29 
30 	export default html2canvas;
31 }

Step 3: Create the Image Editor Component

Now, create a component to handle image uploads and apply filters.

Create a new file: components/image-editor.tsx and add the following code:

tsx

1 'use client';
2 
3 import { useState, useRef, useEffect } from 'react';
4 import {
5 	Select,
6 	SelectContent,
7 	SelectItem,
8 	SelectTrigger,
9 	SelectValue,
10 } from '@/components/ui/select';
11 import { Slider } from '@/components/ui/slider';
12 import { Label } from '@/components/ui/label';
13 import { Button } from '@/components/ui/button';
14 import { Card } from '@/components/ui/card';
15 import { useGlfx } from '@/lib/use-glfx';
16 
17 // Simplified filter types
18 type FilterType =
19 	| 'brightness'
20 	| 'contrast'
21 	| 'saturation'
22 	| 'sepia'
23 	| 'vignette'
24 	| 'swirl'
25 	| 'bulgePinch';
26 
27 const filterConfigs = {
28 	brightness: {
29 		name: 'Brightness',
30 		params: { amount: { min: -1, max: 1, default: 0, step: 0.01 } },
31 	},
32 	contrast: {
33 		name: 'Contrast',
34 		params: { amount: { min: -1, max: 1, default: 0, step: 0.01 } },
35 	},
36 	saturation: {
37 		name: 'Saturation',
38 		params: { amount: { min: -1, max: 1, default: 0, step: 0.01 } },
39 	},
40 	sepia: {
41 		name: 'Sepia',
42 		params: { amount: { min: 0, max: 1, default: 0.5, step: 0.01 } },
43 	},
44 	vignette: {
45 		name: 'Vignette',
46 		params: {
47 			size: { min: 0, max: 1, default: 0.5, step: 0.01 },
48 			amount: { min: 0, max: 1, default: 0.5, step: 0.01 },
49 		},
50 	},
51 	swirl: {
52 		name: 'Swirl',
53 		params: {
54 			angle: { min: -25, max: 25, default: 3, step: 0.1 },
55 		},
56 	},
57 	bulgePinch: {
58 		name: 'Bulge / Pinch',
59 		params: {
60 			strength: { min: -1, max: 1, default: 0.5, step: 0.01 },
61 		},
62 	},
63 };
64 
65 export default function ImageEditor({ imageUrl }) {
66 	const [selectedFilter, setSelectedFilter] = useState<FilterType>('brightness');
67 	const [filterParams, setFilterParams] = useState<any>({});
68 	const [texture, setTexture] = useState<any>(null);
69 	const [canvas, setCanvas] = useState<any>(null);
70 	const [originalImage, setOriginalImage] = useState<HTMLImageElement | null>(null);
71 
72 	const canvasRef = useRef<HTMLCanvasElement>(null);
73 	const containerRef = useRef<HTMLDivElement>(null);
74 	const editorRef = useRef<HTMLDivElement>(null);
75 	const glfxStatus = useGlfx();
76 
77 	// Initialize filter params when filter changes
78 	useEffect(() => {
79 		const initialParams = {};
80 		Object.entries(filterConfigs[selectedFilter].params).forEach(([key, param]) => {
81 			initialParams[key] = param.default;
82 		});
83 		setFilterParams(initialParams);
84 	}, [selectedFilter]);
85 
86 	// Initialize canvas when image loads
87 	useEffect(() => {
88 		if (!imageUrl || glfxStatus !== 'success') return;
89 
90 		const img = new Image();
91 		img.crossOrigin = 'anonymous';
92 
93 		img.onload = () => {
94 			setOriginalImage(img);
95 
96 			if (!window.fx) return;
97 
98 			try {
99 				const glfxCanvas = window.fx.canvas();
100 				const glfxTexture = glfxCanvas.texture(img);
101 
102 				const maxWidth = containerRef.current?.clientWidth || 800;
103 				const scale = img.width > maxWidth ? maxWidth / img.width : 1;
104 				glfxCanvas.width = Math.floor(img.width * scale);
105 				glfxCanvas.height = Math.floor(img.height * scale);
106 
107 				setTexture(glfxTexture);
108 				setCanvas(glfxCanvas);
109 
110 				if (canvasRef.current?.parentNode) {
111 					canvasRef.current.parentNode.replaceChild(glfxCanvas, canvasRef.current);
112 					canvasRef.current = glfxCanvas;
113 				}
114 
115 				glfxCanvas.draw(glfxTexture).update();
116 			} catch (e) {
117 				console.error('Error initializing glfx:', e);
118 			}
119 		};
120 
121 		img.src = imageUrl;
122 	}, [imageUrl, glfxStatus]);
123 
124 	// Apply filter when params change
125 	useEffect(() => {
126 		if (!canvas || !texture) return;
127 
128 		try {
129 			canvas.draw(texture);
130 
131 			switch (selectedFilter) {
132 				case 'brightness':
133 					canvas.brightnessContrast(filterParams.amount, 0);
134 					break;
135 				case 'contrast':
136 					canvas.brightnessContrast(0, filterParams.amount);
137 					break;
138 				case 'saturation':
139 					canvas.hueSaturation(0, filterParams.amount);
140 					break;
141 				case 'sepia':
142 					canvas.sepia(filterParams.amount);
143 					break;
144 				case 'vignette':
145 					canvas.vignette(filterParams.size, filterParams.amount);
146 					break;
147 				case 'swirl':
148 					canvas.swirl(canvas.width / 2, canvas.height / 2, canvas.width / 3, filterParams.angle);
149 					break;
150 				case 'bulgePinch':
151 					canvas.bulgePinch(
152 						canvas.width / 2,
153 						canvas.height / 2,
154 						canvas.width / 3,
155 						filterParams.strength,
156 					);
157 					break;
158 			}
159 
160 			canvas.update();
161 		} catch (e) {
162 			console.error('Error applying filter:', e);
163 		}
164 	}, [filterParams, selectedFilter, canvas, texture]);
165 
166 	// Screenshot-based save method
167 	const handleSaveImage = async () => {
168 		if (!editorRef.current) return;
169 
170 		try {
171 			// Use html2canvas to capture what's visible on screen
172 			const screenshotCanvas = await html2canvas(
173 				editorRef.current.querySelector('.canvas-container'),
174 				{
175 					useCORS: true,
176 					backgroundColor: null,
177 					scale: 2, // Higher quality
178 				},
179 			);
180 
181 			// Create download link
182 			const link = document.createElement('a');
183 			link.download = 'edited-image.png';
184 			link.href = screenshotCanvas.toDataURL('image/png');
185 			document.body.appendChild(link);
186 			link.click();
187 			document.body.removeChild(link);
188 		} catch (e) {
189 			console.error('Error capturing screenshot:', e);
190 			alert('Failed to save. Try the Standard Editor instead.');
191 		}
192 	};
193 
194 	return (
195 		<div
196 			className='flex flex-col md:flex-row gap-4'
197 			ref={editorRef}>
198 			<div
199 				className='flex-1'
200 				ref={containerRef}>
201 				<div className='bg-black rounded-lg overflow-hidden canvas-container'>
202 					<canvas
203 						ref={canvasRef}
204 						className='max-w-full h-auto'
205 					/>
206 				</div>
207 				<div className='flex justify-between mt-2'>
208 					<div className='text-xs text-gray-500'>WebGL Editor</div>
209 					<Button
210 						variant='outline'
211 						size='sm'
212 						onClick={handleSaveImage}>
213 						Save Image
214 					</Button>
215 				</div>
216 			</div>
217 
218 			<Card className='w-full md:w-64 bg-gray-100'>
219 				<div className='p-4'>
220 					<div className='mb-4'>
221 						<Label htmlFor='filter-select'>Filter:</Label>
222 						<Select
223 							value={selectedFilter}
224 							onValueChange={(v) => setSelectedFilter(v as FilterType)}>
225 							<SelectTrigger id='filter-select'>
226 								<SelectValue placeholder='Select a filter' />
227 							</SelectTrigger>
228 							<SelectContent>
229 								{Object.entries(filterConfigs).map(([key, config]) => (
230 									<SelectItem
231 										key={key}
232 										value={key}>
233 										{config.name}
234 									</SelectItem>
235 								))}
236 							</SelectContent>
237 						</Select>
238 					</div>
239 
240 					<div className='space-y-4'>
241 						{Object.entries(filterConfigs[selectedFilter].params).map(([param, config]) => (
242 							<div
243 								key={param}
244 								className='space-y-2'>
245 								<div className='flex justify-between'>
246 									<Label htmlFor={`param-${param}`}>{param}:</Label>
247 									<span className='text-sm'>{filterParams[param]?.toFixed(2)}</span>
248 								</div>
249 								<Slider
250 									id={`param-${param}`}
251 									min={config.min}
252 									max={config.max}
253 									step={config.step}
254 									value={[filterParams[param] || config.default]}
255 									onValueChange={(value) => setFilterParams({ ...filterParams, [param]: value[0] })}
256 								/>
257 							</div>
258 						))}
259 					</div>
260 
261 					<Button
262 						variant='outline'
263 						className='w-full mt-4'
264 						onClick={() => {
265 							const initialParams = {};
266 							Object.entries(filterConfigs[selectedFilter].params).forEach(([key, param]) => {
267 								initialParams[key] = param.default;
268 							});
269 							setFilterParams(initialParams);
270 						}}>
271 						Reset
272 					</Button>
273 				</div>
274 			</Card>
275 		</div>
276 	);
277 }

Key Features

Uses Next.js and ShadCN UI for UI components (Select, Slider, Card, etc.).
Loads glfx.js dynamically using the useGlfx hook.
Applies real-time WebGL filters like brightness, contrast, sepia, vignette, etc.
Allows users to adjust filter parameters via sliders.
Supports saving edited images as PNGs using html2canvas.

Breakdown of Important Parts

1. Filter Configuration The filterConfigs object defines available filters and their parameters (range, default values).

2. State Management

selectedFilter stores the active filter.
filterParams holds parameter values for the selected filter.
texture and canvas handle WebGL rendering.
originalImage stores the uploaded image.

3. Image Initialization (useEffect)

When an image is uploaded, it:

Loads into an <img> element.
Creates a WebGL canvas using window.fx.canvas().
Converts the image into a texture.
Scales the image to fit the editor.
Draws the texture to the canvas.

4. Applying Filters (useEffect)

When the user selects a filter or adjusts parameters, canvas.draw(texture) applies the filter dynamically.
Example: canvas.brightnessContrast(amount, 0); adjusts brightness.

5. Save Feature

Uses html2canvas to take a screenshot of the WebGL editor and save it as an image.

Step 4: Implement a Fallback Editor

Not all browsers support WebGL. If glfx.js fails to load, we can provide a fallback editor using the standard Canvas API.

Create components/fallback-editor.tsx and add:

tsx

1 'use client';
2 
3 import { useRef, useEffect, useState } from 'react';
4 import { Card } from '@/components/ui/card';
5 import { Label } from '@/components/ui/label';
6 import { Slider } from '@/components/ui/slider';
7 import { Button } from '@/components/ui/button';
8 import {
9 	Select,
10 	SelectContent,
11 	SelectItem,
12 	SelectTrigger,
13 	SelectValue,
14 } from '@/components/ui/select';
15 
16 export default function FallbackEditor({ imageUrl }) {
17 	const canvasRef = useRef<HTMLCanvasElement>(null);
18 	const [brightness, setBrightness] = useState(100);
19 	const [contrast, setContrast] = useState(100);
20 	const [saturation, setSaturation] = useState(100);
21 	const [selectedFilter, setSelectedFilter] = useState('basic');
22 	const [originalImage, setOriginalImage] = useState<HTMLImageElement | null>(null);
23 
24 	// Load image and initialize canvas
25 	useEffect(() => {
26 		if (!imageUrl || !canvasRef.current) return;
27 
28 		const canvas = canvasRef.current;
29 		const ctx = canvas.getContext('2d');
30 		if (!ctx) return;
31 
32 		const img = new Image();
33 		img.crossOrigin = 'anonymous';
34 
35 		img.onload = () => {
36 			setOriginalImage(img);
37 			canvas.width = img.width;
38 			canvas.height = img.height;
39 			applyFilters(ctx, img);
40 		};
41 
42 		img.src = imageUrl;
43 	}, [imageUrl]);
44 
45 	// Apply filters when parameters change
46 	useEffect(() => {
47 		if (!canvasRef.current || !originalImage) return;
48 
49 		const canvas = canvasRef.current;
50 		const ctx = canvas.getContext('2d');
51 		if (!ctx) return;
52 
53 		applyFilters(ctx, originalImage);
54 	}, [brightness, contrast, saturation, selectedFilter, originalImage]);
55 
56 	// Apply filters to canvas
57 	const applyFilters = (ctx, img) => {
58 		if (!ctx || !img) return;
59 
60 		// Clear canvas
61 		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
62 
63 		// Build filter string based on selected filter
64 		let filterString = '';
65 
66 		switch (selectedFilter) {
67 			case 'basic':
68 				filterString = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
69 				break;
70 			case 'sepia':
71 				filterString = `sepia(${brightness / 100}) contrast(${contrast}%)`;
72 				break;
73 			case 'grayscale':
74 				filterString = `grayscale(${brightness / 100}) contrast(${contrast}%)`;
75 				break;
76 			case 'invert':
77 				filterString = `invert(${brightness / 100}) contrast(${contrast}%)`;
78 				break;
79 			default:
80 				filterString = `brightness(${brightness}%) contrast(${contrast}%)`;
81 		}
82 
83 		// Apply CSS filters
84 		ctx.filter = filterString;
85 		ctx.drawImage(img, 0, 0);
86 		ctx.filter = 'none';
87 	};
88 
89 	// Save the edited image
90 	const handleSaveImage = () => {
91 		if (!canvasRef.current) return;
92 
93 		try {
94 			const link = document.createElement('a');
95 			link.download = 'edited-image.png';
96 			link.href = canvasRef.current.toDataURL('image/png');
97 			document.body.appendChild(link);
98 			link.click();
99 			document.body.removeChild(link);
100 		} catch (e) {
101 			console.error('Error saving image:', e);
102 			alert('Failed to save the image. Please try again.');
103 		}
104 	};
105 
106 	return (
107 		<div className='flex flex-col md:flex-row gap-4'>
108 			<div className='flex-1'>
109 				<div className='bg-black rounded-lg overflow-hidden'>
110 					<canvas
111 						ref={canvasRef}
112 						className='max-w-full h-auto'
113 					/>
114 				</div>
115 				<div className='flex justify-between mt-2'>
116 					<div className='text-xs text-gray-500'>Standard Canvas Editor</div>
117 					<Button
118 						variant='outline'
119 						size='sm'
120 						onClick={handleSaveImage}>
121 						Save Image
122 					</Button>
123 				</div>
124 			</div>
125 
126 			<Card className='w-full md:w-64 bg-gray-100'>
127 				<div className='p-4'>
128 					<div className='mb-4'>
129 						<Label htmlFor='filter-select'>Filter Type:</Label>
130 						<Select
131 							value={selectedFilter}
132 							onValueChange={setSelectedFilter}>
133 							<SelectTrigger id='filter-select'>
134 								<SelectValue placeholder='Select a filter' />
135 							</SelectTrigger>
136 							<SelectContent>
137 								<SelectItem value='basic'>Basic Adjustments</SelectItem>
138 								<SelectItem value='sepia'>Sepia</SelectItem>
139 								<SelectItem value='grayscale'>Grayscale</SelectItem>
140 								<SelectItem value='invert'>Invert</SelectItem>
141 							</SelectContent>
142 						</Select>
143 					</div>
144 
145 					<div className='space-y-4'>
146 						<div className='space-y-2'>
147 							<div className='flex justify-between'>
148 								<Label htmlFor='brightness'>
149 									{selectedFilter !== 'basic' ? 'Effect Strength:' : 'Brightness:'}
150 								</Label>
151 								<span className='text-sm'>{brightness}%</span>
152 							</div>
153 							<Slider
154 								id='brightness'
155 								min={0}
156 								max={200}
157 								step={1}
158 								value={[brightness]}
159 								onValueChange={(value) => setBrightness(value[0])}
160 							/>
161 						</div>
162 
163 						<div className='space-y-2'>
164 							<div className='flex justify-between'>
165 								<Label htmlFor='contrast'>Contrast:</Label>
166 								<span className='text-sm'>{contrast}%</span>
167 							</div>
168 							<Slider
169 								id='contrast'
170 								min={0}
171 								max={200}
172 								step={1}
173 								value={[contrast]}
174 								onValueChange={(value) => setContrast(value[0])}
175 							/>
176 						</div>
177 
178 						{selectedFilter === 'basic' && (
179 							<div className='space-y-2'>
180 								<div className='flex justify-between'>
181 									<Label htmlFor='saturation'>Saturation:</Label>
182 									<span className='text-sm'>{saturation}%</span>
183 								</div>
184 								<Slider
185 									id='saturation'
186 									min={0}
187 									max={200}
188 									step={1}
189 									value={[saturation]}
190 									onValueChange={(value) => setSaturation(value[0])}
191 								/>
192 							</div>
193 						)}
194 					</div>
195 
196 					<Button
197 						variant='outline'
198 						className='w-full mt-4'
199 						onClick={() => {
200 							setBrightness(100);
201 							setContrast(100);
202 							setSaturation(100);
203 						}}>
204 						Reset
205 					</Button>
206 				</div>
207 			</Card>
208 		</div>
209 	);
210 }

FallbackEditor is a client-side React component that takes an imageUrl prop and lets users apply various filter effects to that image. It uses the native Canvas API rather than a specialized image editing library.

Technical Details

Uses React's useRef to access the Canvas DOM element
useEffect hooks handle image loading and filter reapplication when parameters change
TypeScript is being used (notice the HTMLCanvasElement and HTMLImageElement type annotations)
The component is marked with 'use client' directive, indicating it's meant to run on the client side in Next.js

This is a relatively simple implementation of an image editor that provides basic functionality without requiring external image processing libraries.

Step 5: Add a Script Loader

Create an components/script-loader.tsx file and add:

tsx

1 'use client';
2 
3 import { useEffect, useState } from 'react';
4 import { useGlfx } from '@/lib/use-glfx';
5 
6 export default function ScriptLoader({ children, fallback }) {
7 	const glfxStatus = useGlfx();
8 	const [html2canvasLoaded, setHtml2canvasLoaded] = useState(false);
9 
10 	useEffect(() => {
11 		// Check if html2canvas is already loaded
12 		if (typeof window !== 'undefined' && window.html2canvas) {
13 			setHtml2canvasLoaded(true);
14 			return;
15 		}
16 
17 		// Create script element to load html2canvas
18 		const script = document.createElement('script');
19 		script.src = '/html2canvas.min.js';
20 		script.async = true;
21 		script.onload = () => setHtml2canvasLoaded(true);
22 		document.body.appendChild(script);
23 
24 		return () => {
25 			if (script.parentNode) {
26 				script.parentNode.removeChild(script);
27 			}
28 		};
29 	}, []);
30 
31 	if (glfxStatus === 'error') {
32 		return fallback ? (
33 			fallback
34 		) : (
35 			<div className='p-4 text-center'>
36 				<p className='text-red-500'>
37 					Failed to load WebGL editor. Please try the Standard Editor instead.
38 				</p>
39 			</div>
40 		);
41 	}
42 
43 	if (glfxStatus === 'loading' || !html2canvasLoaded) {
44 		return (
45 			<div className='p-4 text-center'>
46 				<p>Loading WebGL editor...</p>
47 			</div>
48 		);
49 	}
50 
51 	return <>{children}</>;
52 }

Your Next.js image editor depends on external JavaScript libraries like:

glfx.js (for WebGL image effects)
html2canvas (for converting elements into images)

However, these libraries:

✅ Are not built into Next.js and must be loaded dynamically.
✅ Use browser-specific features (like WebGL and the DOM), which won’t work on the server.
✅ May fail to load in certain environments, requiring a fallback solution.

How ScriptLoader Solves These Problems

1. Prevents Crashes in Non-WebGL Browsers

If WebGL is unsupported, useGlfx() sets glfxStatus to "error".
The fallback UI automatically replaces the WebGL editor with the standard canvas-based editor.

2. Dynamically Loads html2canvas When Needed

Instead of bundling html2canvas with your app, it is loaded only when required.
This reduces initial page load time and improves performance.

3. Ensures Scripts Are Fully Loaded Before Rendering

Prevents "html2canvas is not defined" errors by waiting until the script is ready.
Shows a loading message instead of a broken UI while scripts are loading.

What Happens Without `ScriptLoader`?

❌ The app might crash in browsers without WebGL.
❌ html2canvas could be undefined if used before loading.
❌ Users would see blank screens instead of a graceful fallback.

Step 6: Add a Debug Canvas

For debugging purposes, add a DebugCanvas component to visualize image loading and rendering issues.

Create components/debug-canvas.tsx and add:

tsx

1 'use client';
2 
3 import { useRef, useEffect } from 'react';
4 import { Button } from '@/components/ui/button';
5 
6 interface DebugCanvasProps {
7 	imageUrl: string;
8 }
9 
10 export default function DebugCanvas({ imageUrl }: DebugCanvasProps) {
11 	const canvasRef = useRef<HTMLCanvasElement>(null);
12 
13 	useEffect(() => {
14 		if (!imageUrl || !canvasRef.current) return;
15 
16 		const canvas = canvasRef.current;
17 		const ctx = canvas.getContext('2d');
18 
19 		if (!ctx) {
20 			console.error('Could not get 2D context');
21 			return;
22 		}
23 
24 		const img = new Image();
25 		img.crossOrigin = 'anonymous';
26 
27 		img.onload = () => {
28 			// Set canvas dimensions
29 			canvas.width = img.width;
30 			canvas.height = img.height;
31 
32 			// Draw the image
33 			ctx.drawImage(img, 0, 0);
34 
35 			console.log('Image loaded in debug canvas', {
36 				width: img.width,
37 				height: img.height,
38 				naturalWidth: img.naturalWidth,
39 				naturalHeight: img.naturalHeight,
40 			});
41 		};
42 
43 		img.onerror = (e) => {
44 			console.error('Error loading image in debug canvas:', e);
45 		};
46 
47 		img.src = imageUrl;
48 	}, [imageUrl]);
49 
50 	const handleSaveImage = () => {
51 		if (!canvasRef.current) return;
52 
53 		try {
54 			const link = document.createElement('a');
55 			link.download = 'debug-image.png';
56 			link.href = canvasRef.current.toDataURL('image/png');
57 			document.body.appendChild(link);
58 			link.click();
59 			document.body.removeChild(link);
60 		} catch (e) {
61 			console.error('Error saving debug image:', e);
62 		}
63 	};
64 
65 	return (
66 		<div className='mt-4 p-4 border border-gray-300 rounded-lg'>
67 			<h3 className='text-lg font-medium mb-2'>Debug Canvas</h3>
68 			<div className='bg-black rounded-lg overflow-hidden'>
69 				<canvas
70 					ref={canvasRef}
71 					className='max-w-full h-auto'
72 				/>
73 			</div>
74 			<div className='mt-2'>
75 				<Button
76 					variant='outline'
77 					size='sm'
78 					onClick={handleSaveImage}>
79 					Save Debug Image
80 				</Button>
81 			</div>
82 		</div>
83 	);
84 }

This DebugCanvas component allows you to display an image on a canvas and provides the option to save the canvas as an image file. Here’s a breakdown of how it works:

1. Component Setup:

Props: The component accepts an imageUrl prop, which is the URL of the image that you want to load and display on the canvas.
Ref: It uses the useRef hook to create a reference (canvasRef) to the canvas element, which allows access to the canvas DOM node for drawing.

2. Effect Hook:

The useEffect hook is used to load and display the image on the canvas when the imageUrl changes.

3. Image Save Functionality:

The handleSaveImage function allows you to save the content of the canvas as a PNG image.
It creates a temporary <a> link with a download attribute and sets the href to the data URL of the canvas (which is a base64-encoded PNG of the canvas content).
The link is programmatically clicked, triggering the download, and then the link is removed from the document.

This component is useful for debugging image loading and manipulation in the browser. It helps you see the exact content of an image on the canvas and provides a way to save that content.

Step 7: Adding Layout to the Article:

Below is a refined breakdown of your code and how it fits into your article. This layout acts as a global structure around your app, so every page or component rendered as children will inherit the layout style:

tsx

1 import type React from 'react';
2 import './globals.css';
3 import { Inter } from 'next/font/google';
4 import Script from 'next/script';
5 
6 const inter = Inter({ subsets: ['latin'] });
7 
8 export const metadata = {
9 	title: 'Image Editor with glfx.js',
10 	description: 'A React-based image editor using glfx.js',
11 };
12 
13 export default function RootLayout({ children }: { children: React.ReactNode }) {
14 	return (
15 		<html lang='en'>
16 			<head>
17 				<Script
18 					src='https://evanw.github.io/glfx.js/glfx.js'
19 					strategy='afterInteractive'
20 				/>
21 			</head>
22 			<body className={inter.className}>{children}</body>
23 		</html>
24 	);
25 }

Script Loading:

The Script component is used to include the glfx.js library, which is critical for GPU-accelerated image editing. The strategy="afterInteractive" ensures the script loads only after the page becomes interactive, which improves performance.

This RootLayout would be used as the wrapper for your image editor app, ensuring consistent layout and styling across all pages in your app. The content of your article (or any other page) would be rendered as the children prop, inheriting the layout's properties.

Step 8: Add the Editor to the Page

Now, modify page.tsx to include the image editor. To integrate everything into page.tsx and ensure the image editor works correctly with dynamic components like the ImageEditor, FallbackEditor, and ScriptLoader, here’s a step-by-step explanation of the code:

tsx

1 "use client"
2 import { useState, useRef, useEffect } from "react"
3 import dynamic from "next/dynamic"
4 import { Button } from "@/components/ui/button"
5 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
6 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
7 import FallbackEditor from "@/components/fallback-editor"
8 import Link from 'next/link';
9 
10 // Dynamically import components that use browser APIs
11 const ImageEditor = dynamic(() => import("@/components/image-editor"), {
12   ssr: false,
13   loading: () => <div className="p-4 text-center">Loading WebGL editor...</div>,
14 })
15 
16 const ScriptLoader = dynamic(() => import("@/components/script-loader"), { ssr: false })
17 
18 export default function Home() {
19   const [imageUrl, setImageUrl] = useState<string | null>(null)
20   const fileInputRef = useRef<HTMLInputElement>(null)
21 
22   // Handle file selection
23   const handleFileChange = (e) => {
24     const file = e.target.files?.[0]
25     if (file) {
26       if (imageUrl) URL.revokeObjectURL(imageUrl)
27       setImageUrl(URL.createObjectURL(file))
28     }
29   }
30 
31   // Clean up object URLs when component unmounts
32   useEffect(() => {
33     return () => {
34       if (imageUrl) URL.revokeObjectURL(imageUrl)
35     }
36   }, [imageUrl])
37 
38   return (
39     <main className="flex min-h-screen flex-col items-center p-4 md:p-8 bg-gray-900 text-white">
40       <div className="w-full max-w-5xl">
41         <div className="text-center mb-8">
42           <a href="/"><h1 className="text-4xl font-bold mb-2">Image Editor</h1></a>
43           <p className="text-lg text-gray-300">Edit your images with filters and effects</p>
44         </div>
45 
46         <Card className="bg-gray-200 text-gray-900">
47           <CardHeader>
48            <CardTitle className="text-center">Image Editor</CardTitle>
49           </CardHeader>
50           <CardContent>
51             {!imageUrl ? (
52               <div className="flex flex-col items-center justify-center p-12 border-2 border-dashed border-gray-400 rounded-lg">
53                 <p className="mb-4 text-gray-600">Upload an image to get started</p>
54                 <Button onClick={() => fileInputRef.current?.click()}>Select Image</Button>
55                 <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" className="hidden" />
56               </div>
57             ) : (
58               <div className="space-y-4">
59                 <Tabs defaultValue="standard" className="w-full">
60                   <TabsList className="grid w-full grid-cols-2">
61                     <TabsTrigger value="standard">Standard Editor</TabsTrigger>
62                     <TabsTrigger value="webgl">WebGL Editor</TabsTrigger>
63                   </TabsList>
64                   <TabsContent value="standard">
65                     <div className="relative">
66                       <FallbackEditor imageUrl={imageUrl} />
67                       <div className="absolute bottom-2 right-2">
68                         <Button variant="secondary" size="sm" onClick={() => setImageUrl(null)}>
69                           Change Image
70                         </Button>
71                       </div>
72                     </div>
73                   </TabsContent>
74                   <TabsContent value="webgl">
75                     <ScriptLoader fallback={<FallbackEditor imageUrl={imageUrl} />}>
76                       <div className="relative">
77                         <ImageEditor imageUrl={imageUrl} />
78                         <div className="absolute bottom-2 right-2">
79                           <Button variant="secondary" size="sm" onClick={() => setImageUrl(null)}>
80                             Change Image
81                           </Button>
82                         </div>
83                       </div>
84                     </ScriptLoader>
85                   </TabsContent>
86                 </Tabs>
87 
88                 <div className="p-4 bg-yellow-100 rounded-lg text-yellow-800">
89                   <p className="text-sm">
90                     <strong>Tip:</strong> If you have trouble saving images from the WebGL editor, use the Standard
91                     Editor which has better compatibility across browsers.
92                   </p>
93                 </div>
94               </div>
95             )}
96           </CardContent>
97         </Card>
98       </div>
99     </main>
100   )
101 }

Key Features:

1. File Selection:

The handleFileChange function manages image selection. Once a file is chosen, it creates an object URL and stores it in imageUrl. The URL is revoked after the component unmounts or the image changes, ensuring that no unused URLs are lingering in memory.

2. Dynamic Imports:

The ImageEditor and ScriptLoader components are dynamically imported with ssr: false, ensuring they are only loaded on the client-side. This is critical for components that depend on browser-specific APIs (like WebGL).
If ImageEditor is not loaded yet, the ScriptLoader will show a fallback editor (in this case, FallbackEditor).

3. Tabs:

The app allows switching between two image editors—Standard Editor and WebGL Editor—via tabs. This is implemented with the Tabs component, where each tab displays a different editor.
If WebGL isn't supported or fails to load, the fallback editor will be displayed.

4. Image Upload:

If no image is selected (!imageUrl), a file input is shown that allows users to upload an image.

How It All Connects:

1. Page Flow:

The page initially asks the user to upload an image.
Once the image is uploaded, the user can toggle between two types of editors (standard and WebGL) using tabs.
The ScriptLoader dynamically loads the WebGL editor, which is only available after the script (glfx.js) is loaded.
If WebGL fails, a fallback editor is shown.

2. User Experience:

The UI ensures a smooth experience where the user can easily upload, edit, and switch between different editors.

This setup efficiently manages dynamic loading, browser-specific behavior, and image manipulation in a React app built with Next.js.

Conclusion

The Image Editor with glfx.js provides a powerful, browser-based solution for image manipulation, combining the simplicity of standard image editing with the advanced capabilities of WebGL. By leveraging the power of glfx.js for GPU-accelerated filters and effects, users can create stunning edits in real-time. With a smooth and user-friendly interface built using Next.js and TailwindCSS, this application ensures a seamless experience for both novice and advanced users.

Whether you're working on basic image enhancements or experimenting with creative WebGL-powered filters, this editor offers flexibility and performance. Additionally, the fallback editor ensures compatibility across a wide range of devices, ensuring your image editing experience remains robust and reliable.

Try it out today, and explore the endless possibilities for image manipulation directly in your browser!

nextjs

image-editor

glfx

tailwindcss

shadcn

Creating a Next.js Image Editor with glfx.js