smartcrop.js smart picture cropping library_javascript skills

smartcrop.js is a JS plug-in that can crop images without cropping faces

Today I will introduce to you a very good open source library recently available on github – smartcrop.js. It is an intelligent cropping library for image processing. In the development of many projects, we often encounter scenarios where pictures are uploaded. It may be user photo information, or product pictures, etc. However, in web page layout, for a better user experience, they often require some width and height restrictions. For inappropriate images, it is often necessary to provide users with a cropping method to provide a better user experience for the website. However, the default cropping area of ​​the picture is often displayed at a fixed position, and this position is often not the precise user cropping position. Therefore, the open source library introduced to you today is to solve such problems and provide users with a better user experience.

First we can use npm install smartcrop or bower install smartcrop to download it. Then use it like this:

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 optimal image cropping position, such as {topCrop: {x: 300, y: 200, height: 200, width: 200}} data.

The following is a case from its display website, please enjoy:

github address: https://github.com/jwagner/smartcrop.js