Responsive Pic Editor

Responsive PicEditor using HTML, CSS, and JavaScript.

➥ Live Demo

Desktop Preview

image.editor.mp4

Prerequisites

Before you begin, ensure you have met the following requirements:

• You Should Know Basic or Intermediate of HTML ,CSS and JavaScript
• In this project i have used Javascript library cropper.js for cropping image.

For Using cropper.js in your project Copy below script tag and place it in your project:

<!-- CSS CropperJS Library CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css"/>

<!-- JavaScript CropperJS Library CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

Icons

• I have Used 2 Font icons link Boxicons and Fontawesome :
• Boxicons link :

<!-- Boxicon link -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/boxicons.min.css">

• Fontawesome CDN Link :

<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>

Project Contain

• Editing Tools - brightness,saturation,blur,opacity,etc
• Other Tools - rotate,crop,zoom in,zoom out
• Prefined Filters
• Fully Responsive for all devices

After Editing Image You can save your image.

Font Family

• I have Used Google Fonts - Poppins

Run Locally

To run PicEditor locally, run this command on your git bash:

Linux and macOS:

sudo git clone (https://github.com/shankarsharma507/PhotoEditor.git)

Windows:

git clone https://github.com/shankarsharma507/PhotoEditor.git

Contact

If you want to contact with me you can reach me at Instagram.

License

This project is Free To Use and does not contains any license.