smartcrop.js intelligente Bildzuschneidebibliothek_Javascript-Fähigkeiten

smartcrop.js ist ein JS-Plug-in, das Bilder zuschneiden kann, ohne Gesichter zuzuschneiden

Heute stelle ich Ihnen eine sehr gute Open-Source-Bibliothek vor, die seit Kurzem auf Github verfügbar ist – smartcrop.js. Es handelt sich um eine intelligente Zuschneidebibliothek für die Bildverarbeitung. Bei der Entwicklung vieler Projekte stoßen wir häufig auf Szenarien, in denen Bilder hochgeladen werden. Dabei kann es sich um Benutzerfotoinformationen oder Produktbilder usw. handeln. Für ein besseres Benutzererlebnis sind beim Webseitenlayout jedoch häufig einige Einschränkungen in Breite und Höhe erforderlich. Bei unangemessenen Bildern ist es oft notwendig, Benutzern eine Zuschneidemethode zur Verfügung zu stellen, um ein besseres Benutzererlebnis für die Website zu bieten. Der Standard-Zuschneidebereich des Bildes wird jedoch häufig an einer festen Position angezeigt, und diese Position entspricht häufig nicht der genauen Zuschneideposition des Benutzers. Daher soll die Ihnen heute vorgestellte Open-Source-Bibliothek solche Probleme lösen und Benutzern eine bessere Benutzererfahrung bieten.

Zuerst können wir es mit „npm install smartcrop“ oder „bower install smartcrop“ herunterladen. Dann verwenden Sie es so:

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

Es wird eine bessere optimale Bildzuschneideposition ausgegeben, z. B. {topCrop: {x: 300, y: 200, height: 200, width: 200}}-Daten.

Das Folgende ist ein Fall von der Display-Website, bitte genießen Sie:

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