ECN>> js-crop>> 返回
项目作者： ujw0l

项目描述 ：
Library to enable image cropping
高级语言： JavaScript
项目地址: git://github.com/ujw0l/js-crop.git
创建时间： 2019-06-25T03:20:44Z
项目社区：https://github.com/ujw0l/js-crop
开源协议：MIT License
下载


Welcome to Js Crop 👋




Documentation


Maintenance


License: MIT


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

  1. npm i js-crop

Script

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

Initialize

  2.  new jsCrop('selector', (Image element or upload button selector/s refer to querySelector and querySelectorAll)
  3.             { 
  4.               extButton : (optional,extension which adds button after save image button)
  5.                         { 
  6.                           buttonText : string, (Optional, text for button)
  7.                           buttonTitle : string, (Optional, title for button)
  8.                           buttonCSS   : string, (Optional, additional styling for extension button)
  9.                           callBack : function, (Required, callback function  which is passed blob of cropped image, on button click )
  10.                         },
  11.                customColor : (Optional,Js object conataining options for UI color customization)
  12.                         {  
  13.                             overlayBgColor : string, (Optional, background color for overlay)
  14.                             toolbarBgColor : string, (Optional, background color for toolbar)
  15.                             buttonBgColor :string,    (Optional, background color for buttons)
  16.                             buttonFontColor : string, (Optional, font color for button)
  18.                       }, 
  19.               imageType:string,(optinal,cropped image type,either jpeg or png)
  20.               imageQuality: number,(opaitional, cropped image quality range 0 to 1);                
  21.               saveButton:boolean (optional, set false to hide save button)
  22.   },
  23.   [ (Array of one or multiple button objects  like  one below ☟)
  24.     { (Object with button properties)
  25.       buttonText : string, (Optional, text for button)
  26.       buttonTitle : string,(Optional, title for button)
  27.       relParam : any,(Optional, any data type to be relayed back to callback function as second parameter)
  28.       buttonEvent : event, (Optional, event to attach button for callback default click,  refer to "addEventListener" events)
  29.       buttonCSS : string, (Optional, additinal styling for button)
  30.       callBack : function,(required, callback function for button, which gets image blob as first parameter and relParam as second )
  31.       },
  33.   ]
  34.   );
  36. *parameter 1 (required) : selector for images to be cropped, one or multiple
  37. *parameter 2 (optional): object to modify UI look and functionalities and develop library extension
  38. *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

Show your support

Show your support

Please ⭐️ this repository if this project helped you!

License

Copyright © 2019 ujw0l.

📜 This project is MIT licensed.

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