merchi_product_editor
Version:
A React component for editing product images using Fabric.js
55 lines (54 loc) • 1.96 kB
TypeScript
/**
* If your application has a server component or API, you can implement a more robust
* solution for handling PSD files by converting them on the server.
*/
interface PsdConversionOptions {
psdUrl: string;
width?: number;
height?: number;
format?: 'png' | 'jpeg' | 'webp';
quality?: number;
apiKey?: string;
}
/**
* Example function that could be used to convert a PSD file to PNG using a server-side API
* Note: This is a placeholder that should be implemented based on your actual backend
*/
export declare const convertPsdOnServer: (options: PsdConversionOptions) => Promise<string>;
/**
* Implementation using a third-party API service for PSD conversion
* Note: This is a placeholder that would need to be configured with your own API key
*/
export declare const convertPsdWithThirdPartyService: (options: PsdConversionOptions) => Promise<string>;
export {};
/**
* Configuration instructions for server-side PSD support:
*
* 1. Create a server endpoint that accepts a PSD URL and returns a PNG/JPEG
* - You can use libraries like Sharp or ImageMagick on Node.js
* - For AWS Lambda, consider using a Lambda function with Sharp
* - For other platforms, most have image processing capabilities
*
* 2. Set up environment variables:
* - REACT_APP_PSD_CONVERSION_API: URL of your conversion API
* - REACT_APP_PSD_API_KEY: API key if required
*
* 3. Add these services to your loadTemplateImage function:
*
* if (isPsd) {
* // Try server-side conversion first
* try {
* const convertedUrl = await convertPsdOnServer({
* psdUrl: imageUrl,
* width,
* height,
* apiKey: process.env.REACT_APP_PSD_API_KEY
* });
*
* // Then load the converted image URL
* fabric.Image.fromURL(convertedUrl, ...);
* } catch (error) {
* // Fall back to client-side processing or placeholders
* }
* }
*/