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
Grid
<ReactImageScaler src={this.state.src} drawGrid={true} width={1024} height={768}//>
