Smartcrop.js スマート画像トリミング library_javascript スキル

smartcrop.js は、顔をトリミングせずに画像をトリミングできる JS プラグインです

今日は、github で最近入手可能になった非常に優れたオープンソース ライブラリ、smartcrop.js を紹介します。画像処理用のインテリジェントなトリミング ライブラリです。多くのプロジェクトの開発では、ユーザーの写真情報や製品の写真などがアップロードされる場面がよくあります。ただし、Web ページのレイアウトでは、ユーザー エクスペリエンスを向上させるために、幅と高さの制限が必要になることがよくあります。不適切な画像の場合、Web サイトのユーザー エクスペリエンスを向上させるためにユーザーにトリミング方法を提供することが必要になることがよくあります。ただし、画像のデフォルトのトリミング領域は固定位置に表示されることが多く、この位置がユーザーの正確なトリミング位置ではないことがよくあります。そこで今回ご紹介するオープンソースライブラリは、こうした問題を解決し、ユーザーにより良いユーザーエクスペリエンスを提供するものです。

まず、npm install Smartcrop または bower install Smartcrop を使用してダウンロードできます。次に、次のように使用します:

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

{topCrop: {x: 300, y: 200, height: 200, width: 200}} データなど、より最適な画像トリミング位置を出力します。

以下は Web サイトの表示例です。お楽しみください:

github アドレス: https://github.com/jwagner/smartcrop.js