Wix Image Cropping Feature Development

Job ID: 39133415

Budget: $10 – $30 USD

Implement Image Cropping Feature on Wix Website

Project Description:
I am looking for an experienced Wix developer to implement a user-friendly image cropping feature on my online printing service website. This feature will allow customers to upload, crop, and edit product images directly on the product page before sending them for printing.

Requirements:

1. **Add "Crop Image" Button**:
- Create a button labeled "Crop Image" next to the product image on the product page.
- The button should open a lightbox when clicked.

2. **Create a Lightbox for Cropping**:
- Design a lightbox that contains:
- An image element that displays the product image.
- A cropping tool embedded within the lightbox (using an HTML iframe).
- Two buttons: "Save" and "Close".

3. **Integrate Cropping Tool**:
- Use a cropping library like Cropper.js within the HTML iframe.
- Ensure that users can upload their images, crop them, and see real-time previews.
- Provide options for aspect ratio settings and freeform cropping.

4. **Pass Product Image URL**:
- When the lightbox opens, pass the current product image URL to the cropping tool in the iframe so customers can crop it.

5. **Handle Cropped Image Data**:
- After cropping, capture the cropped image data (base64 format).
- Update the product page with the cropped image or provide functionality to save it for order processing.

6. **Testing and Optimization**:
- Ensure that the cropping feature works seamlessly on both desktop and mobile devices.
- Conduct thorough testing to ensure that all functionalities are working as expected.

Skills Required:
- Proficiency in Wix development (Velo by Wix).
- Experience with HTML/CSS and JavaScript.
- Familiarity with image manipulation libraries (e.g., Cropper.js).
- Ability to work with lightboxes and custom HTML embeds in Wix.

Deliverables:
- A fully functional cropping feature integrated into my existing Wix website.
- Documentation on how to use and maintain the cropping tool.
- Support for any issues arising post-deployment for a specified period.

***Budget***
- No more than 30USD. The winner will be the most reasonable bidder

Timeline:
- Indicate your availability and estimated timeline for completion.


If you are interested in this project, place your bid with your portfolio showcasing similar work you have done in the past. Include any relevant experience with Wix and image editing tools.
Related categories: PHP JavaScript CSS HTML5 HTML