Crop Image Input

This function allows developers to crop images during upload. It utilises croppieJs functionality that helps in rendering the image preview.

Usage

<input 
    type="file" 
    class="croppie" 
    crop-width="500" 
    crop-height="200" 
    name="file" 
    accept="image/*"
/>

The example above shows how to use this function. Add class .croppie to file inputs. All attributes are described below. The Result value of the input is the copped image base64 encoded

• crop-width (px)

  • required

  • The width of the output image in px

  • default is 300px

• crop-height

  • required

  • The height of the output image in px

  • default is 300px

• name

  • required

  • used to add styling and new features

  • string | dynamic

• accept

  • required

  • prevents users from uploading non-image files

  • "image/*"

• data-height

  • required

  • size of the cropping section vertically. must be the same as data-width and smaller than the preview size

  • integer | px (300px)

• data-width

  • required

  • size of the cropping section horizontally. must be the same as data-height and smaller than the preview size.

  • integer | px (300px)

• name

  • required

  • server processing of the data

  • string

• accept

  • required

  • filters the data type to images

  • string | images*/