Cropper.js realize HTML5 cropped picture and upload (crop upload avatar. ) __oracle

My demand function: Upload the avatar on the handset side, with the cropping box. cropper.js through the canvas to achieve picture clipping, and finally in the canvas to get the cropped area of the picture Base64 string. Cropper Documents: Official documents are in English, ok I don't understand. Can only try to test the effect, there are the following summary. Official documents <-Dot this

1.Container container 2.canvas picture 3.crop cropping box

Option Related parameter description:

ViewMode display Mode Type:number default:0 options:0: The Crop box is just within the container clipping box can only be moved within 1 1:the crop box should be wit Hin the canvas cropping box can only be moved within 2 images 2:the canvas should not be within the container 2 pictures are not fully covered 1 (that is, there is a gap on one side when narrowing) 3:the conta Iner should be within the canvas 2 pictures are all covered 1 (that is, how to shrink and there will be no voids) DragMode drag mode Default: ' Crop ' Options: ' Crop ': Crea Te a new crop box to regenerate a cropping box ' move ' from this point when the mouse clicks on it: Move the canvas can drag the picture ' None ': You can't drag the do-nothing picture

Define the dragging mode of the cropper.

Toggledragmodeondblclick The default is True. Allow drag mode "crop" and "move" toggle State ... That is, when the point is crop mode, if the drag is not released then the move mode. Open and then "crop" mode

Preview   screenshot display location    type: String (jquery selector), default value '
responsive  : Type: Boolean, default value TRUE. Whether to reset the cropper when the window size changes. checkimageorigin : Type: Boolean, default value TRUE. By default, the plug-in detects the source of the picture, and if it is a cross-domain picture, the picture element is added Crossorigin  class and a timestamp is added to the picture's URL to make the Getcroppedcanvas available. Adding a timestamp causes the picture to be reloaded so that the cross domain picture can use Getcroppedcanvas. Adding Crossorigin  class to the picture prevents the timestamp from being added to the picture URL and the reload of the picture. Background: Type: Boolean, default value TRUE. Whether to display the grid background on the container. To change the background, I was directly changed, CROPPER.CSS style   CROPPER-BG
Canvas (picture) related movable : type: Boolean, default value TRUE. Whether to allow moving pictures
rotatable : Type: Boolean, default value TRUE. Whether to allow the rotation of the picture.
Scalable   default true. Whether to allow extended pictures. (Temporarily don't know why) zoomable   Default True, the stone allows you to scale the picture. zoomonwheel  to allow the mouse scroll to scale the picture zoomontouch  by default True Whether to allow touch zoom on the picture (touch screen two finger operation. wheelzoomratio  The default 0.1 Shi Cou roller scale picture proportions. Let's roll a bit. How much the picture is scaled. such as 0.1 is the picture's 10%
crop (crop box) related

AspectratioCrop box proportional default Nan For example:: 1/1,//cropping box ratio 1:1modal: Type: Boolean, default value TRUE. Whether to display a black modal window on the trim box.cropboxmovable: Default True, allow drag cropping boxcropboxresizable: Default true,//whether to allow dragging to change the size of the cropping box
Autocrop: Type: Boolean, default value TRUE. Whether the crop box is allowed to appear automatically when initializing.Autocroparea: Type: number, default value 0.8 (Picture 80%). 0-1 to define the size of the Auto trim box.Highlight: Type: Boolean, default value TRUE. Whether to display a white modal window on the trim box.
Guides: Type: Boolean, default value TRUE. Whether dashed lines appear on the Trim box.Center: Default true to show the + in the middle of the cropping boxRestore: Type: Boolean, default value True to restore the cropped area after resizing the window. Size relatedMincontainerwidth: Type: number, default value 200. The minimum width of the container.Mincontainerheight: Type: number, default value 100. The minimum height of the container.Mincanvaswidth: Type: number, default value 0. The minimum width of the canvas (image wrapper).Mincanvasheight: Type: number, default value 0. The minimum height of the canvas (image wrapper). Method of monitoring triggering Build: Type: Function, default value NULL. The shorthand for the Build.cropper event. = = =. Control before initialization of thebuilt: Type: Function, default value NULL.  The shorthand for the Built.cropper event. = = = = =DragStart: Type: Function, default value NULL. The shorthand for the Dragstart.cropper event. = = = Drag start executionDragMove: Type: Function, default value NULL. The shorthand for the Dragmove.cropper event. = = = = = = = = = Drag in moveDragend: Type: Function, default value NULL. The shorthand for the Dragend.cropper event. = = = = Drag End executionZoomIn: Type: Function, default value NULL. The shorthand for the Zoomin.cropper event. = = = Decrease executionZoomout: Type: Function, default value NULL. The shorthand for the Zoomout.cropper event. = = = Enlarge execution

Demo download

Html[HTML] View plain copy <section style= "margin-top: 50px;" >           <input id= "photobtn"  type= button " onclick=" document.getElementById (' Inputimage '). Click () " value= Choose Photos" ><!--  can add your own style  -->           <input  id= "Inputimage"   type= "File"  accept= "image/*"  style= "display: none;" />           <br/>                    </section>          <div class= "container"  style= " padding: 0;margin: 0;position:fixed;display: none;top: 0;left: 0;z-index: 200; "  id= "Containerdiv" >           <div class= "Row"  style= "display: none;"  id= "Imgedit" >             <div  class= "Col-md-9" >               < div class= "Img-container" >                                  </div>              </div>           </div>            <div class= "Row"  id= "Actions"  style= " padding: 0;margin: 0;width: 100%;p osition: fixed;bottom: 5px; " >