이미지 처리 파이프 - 현대 이미지 구축 조정기

한동안 미뤄둔 게시물이지만 커뮤니티와 공유할 때가 됐다고 생각한다.2년 전에 나는 앉아서 이미지 축소와 노드에 관한 새로운 프로젝트를 시작했다.그 후로 그것은 나의 주요 기원 프로젝트가 되었다.
나는 나의 사이트를 위해 더욱 좋은 체험을 제공하기 위해 응답이 빠른 이미지를 만들고 싶다.그것은 하나의 노드의 형식으로 나타난다.js 스크립트는 여러 차례 교체를 거쳐 npm에 발표된 소스 패키지인 Responsive Image Builder로 변했다.

It was created out of necessity due to a lack of existing open-source solutions.

명확하게 말하자면, 각종 이미지 도구, 마운트 프로그램, third-party services 이 있다.그러나 내가 보기에 나의 요구를 만족시킬 수 있는 사람은 하나도 없다.그 밖에 마이클 포그만(Michael Fogleman)의gatsby-image과primitive library(기존 해결 방안에 통합하기 어렵다)도 사랑하게 되었다.
따라서 고유한 요구 사항을 충족할 수 있는 고유한 솔루션을 구축할 수 있었습니다.

🔥 빠르다(분명히...)

💎 최상의 이미지 알고리즘(Lanczos3)😎)

🌁 원어 라이브러리

와 같은 멋진 SVG 자리 표시자 지원

🙏 단순성

OS 알 수 없음, 무료, 병행화, 네트워크 왕복 없음, 업그레이드 없음...

나의 목표는 기존의 이미지 라이브러리를 한데 붙여서 하나의 통일된 도구 집합을 형성하는 것이다. 이 도구 집합은 서로 다른 방식으로 이미지를 처리할 수 있도록 맞춤형으로 제작할 수 있다.

Psst! You can read more about the motivation behind the project here.

현재, 그것은 다른 이름을 가지고 있으며, 그것의 새로운 기능을 더욱 잘 반영했다(일부 원인은 그것이 보존된 패키지 범위가 있기 때문이다)️🤦‍♂️): 화상 처리 파이프.'작업 흐름' 을 처리하는 것은 현재 완전히 맞춤형으로 제작할 수 있으며, 방금 주요 버전을 발표하여 내부를 재구성하여 어댑터의 실현을 더욱 쉽게 한다. 예를 들어 새로운 웹 패키지 로드러!

The new IPP features a declarative pipeline format. Tell it *how* it should generate your images!

나를 놀라게 한 것은GitHub의 소스 저장소가 줄곧 서서히 호평을 받고 있다는 것이다. 이것은 문제이고 심지어 article on Medium에 등장했다. 비록 인터넷에서 이 프로젝트를 공유하거나 언급한 적이 없지만.나는 정식으로 발표하기 전에 IPP가 진정으로 안정적인 발표를 기다리고 싶지만 온라인 커뮤니티가 불안하고 새로운 것을 시도하기를 갈망하는 것 같다!
아마도 지금이 딱 좋은 때일 것이다.여름이 곧 끝나서 나의 대학 학업이 다시 회복되었다.그러나 나는 여전히 이 프로젝트를 예견할 수 있는 미래에 유지하기 위해 전적으로 노력하고 있다.그러나 한 공헌자에게는 커다란 임무이기 때문에 밤마다 발표할 것을 기대하지 마라.
아마도 작은 프로젝트에서 그것을 사용해서 당신의 요구에 맞는지 볼 수 있을 것이다.만약 당신이 공헌을 하고 싶다면, PRs를 환영합니다!그 목적은 핵심을 가능한 한 간단하게 하여 유지보수성을 높이는 것이지 특성이 변동하는 것이 아니라는 것을 명심하세요.
IPP는 사이트 개발에만 국한된 것이 아니라 일괄 처리 이미지 처리나 백엔드 이미지 작업에 유용하다는 것을 증명할 수 있다. 왜냐하면 코드를 사용할 필요가 없기 때문이다.
나는 모든 기술적 배경의 사용자가 방문할 수 있도록 새로운 문서 사이트를 만들기 위해 노력해 왔다.이것은 여전히 진행 중인 적극적인 일이라는 것을 명심하세요.완성되기 전에 상담source code을 선택할 수 있는데 그 목적은 간단하고 알기 쉽다는 것이다.
https://ipp.vercel.app

우리 들어가자.
다음 부분은 명령줄 인터페이스의 빠른 시작 안내서입니다.이상의 사이트는 더욱 완전한 예시를 제공하였다.

선결 조건
IPP가 노드에서 실행됩니다.js를 npm를 통해 나눠줍니다.그것들은 한데 묶여서 official website에서 얻을 수 있다.

It's recommended to get an LTS release or a less recent version of Node.js to avoid installation problems. Learn more

장치
터미널을 열고 달러 기호 없이 다음을 수행하면 시스템에 CLI가 전체적으로 설치됩니다(다른 설치 옵션은 사용 가능).

$ npm install --global @ipp/cli

