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}//>