JavaScript 스마트 이미지 커팅 스크립트 이해

이미지는 특히 올바르게 처리되면 페이지를 더욱 매력적으로 만들 수 있지만 문제는 이미지 처리가 번거롭고 이미지 생성 및 자르기가 일반인, 특히 자신의 이미지를 업로드하는 사용자에게는 어려운 작업이라는 것입니다. 아바타 이미지, 로고 이미지 등 다양한 이미지 형식과 이미지 크기가 있을 수 있습니다.

최근 브라우저 측에서 이미지를 지능적으로 처리하는 흥미로운 JavaScript 스크립트인 smartcrop.js를 발견했습니다. 이 스크립트는 이미지의 내용을 지능적으로 분석하고 사용할 수 있는 인물 사진과 얼굴은 물론 이미지의 주요 내용을 식별할 수 있습니다. 사람, 얼굴, 사진의 주요 피사체 등 가장 중요한 부분이 돋보이도록 이미지를 적절한 크기로 쉽게 자르고, 불필요한 부분을 잘라낼 수 있습니다.

데모 보기

다음은 레이디 가가의 사진 2장을 사용한 샘플입니다. smartcrop.js로 처리한 후 두 사진은 아바타 사진에 매우 적합하며 사진 속 아바타가 중앙에 배치됩니다.

데모 보기

이 js 도구 스크립트의 호출 방법은 매우 간단하며 몇 줄의 코드만 적용하면 됩니다.

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

자세한 소개는 공식 문서를 참조하거나 소스 코드를 다운로드하여 작동 원리를 이해할 수 있습니다.

추천 튜토리얼: "javascript 기본 튜토리얼"

위 내용은 JavaScript 스마트 이미지 커팅 스크립트 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!