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)

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