smartcrop.js 스마트 사진 자르기 library_javascript 기술

smartcrop.js는 얼굴을 자르지 않고 이미지를 자를 수 있는 JS 플러그인입니다

오늘은 최근 github에서 사용할 수 있는 아주 좋은 오픈 소스 라이브러리인 smartcrop.js를 소개하겠습니다. 이미지 처리를 위한 지능형 자르기 라이브러리입니다. 많은 프로젝트를 개발하다 보면 사용자 사진 정보일 수도 있고, 제품 사진 등이 업로드되는 시나리오를 자주 접하게 됩니다. 그러나 웹 페이지 레이아웃에서는 더 나은 사용자 경험을 위해 너비와 높이 제한이 필요한 경우가 많습니다. 부적절한 이미지의 경우 웹 사이트에 대한 더 나은 사용자 경험을 제공하기 위해 사용자에게 자르기 방법을 제공해야 하는 경우가 많습니다. 그러나 사진의 기본 크롭 영역은 고정된 위치에 표시되는 경우가 많으며, 이 위치는 사용자가 정확하게 크롭하는 위치가 아닌 경우가 많습니다. 따라서 오늘 소개하는 오픈소스 라이브러리는 이러한 문제를 해결하고 사용자에게 더 나은 사용자 경험을 제공하기 위한 것입니다.

먼저 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}} 데이터와 같은 더 나은 최적의 이미지 자르기 위치를 출력합니다.

다음은 디스플레이 홈페이지의 사례입니다. 즐겨주세요.

github 주소: https://github.com/jwagner/smartcrop.js