Never Punch Manticores

    react-image-scaler

    0.4.0 • Public • Published

    Description

    Simple HTML5 canvas based component used for scaling images. Returns base64 encoded data of edited file.

    Props

    • width - int - Width in pixels of the canvas. (Defaults to width of container)
    • hegiht - int - Height in pixels of the. (Defaults to hieght of container)
    • maxScale - int - Maxium size the image can be scaled up to. (Defaults to 3)
    • scaleStep - float - How granular to scale the image (Defaults to 0.5)
    • src - string - URL/Base64 source for the image being scaled.
    • backgroundColor - string - Color of the canvas background visible when the image is scaled down. (Defaults to #FFFFFF)
    • onScaleApply - method - Method that is run once clicking the apply button, base64 encoded value of the canvas content returned as parameter
    • onCancel - method - Method that runs once the cancel button has been clicked.
    • displayResolution - bool - Show the scaled resolution in pixels at top right. (Defaults to true)
    • applyLabel - string - Label of the apply button in bottom right. (Defaults to Apply)
    • cancelLabel - string - Label of the cancel button in bottom right. (Defaults to Cancel)
    • drawGrid - bool - Whether or not to show gridlines over the image.
    • scaleSizes - bool - Shows predefined size buttons next to Cance/Apply buttons (Defaults 0.5,1.0,2.0)

    Examples

    Example Gif

    Grid

    <ReactImageScaler src={this.state.src} drawGrid={true} width={1024} height={768}//> Example 2

    Keywords

    none

    Install

    npm i react-image-scaler

    DownloadsWeekly Downloads

    5

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    9.9 MB

    Total Files

    10

    Last publish

    Collaborators

    • molx730