이렇게!✨
마찬가지로 node gyp와 관련된 설치 오류가 발생하면 이전 버전의 node를 사용해 보십시오.js는 Python과 C++ 컴파일러를 설치하지 않도록 합니다.이것은 디자인 제한입니다. 언어를 컴파일하는 것은 매우 어렵습니다. IPP는 더 빨리 원합니다!

사용법
몇 개 images 를 잡고 선택한 이름이 있는 새 폴더에 던져 넣으세요.
폴더 옆에 .ipprc.yml라는 프로파일을 만듭니다.다음 컨텐트를 복사하여 파일에 붙여넣습니다(이미지를 이전에 만든 폴더의 이름으로 대체).

input: images
output: formats

manifest:
  source:
    x: hash:12
  format:
    w: width
    p: path

pipeline:
  - pipe: resize
    options:
      resizeOptions:
        width: 1280
    save: "[source.name]-[hash:8][ext]"

그런 다음 터미널 프롬프트를 열고 구성 파일을 포함하는 폴더로 이동하여 IPP를 실행합니다.

$ ipp

모든 설정이 올바르면 IPP는 실행 시 유용한 정보를 표시하고 성공적인 조작을 보고합니다.지금 두 번째formats라는 폴더가 있을 거예요. 안에 새 그림이 한 무더기 있어요!

그럼 얘는 뭐 했어?
위의 구성 파일은 각 소스 이미지를 가져오고 최대 너비가 1280픽셀이 되도록 크기를 조정합니다.이 임계값보다 작은 이미지는 크기가 조정되지 않고 전달됩니다.여기가 IPP에서 빛이 나기 시작하는 곳!그런 다음 이미지를 저장하고 IPP 버전의 템플릿 텍스트를 사용하여 파일 이름을 생성합니다.
이 밖에 명세서에 주의하세요.형식 디렉토리의 json 파일입니다.모든 출력 결과를 포함하는 JSON 요약입니다.예를 들어, 다음과 같은 항목을 발견할 수 있습니다.

{
  "f": [
    {
      "w": 1280,
      "p": "red-green-macaw-74cd8540.jpg"
    }
  ],
  "s": { "x": "7f5d4e26980c" }
}

명세서 파일은 설정 파일의 manifest 키를 기반으로 생성됩니다.현재 목록은 출력 원본 이미지의 해시 값 (12글자로 제한) 과 출력 형식 이미지의 너비와 경로를 설정합니다.

Tip: the source hash is generated from the file contents and will never change, it could be useful as an image-lookup mechanism

IPP는 무분별하게 크기를 조절하는 도구가 아니지만 컨텍스트 인식이 있습니다.또한 사용 가능한 이미지 목록을 제공하여 브라우저와 같은 소비자들이 이를 인식하고 이미지 크기, 디코더 등에 따라 가장 적합한 이미지를 선택할 수 있도록 하기 위한 것이다.

The manifest file can be further processed or it can be downloaded and cached by the client. There are even better options, such as the official webpack loader that convert image imports into a single manifest entry, like the example above.

그것은 어떻게 일합니까?
단일 이미지 변환은 파이프의 개념에 의해 표시됩니다.실제로 그것은 비동기 순수 함수이다.
이미지는 바이너리 버퍼와 메타데이터 대상에 의해 표시됩니다.이러한 세그먼트는 관련 데이터 세그먼트이므로 함께 유지됩니다(내부는 DataObject).메타데이터는 버퍼에 대한 상하문 정보를 제공하고 각 파이프에서 천천히 구축합니다.then 속성을 사용하여 파이프를 서로 연결하여 파이프 브랜치(트리와 유사)를 생성할 수 있습니다.파이프 브랜치 배열로 파이프를 생성합니다.

- pipe: resize
  then:
    - pipe: compress
      save: "[source.name][ext]"
    - pipe: convert
      ...

파이프마다 출력을 내보낼 수 있는 save 속성을 지정할 수 있습니다.내보낸 그림을 포맷이라고 하는데, 데이터 대상이 파이프에 있는 이 점의 스냅샷입니다. (여기서 관건은 불변성입니다.)
이것은 @ipp/core 가방의 기본 구조다.실현(예를 들어 명령행 인터페이스)은 저장 키와 메모리 데이터를 어떻게 처리하는지를 결정할 수 있다.

준비됐나요?
끝까지 버텨줘서 고마워!너는 official documentation에서 더 많은 내용을 읽을 수 있다.
메모리 효율을 높이는 비동기 교체기 지원, 디스크 기반 캐시 옵션, 어댑터 추가, 프런트엔드 통합 등 계획된 기능도 추가되었습니다.
이것은 나의 첫 번째 개원 프로젝트에 관한 문장입니다. 나는 당신들의 평론과 피드백을 듣고 매우 기쁩니다.😁 그림에 어떤 작업 흐름을 사용합니까?
또 "헤이, 이게 존재해. 봐봐..."라고 답하는 사람이 있다면 나는 매우 화가 날 것이다.적어도 이것은 훌륭한 학습 경험이야, 그렇지...?