smartcrop.js compétences de recadrage d'images intelligentes library_javascript

smartcrop.js est un plug-in JS qui peut recadrer des images sans recadrer les visages

Aujourd'hui, je vais vous présenter une très bonne bibliothèque open source récemment disponible sur github – smartcrop.js. Il s'agit d'une bibliothèque de recadrage intelligente pour le traitement d'images. Dans le développement de nombreux projets, nous rencontrons souvent des scénarios dans lesquels des images sont téléchargées. Il peut s'agir d'informations sur des photos d'utilisateurs, de photos de produits, etc. Cependant, dans la mise en page des pages Web, pour une meilleure expérience utilisateur, elles nécessitent souvent certaines restrictions de largeur et de hauteur. Pour les images inappropriées, il est souvent nécessaire de proposer aux utilisateurs une méthode de recadrage afin d’offrir une meilleure expérience utilisateur sur le site Web. Cependant, la zone de recadrage par défaut de l'image est souvent affichée à une position fixe, et cette position n'est souvent pas la position de recadrage précise de l'utilisateur. Par conséquent, la bibliothèque open source qui vous est présentée aujourd'hui vise à résoudre de tels problèmes et à offrir aux utilisateurs une meilleure expérience utilisateur.

Nous pouvons d’abord utiliser npm install smartcrop ou bower install smartcrop pour le télécharger. Alors utilisez-le comme ceci :

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

Il produira une meilleure position de recadrage d'image optimale, telle que les données {topCrop : {x : 300, y : 200, hauteur : 200, largeur : 200}}.

Ce qui suit est un cas de son site Web d'affichage, veuillez en profiter :

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