Smartcrop. js smart image cropping Library _ javascript skills

To test this smart identification plug-in, I tried a lot of wallpaper pictures and intelligently cropped out the main part of the image. Instead, I tried chrome, Firefox, and IE, I found that IE is supported only in versions over 10, chrome and Firefox, and mobile browsers are not. what is black technology ?? Today, let's take a closer look at the smartcrop. js plug-in.

Today, we will introduce you to smartcrop. js, an open source library that is very good on github. It is a smart cropping library for image processing. In many project development scenarios, image uploading may be a user's photo information or product image. However, in the webpage layout, for better user experience, they usually require some width and height constraints. For inappropriate images, users often need to provide a cropping method to better experience the website users. However, the default crop area of an image is usually displayed in a fixed position, which is often not a precise user crop position. Therefore, the open-source library introduced today is designed 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. 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 outputs a better image cropping position, such as {topCrop: {x: 300, y: 200, height: 200, width: 200.

The following is a case of displaying a website:

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