<tonetime-croptool>

Web component for croping an image.

• No dependencies (Polyfill is needed for browsers w/o webcomponent support)
• Works on both mobile and web browsers.
• 5k gzipped.

Installation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script> <!-- polyfill for unsupported browsers -->
<script src="dist/tonetime-croptool.js"></script>

Attributes:

src: [image source]

range: [true | false] Show a range slider to zoom in and out. Will never show on mobile devices.

cropbox-width,cropbox-height: [pct] Cropbox provides a background with a rectangluar box to crop the image.

cropbox-fixed: [true | false] Do not allow the user to change the height/width of the cropbox.

starting-scale: Starting scale value. Default is minimum to fit in container.

accept-drop: [true | false] Accept images dragged into the component. Web browser only. Click for example

Function:

drawCroppedImage(): returns the image data for the currently cropped image (in original size)

Example 1:

<tonetime-croptool id='ex1' style='width:350px;height:350px' cropbox-height='80%' cropbox-width='90%' range="true" src='images/cat.jpg' ></tonetime-croptool>

Change Image Save Image

Example 2: Using with clip-path

<tonetime-croptool id='ex2' style='-webkit-clip-path: ellipse(35% 40% at 50% 50%); clip-path: ellipse(35% 40% at 50% 40%); width:350px;height:350px' range="true" src='images/archer.jpg' ></tonetime-croptool>

Change Image Save Image