Online tool for clients to create their own PNGs from source files

[LornaLCWGGL]

Hi experts.
Okay - so I realise online there are a number of PSD to PNG convertors where you upload your source file, type in the size properties etc and it will create a PNG to your specs (Similar to the below).

I would like to have something similar on our website, which not only allows the user to specify the file sizes, but also to be able to combine different images.  For example, it would include a logo layer as standard, optional to have transparent or include background layer, and then maybe a character/icon as extra too, to work around the logo.  Is this kind of functionality available anywhere do you know?  Thank you so much!! 

[partyush]

Hi @LornaLCWGGL 

The functionality you re looking for can be achieved through custom component

Please check these steps, I am sure you will get the direction from the same
1. Custom Component Creation:

• Create a custom AEM component for this functionality. This component will include the necessary user interface elements, such as file upload, size properties input, and options for adding different layers.

2. User Interface Design:

• Design the user interface for the component, ensuring it's intuitive and user-friendly. Include fields for uploading PSD files, specifying size properties, and selecting optional layers.

3. PSD File Handling:

• Implement a mechanism to handle PSD files on the server-side. AEM provides APIs to handle file uploads and storage.

4. Layer Handling:

• Implement logic to manage layers. Allow users to add, remove, and customize layers (e.g., logo, background, character/icon).

5. Conversion Process:

• Integrate a PSD-to-PNG conversion library or service. You may need to use third-party tools or write custom code for this step.

6. Image Composition:

• Write code to compose the final image based on user specifications. This may involve overlaying layers, adjusting dimensions, and handling transparency.

7. Preview and Confirmation:

• Provide a preview of the generated PNG before finalizing. Allow users to confirm or make further adjustments.

8. PNG Generation:

• When the user confirms, trigger the PNG generation process using the selected options and layers.

9. Download and Storage:

• Provide a download link for the generated PNG. Optionally, implement storage capabilities to save the generated PNG for future access.

10. Error Handling and Validation:

• Implement validation checks to ensure that user inputs are valid and handle potential errors gracefully.

11. Testing:

• Thoroughly test the component to ensure it functions as expected under various scenarios, including different layer combinations and size properties.

12. Documentation and User Guidance:

• Provide clear documentation and user guidance on how to use this functionality on your website.

13. Performance Considerations:

• Optimize the code and resources to ensure efficient performance, especially during the conversion process.

14. Security:

• Implement security measures to prevent any potential vulnerabilities, especially when handling user-uploaded files.

By following these steps, you can create a custom component in AEM that allows users to upload PSD files, customize size properties, add optional layers, and convert them to PNG images according to their specifications.

Thanks

[kautuk_sahni]

@LornaLCWGGL Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[LornaLCWGGL]

We haven't been able to pick this up and test yet, but will raise this as an option when the project starts again