Skip to content

Maxx730/react-image-scale

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published