ujw0l / js-crop

Library to enable image cropping

Welcome to Js Crop 👋

Js Library to enable image cropping with built in UI(with color customization options to fit look and feel of you website/web app)

Install

npm i js-crop

Script

<script type:"text/javascript" src="src/js-crop.js"></script>
or 

<script type:"text/javascript" src="src/js-crop.min.js"></script>

Initialize

 new jsCrop('selector', (Image element or upload button selector/s refer to querySelector and querySelectorAll)
            { 
              extButton : (optional,extension which adds button after save image button)
                        { 
                          buttonText : string, (Optional, text for button)
                          buttonTitle : string, (Optional, title for button)
                          buttonCSS   : string, (Optional, additional styling for extension button)
                          callBack : function, (Required, callback function  which is passed blob of cropped image, on button click )
                        },
               customColor : (Optional,Js object conataining options for UI color customization)
                        {  
                            overlayBgColor : string, (Optional, background color for overlay)
                            toolbarBgColor : string, (Optional, background color for toolbar)
                            buttonBgColor :string,    (Optional, background color for buttons)
                            buttonFontColor : string, (Optional, font color for button)
                            
                      }, 
              imageType:string,(optinal,cropped image type,either jpeg or png)
              imageQuality: number,(opaitional, cropped image quality range 0 to 1);                
              saveButton:boolean (optional, set false to hide save button)
  },
  [ (Array of one or multiple button objects  like  one below ☟)
    { (Object with button properties)
      buttonText : string, (Optional, text for button)
      buttonTitle : string,(Optional, title for button)
      relParam : any,(Optional, any data type to be relayed back to callback function as second parameter)
      buttonEvent : event, (Optional, event to attach button for callback default click,  refer to "addEventListener" events)
      buttonCSS : string, (Optional, additinal styling for button)
      callBack : function,(required, callback function for button, which gets image blob as first parameter and relParam as second )
      },
  
  ]
  );

*parameter 1 (required) : selector for images to be cropped, one or multiple
*parameter 2 (optional): object to modify UI look and functionalities and develop library extension
*parameter 3 (optional): Array which contains objects for one or multiple buttons 

Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

Author

👤 ujw0l

• Twitter 👉 @bastakotiujwol
• Github 👉 @ujw0l

Show your support

Show your support

Please ⭐️ this repository if this project helped you!

• 
• 🍺
• Get supported js-crop with the Tidelift Subscription

License

Copyright © 2019 ujw0l.

📜 This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator