idcrop

Image cropper utility that crops an image in any polygonal shape chosen and returns a base64 of the cropped area.

1.2.4
Source
npm

Version published: 7 years ago

Weekly downloads: 74; increased by111.43%

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

IdCrop

Image cropper utility that crops an image in any polygonal shape chosen and returns a base64 of the cropped area.

Usage

$ npm install idcrop

Javascript

const IdCrop = require("idcrop");

const idcrop = new IdCrop(
  "#displayContainer",
  "#previewContainer",
  "#toolbarContainer",
  6
);

idcrop.init();

The paramenters for the init function are, in order:

The CSS selector of the container you want the toolbar to render at.
The CSS selector of the container you want the display to render at.
The CSS selector of the container you want the preview to render at.
The number of sides you want the cropping polygon to have.

HTML

You must create a container for display (cropping area), toolbar (for now, only filename) and preview (cropped area preview).

For now, you can only have one cropper per page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>IdCrop</title>
    <link rel="stylesheet" type="text/css href="https://unpkg.com/idcrop@1.2.1/dist/css/main.min.css">
  </head>

  <body>
    <div id="displayContainer"></div>
    <div id="toolbarContainer"></div>
    <div id="previewContainer"></div>

    <script type="text/javascript" src="./path/to/js/file.js"></script>
  </body>
</html>

Development Environment Setup

$ npm install & npm start

Linting

We use a combination of eslint and prettier for the formatting and linting of our JS code.

$ npm run lint
$ npm run fix

License

Keywords

FAQs

What is idcrop?

Is idcrop popular?

Is idcrop well maintained?

Package last updated on 08 Dec 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install