두 개의 이미지와 API : 제품을 다시 칠하는 데 필요한 모든 것

이 기사는 복잡한 SVG 또는 CSS없이 제품 이미지의 색상을 동적으로 변경하는 영리한 방법을 자세히 설명합니다. 이 기술은 이미지 변환을 위해 IMGIX API와 결합 된 기본 이미지와 "페인트"레이어를 사용합니다. 이 접근법은 수많은 제품 변이를 효율적으로 표시하는 데 특히 유용합니다.

Cartrawler의 엔지니어 인 저자는이 솔루션을 구현하여 자동차 이미지 라이브러리를 개선했습니다. 최대 200 대의 자동차 이미지를 동시에 표시해야 할 필요성은 속도와 성능의 중요성을 동시에 강조했으며 여러 코드베이스에서 작업하면 간단하고 확장 가능한 솔루션의 필요성을 강조했습니다.

과정 :

1. 베이스 레이어 : 중립적 인 색상의 제품의 고품질 이미지가 기초 역할을합니다. 이 이미지는 시각적으로 혼자 서 있어야합니다.

2. 페인트 레이어 : 기본 레이어와 치수가 동일 한 두 번째 이미지가 생성됩니다. 이 레이어에는 다른 색상과 효과적인 혼합을 보장하기 위해 밝은 색 (흰색 또는 밝은 회색)을 사용하여 색상이 동적으로 변해야하는 영역 만 포함됩니다.

3. IMGIX API : IMGIX API는 이미지를 결합하고 조작하는 데 사용됩니다. 주요 매개 변수는 다음과 같습니다.

   • w : 이미지 너비 (두 레이어 모두 일관성이 있어야 함).
   • bri : 밝기 조정.
   • con : 대비 조정.
   • monochrome :이 매개 변수는 동적 16 진수 응용 프로그램을 허용합니다. 페인트 레이어의 URL은 IMGIX 매개 변수 내에서 사용하기 위해 URL로 인코딩되었습니다.

4. 레이어 스태킹 : Imgix watermark 매개 변수는 인코딩 된 페인트 층을 기본 레이어로 오버레이합니다. mark-align 적절한 중심을 보장합니다.

결과 단일 Imgix URL은 단순히 monochrome 육각 값을 변경하여 지정된 색상으로 제품을 동적으로 표시합니다. 예는 단일의 적응 가능한 URL에서 검은 색, 파란색, 녹색 및 빨간색으로 렌더링 된 동일한 자동차를 보여줍니다.

이 방법은 광범위한 코딩, 복잡한 라이브러리 또는 프론트 엔드 수정을 피하며 다양한 제품 색상 옵션을 동적으로 표시하기위한 간소화되고 효율적인 솔루션을 제공합니다.

위 내용은 두 개의 이미지와 API : 제품을 다시 칠하는 데 필요한 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!