Smartcrop.js Smart Picture Cropping library

Today we will introduce a very good open Source Library –smartcrop.js on GitHub recently. It is an intelligent cropping library for image processing. In many project development, often meet upload picture scene, it may be user photo information, may also be a product picture. However, in a Web page layout, they often require some width and height restrictions for a better user experience. For inappropriate images, it is often necessary to provide users with a way to cut, to meet the site's better user experience. However, the default cropping area of a picture is often displayed in a fixed position, which is often not a precise user-trimmed position. So today we introduce this open source library, is to solve such problems, and to provide users with a better user experience.

First we can use npm install smartcrop or bower install smartcrop download it. Then use it as follows:

SmartCrop.crop(image, {        width: 100,        height: 100    },     function(result){        console.log(result); // {topCrop: {x: 300, y: 200, height: 200, width: 200}}    });

It will output a better picture of the best cropped position, such as {topCrop: {x: 300, y: 200, height: 200, width: 200}} the data.

Here is a sample from its showcase site, please enjoy:

More cases:

1. Http://29a.ch/sandbox/2014/smartcrop/examples/testsuite.html: There are more than 1000 pictures of the effect of the display (Traffic users please be careful to click, many pictures);
2. Http://29a.ch/sandbox/2014/smartcrop/examples/testbed.html: This allows uploading local images and experiencing their effects;
3. Http://29a.ch/sandbox/2014/smartcrop/examples/slideshow.html: Here you can try to create a slideshow with it.

Finally, for more information on Smartcrop.js, see its github:https://github.com/jwagner/smartcrop.js.

Smartcrop.js Smart Picture Cropping library