javascript - 프런트 엔드는 이미지의 일부 자르기 및 업로드를 어떻게 구현합니까? WeChat이나 QQ를 통해 업로드하는 것은 어떻습니까? 어떤 기술이 사용됩니까?

Question

프런트 엔드에서 사진의 일부를 잘라서 업로드하는 방법은 무엇인가요? WeChat이나 QQ를 통해 업로드하는 것은 어떻습니까? 어떤 기술이 사용되나요

Answer 1

이 문제는 앞면과 뒷면의 두 부분으로 나뉩니다.

웹 프런트엔드에서는 JCrop을 사용하여 이미지 자르기를 수행할 수 있습니다. 실제로는 실제 자르기가 아니지만 이미지의 영역 선택은 백엔드에서 수행됩니다.
JCrop 데모: http://deepliquid.com/project...

백엔드에는 다양한 언어별로 이미지 자르기를 위한 API가 있어 관련 문서를 확인할 수 있습니다. 또한 일부 클라우드 스토리지 자르기 기능을 사용할 수도 있습니다. Alibaba Cloud 및 Qiniu에는 Qiniu와 같은 이미지 자르기 기능이 있습니다: https://developer.qiniu.com/d...

Answer 2

캔버스의 drawImage를 통해 관련 작업을 구현할 수 있습니다

Answer 3

이 라이브러리 추천: PhotoClip

데모 주소: http://htmlpreview.github.io/...
구체적인 효과는 다음과 같습니다: