Vue.js와 결합된 프런트엔드 이미지 압축 솔루션

이것은 매우 간단한 해결책입니다. 글쎄, 그것은 사실이다.

이 작업을 수행하는 이유는 무엇입니까?

오늘날 모바일 웹의 급속한 발전으로 인해 사용자가 모바일 웹에 이미지 파일을 업로드해야 하는 애플리케이션이 너무 많습니다. 극복해야 할 어려움:

낮은 네트워크 속도에서 느린 업로드 진행, 열악한 사용자 경험

높은 동시성에서는 대용량 업로드 파일의 백그라운드 처리가 스트레스를 받습니다.

어쩌면 more ...

위의 어려움을 극복할 때 다음과 같은 질문도 할 수 있습니다.

사용자가 업로드한 원본 이미지를 꼭 저장해야 하는가?

사용자 언제까지 기다리면 될까요?

더 있을 수도...

위의 어려움과 질문을 실제 사례와 결합하면 다음과 같이 할 수 있을 것입니다. 사용자가 업로드한 사진을 찍을 때 사진은 배경에 제출되기 전에 압축됩니다. 이미지 파일 크기가 줄어들면 업로드 속도가 자연스럽게 증가하며, 동일한 동시성에서 백그라운드 처리 속도도 향상되며 사용자 경험도 향상됩니다.

일부 주류 CDN의 양식 기능을 사용하여 CDN에 직접 파일을 업로드하는 것은 어떨까요? 물론 그 솔루션을 선택할 수도 있습니다. 아니면 이것이 프로그래머의 특성인가?

준비

위에서 말했듯이 “사용자가 이미지를 업로드하면 배경에 제출되기 전에 이미지가 압축됩니다.” 다양한 도구를 바로 사용 가능:

localResizeIMG(코어, 프런트 엔드에서 이미지를 압축하는 데 사용)

Vue.js(프런트 엔드 데이터 처리, 로직 표시)

Bootstrap( 더 말할 필요가 있나요?)

어떻게 하나요?

프로젝트 변경 사항을 업로드한 후 localResizeIMG를 사용하여 압축합니다.

데이터를 예상대로 넣으세요

localResizeIMG를 호출할 때 압축된 이미지의 너비, 높이, 품질을 지정할 수 있습니다. (자세한 내용은 문서를 참조하세요.) 배경에 데이터를 제출하는 방법은 라이브러리의 위키를 참조하세요. , 모든 것이 간단합니다.

데모 주소

이 예제의 저장소 주소

이 문서의 솔루션은 관련 프레임워크/라이브러리를 사용할 때 발생하는 유일한 솔루션도 아니고 반드시 최고도 아닙니다. 질문이 있는 경우 해당 Github 저장소로 이동하여 문제나 위키를 볼 수 있습니다.