Cropper introduction of front-end cutting picture plugin

To introduce a very practical front end of the jquery-dependent image cutting plugin cropper.

Because the front-end can not do the cutting of the picture, so the actual need to use cropper and backstage GraphicsMagick Mutual cooperation.

First put on the Cropper URL https://fengyuanchen.github.io/cropperjs/ and GitHub address : Https://github.com/fengyuanchen/cropper　

First step: Download cropper:

　　

NPM install cropper.

Part II: Introduction of dependency packages and plug-in packages:

　　

<script src= "/path/to/jquery.js" ></script><!--jquery is required--><link  href= "/path/to/ Cropper.css "rel=" stylesheet "><script src="/path/to/cropper.js "></script>

The third part: The method is called in JS:

$ (' #image '). Cropper ({  16/9,  function(e) {    //  Output The result data for cropping image.     Console.log (e.x);    Console.log (E.Y);    Console.log (e.width);    Console.log (e.height);    Console.log (e.rotate);    Console.log (E.scalex);    Console.log (E.scaley);  }});

Where aspectratio refers to the aspect ratio of a picture

Only need to x,y,width,height,rotate,scalex,scaley these data to the background, the background can be based on the data for the cutting of the picture.

Use Cropper to be aware that this plugin will build some tags in the DOM, so when the picture is displayed, pay more attention to:

　　

　　

Cropper introduction of front-end cutting picture plugin