# CropGuide Easily add an Image Cropper to any File Upload Field CropGuide is a browser-based image cropping and preprocessing service that adds an image editor to existing HTML file upload fields. Images are edited locally in the user's browser before upload. Image data is not uploaded to or processed by CropGuide servers. CropGuide fields can be configured through the CropGuide web app without writing code. Pro and Unlimited plans also provide a JavaScript API for further customization. The app lives at: ## Example Use cases - Crop images before upload - Resize images before upload - Compress user-uploaded images - Prevent users from uploading low quality images - Convert HEIC/HEIF images to JPEG - Crop circular profile pictures - Crop document photos such as passport, identity card, Aadhaar card, cedula, and PAN card images ## Integrations CropGuide catches photos before they're uploaded and hands them back to your site after editing. This all happens in the browser, no image data is sent to our servers. We've successfully tested CropGuide with the services below and are confident it'll work just fine with other web-based services as well. ### No-Code Tools No plugins needed. Add image cropping to default file upload fields with CropGuide. - https://cropguide.io/integrations/squarespace/index.md - https://cropguide.io/integrations/umso/index.md - https://cropguide.io/integrations/carrd/index.md - https://cropguide.io/integrations/webflow/index.md - https://cropguide.io/integrations/wix/index.md - https://cropguide.io/integrations/weebly/index.md - https://cropguide.io/integrations/shopify/index.md - https://cropguide.io/integrations/bubble/index.md ### JavaScript Libraries Library doesn't support image manipulation? No problem, add CropGuide to the page and it suddenly does. - https://cropguide.io/integrations/filepond/index.md - https://cropguide.io/integrations/uppy/index.md - https://cropguide.io/integrations/dropzonejs/index.md - https://cropguide.io/integrations/file-request-pro/index.md - https://cropguide.io/integrations/jquery-file-upload/index.md - https://cropguide.io/integrations/fine-uploader/index.md - https://cropguide.io/integrations/shield-ui-upload/index.md - https://cropguide.io/integrations/react-dropzone/index.md - https://cropguide.io/integrations/plupload/index.md - https://cropguide.io/integrations/flow/index.md - https://cropguide.io/integrations/vue-upload-component/index.md - https://cropguide.io/integrations/meteor-files/index.md - https://cropguide.io/integrations/file-upload-vue/index.md ### Content Management Add CropGuide and you can use image cropping functionality with every file upload field. - https://cropguide.io/integrations/wordpress/index.md - https://cropguide.io/integrations/netlify-cms/index.md - https://cropguide.io/integrations/joomla/index.md - https://cropguide.io/integrations/drupal/index.md - https://cropguide.io/integrations/nopcommerce/index.md - https://cropguide.io/integrations/umbraco/index.md - https://cropguide.io/integrations/optimizely/index.md - https://cropguide.io/integrations/kentico/index.md - https://cropguide.io/integrations/orchard-core/index.md ## How CropGuide works 1. A website includes the CropGuide JavaScript library. 2. CropGuide automatically detects configured file upload fields. 3. When a user selects an image, CropGuide opens the image editor. 4. The image is edited and processed locally in the browser. 5. CropGuide returns the resulting image to the original file upload field. 6. The website uploads the resulting file using its existing upload process. CropGuide does not replace or proxy the website's file upload infrastructure. ## Docs - https://cropguide.io/docs/installation/index.md How to set up CropGuide on your website. - https://cropguide.io/docs/configuration/index.md How to configure CropGuide, what does the JavaScript API look like, which properties are available. - https://cropguide.io/docs/events/index.md How can I integrate CropGuide more closely by listening to events. ## Features - Crop, rotate, flip, and re-orient images - Enforce aspect ratio - Enforce minimum image size - Resize output images - Compress images - Convert output format to JPEG, PNG, or WebP - Convert HEIC images to JPEG - Apply circular masks - Show crop presets - Configure light/dark theme - Configure editor language/locale - Use headless mode - Use JavaScript API events - Customize branding on higher plans ## Pricing See current CropGuide plans and pricing: https://cropguide.io/pricing/index.md ## Policies - https://cropguide.io/terms/index.md - https://cropguide.io/privacy/index.md ## About - https://cropguide.io/about/index.md ## Privacy We firmly believe privacy is important, especially so when dealing with images. CropGuide does not upload or store images selected by end users. Image editing and processing happen locally in the user’s browser before the resulting image is passed back to the website’s file upload field. ## Compatibility CropGuide is fully functional on all modern browsers and devices. It has been tested and proven on a wide range of platforms. Chrome, Chrome Android & iOS, Firefox, Firefox Android & iOS, Safari, Safari iOS, Edge, Edge Android & iOS, Opera, Opera Android & iOS When a browser doesn't have the capabilities to run our editor we will gracefully fall back to the default file upload field.