웹 작업자를 사용하여 이미지 조작 성능을 향상시킵니다

이 기사는 HTML5의 JavaScript 이미지 조작을 탐색하여 웹 작업자를 병렬화하기 위해 성능 최적화에 중점을 둡니다. 주요 테이크 아웃은 웹 워커, 특히 여러 코어가있는 저가형 장치의 이점을 강조합니다. 세피아 톤 효과는 테스트 케이스 역할을합니다

초기 "Brute Force"접근법은 메인 스레드에서 픽셀 별 세피아 효과 픽셀을 적용하여 특히 강력한 하드웨어에서 성능이 느려집니다. 이 코드는 캔버스 요소를 사용하여 픽셀 데이터에 직접 액세스하고 조작합니다.

HTML 구조는 간단합니다. 이미지 ()가 표시되고 캔버스 요소는 처리 된 이미지를 표시합니다. JavaScript 코드는보다 자연스러운 세피아 효과를 위해 임의의 노이즈 계수를 통합 한 공식을 사용하여 각 픽셀에 대한 새로운 RGB 값을 계산합니다.

핵심 세피아 처리 함수 ()는 재사용에 대해

에 정의됩니다. 기본 스크립트 ()는 처음에 모든 픽셀을 통해 반복되는 무차별 대기 방법을 사용합니다. 그런 다음 웹 작업자 구현과 비교됩니다 웹 작업자 접근 방식은 이미지를 세그먼트 (이 예에서 4 개)로 나누어 별도의 작업자에게 할당합니다. 각 작업자는 세그먼트를 독립적으로 처리하여 처리 시간을 크게 줄입니다. 그런 다음 결과는 주 스레드에서 재조합됩니다. 파일에는 이미지 데이터의 일부를 수신하고 처리하고 결과를 기본 스레드로 다시 보낸 작업자 코드가 포함되어 있습니다.

성능 비교는 특히 하위 엔드 하드웨어에서 눈에 띄는 웹 작업자를 사용하여 달성 된 상당한 속도 향상을 보여줍니다. 그러나이 기사는 또한 고급 기계의 성능 이득이 스레드 간의 데이터 복사 오버 헤드로 인해 덜 두드러 질 수 있다고 지적합니다. 이미지 조작 작업의 복잡성은 웹 작업자의 사용을 정당화해야합니다. 이 기사는 코드를 Windows 8 애플리케이션으로 포팅하고 웹 작업자 및 이미지 조작 성능에 대한 일반적인 질문을 다루는 FAQ 섹션에 대한 논의로 마무리됩니다. 웹 작업자를 사용한 최종 결과는 다음과 같습니다

위 내용은 웹 작업자를 사용하여 이미지 조작 성능을 향상시킵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!