diff --git a/src/components/SliderControl.tsx b/src/components/SliderControl.tsx
index f4db47e..1adb5ba 100644
--- a/src/components/SliderControl.tsx
+++ b/src/components/SliderControl.tsx
@@ -8,6 +8,7 @@ interface SliderControlProps {
max: number;
step?: number;
formatValue?: (value: number) => string;
+ className?: string;
}
export function SliderControl({
@@ -17,15 +18,16 @@ export function SliderControl({
min,
max,
step = 1,
- formatValue = (v) => v.toString()
+ formatValue = (v) => v.toString(),
+ className,
}: SliderControlProps) {
return (
-
+
-
@@ -37,7 +39,7 @@ export function SliderControl({
max={max}
step={step}
>
-
+
({
- backgrounds,
- svg,
- noiseIntensity,
- }), [backgrounds, svg, noiseIntensity]);
-
// Keyboard shortcuts
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
@@ -51,7 +43,7 @@ export function App() {
regenerate();
} else if (e.key === "e" || e.key === "E") {
e.preventDefault();
- setExportModalOpen(true);
+ exportGradientAsPNG();
}
};
@@ -81,17 +73,10 @@ export function App() {
noiseIntensity={noiseIntensity}
onNoiseIntensityChange={setNoiseIntensity}
onRegenerate={regenerate}
- onExport={() => setExportModalOpen(true)}
+ onExport={() => exportGradientAsPNG()}
/>
-
- {/* Export modal */}
-
setExportModalOpen(false)}
- exportData={exportData}
- />
);
}
diff --git a/src/utils/exportGradient.ts b/src/utils/exportGradient.ts
index f96cb12..4cb6714 100644
--- a/src/utils/exportGradient.ts
+++ b/src/utils/exportGradient.ts
@@ -1,86 +1,20 @@
-import html2canvas from "html2canvas";
-
-export interface ExportData {
- backgrounds: string[];
- svg: string;
- noiseIntensity: number;
-}
+import { domToPng } from "modern-screenshot";
/**
- * Export the current gradient as a PNG image
+ * Export the gradient as a PNG screenshot
*/
-export async function exportAsPNG(elementId: string = "gradient-container"): Promise {
- const element = document.getElementById(elementId);
+export async function exportGradientAsPNG(
+ elementId: string = "gradient-container"
+): Promise {
+ const element = document.querySelector(`#${elementId}`);
if (!element) {
throw new Error("Gradient element not found");
}
- try {
- const canvas = await html2canvas(element, {
- backgroundColor: null,
- scale: 2, // Higher quality
- logging: false,
- });
+ const dataUrl = await domToPng(element as HTMLElement);
- canvas.toBlob((blob) => {
- if (!blob) return;
-
- const url = URL.createObjectURL(blob);
- const link = document.createElement("a");
- link.href = url;
- link.download = `grain-gradient-${Date.now()}.png`;
- link.click();
- URL.revokeObjectURL(url);
- });
- } catch (error) {
- console.error("Failed to export PNG:", error);
- throw error;
- }
-}
-
-/**
- * Generate CSS code for the current gradient
- */
-export function generateCSS(data: ExportData): string {
- const { backgrounds, svg } = data;
-
- const backgroundLayers = [`url("${svg}")`, ...backgrounds].join(",\n ");
-
- return `/* Grain Gradient CSS */
-.gradient-background {
- background: ${backgroundLayers};
- filter: contrast(150%) brightness(90%);
- background-blend-mode: overlay;
-}
-
-/* Additional overlay (optional) */
-.gradient-overlay {
- background: rgba(40, 40, 40, 0.5);
- background-blend-mode: overlay;
-}`;
-}
-
-/**
- * Copy CSS code to clipboard
- */
-export async function copyCSSToClipboard(css: string): Promise {
- try {
- await navigator.clipboard.writeText(css);
- } catch (error) {
- console.error("Failed to copy to clipboard:", error);
- throw error;
- }
-}
-
-/**
- * Download CSS code as a file
- */
-export function downloadCSS(css: string): void {
- const blob = new Blob([css], { type: "text/css" });
- const url = URL.createObjectURL(blob);
const link = document.createElement("a");
- link.href = url;
- link.download = `grain-gradient-${Date.now()}.css`;
+ link.download = `grain-gradient-${Date.now()}.png`;
+ link.href = dataUrl;
link.click();
- URL.revokeObjectURL(url);
}