HTML5에서 로컬 이미지를 업로드할 때 발생하는 다양한 문제

최근에 회사를 위해 작성한 프로젝트입니다. 프로젝트 요구 사항은 대략 다음과 같습니다.
1.현지 휴대폰사진을 업로드한 다음(요구 사항) 추후 추가)
2. 자르기를 위해 사진을 회전할 수 있습니다(요구 사항은 추후 추가됨)
3. 다양한 텍스트를 입력하고 색상을 선택한 다음 자른 사진에 텍스트와 관련 사진 2개를 워터마크로 추가합니다. 서버는 사진 주소를 생성하고, 반환하고, 공유합니다.

기능은 대략 위와 같으며 그 외의 다양한 소소한 기능에 대해서는 언급하지 않겠습니다. 전체적으로 Vue(라우터, 리소스 포함)를 사용하세요. webpack 등 )

따라서 이러한 요구 사항을 충족하는 방법은 다음과 같습니다.
1. 로컬 업로드, html5의 File Api를 사용합니다. 이미지를 얻으려면 img의 src(pit 1, 2)에 base64 인코딩이 할당된 다음 자르기를 위한 레이어가 팝업됩니다. 첫 번째 자르기는 좌표를 계산하기 위해 img 위에 p를 넣는 것입니다. 완료되면 캔버스를 사용하여 사진을 캡처한 다음 값을 가져옵니다(피트 3).
2. 이 기능은 캔버스를 사용하여 이미지를 회전함으로써 해결됩니다. 회전 시 가로 세로 비율을 유지해야 하며 너비와 높이에 주의해야 합니다(피트 4).
3. 캔버스를 사용하여 워터마크와 그림을 오버레이합니다. 가장 중요한 것은 좌표에 주의하는 것입니다.

함정에 대해 이야기해보자:
1. src의 base64 인코딩을 얻는 것은 문제가 없어 보이지만 실제로는 휴대폰에 세로로 표시되는 사진이 많은데 그 이후에는 큰 문제가 있습니다. Base64 인코딩을 받아 img의 src에 직접 할당한 후 화면이 가로로 나오는 것을 확인했습니다. 처음 이 상황을 발견했을 때는 고립된 현상인 줄 알았는데, 여러 번 시도해 본 결과, 특히 아이폰에서 선택한 사진 폴더를 동일한 사진으로 나누는 현상이라는 것을 알게 되었습니다. 앨범과 사진 스트림, 가로 화면, 세로 화면. 왜인지 이해할 수 없나요? ? ? 기본적으로 이 문제에 대해 오후 시간이 소요되었습니다.

저녁에 돌아와서 IOS 개발의 대가인 친구 @叶 Gucheng에게 물어보기 전까지는 아이폰 카메라가 이제 가로로 되어있어서 모바일이 안되는 이유라고 하더군요. 세로 화면을 표시하는 휴대폰은 iOS가 자체적으로 처리한 것입니다. 사진의 촬영 각도 값을 기준으로 가로 및 세로 문제를 판단할 수 있지만 웹에서는 이 값을 실제로 사용할 수 없기 때문에 매우 당황스럽습니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? ? ------- 제가 사용하는 솔루션: 사진 회전을 사용하면 사용자가 사진을 적극적으로 회전하고 각도를 선택할 수 있습니다. 나중에 논의할 Pit 2에도 사용되는 또 다른 솔루션이 있습니다.

2. 이 가로화면 외에 android 휴대폰에서 이미지 선택 후 일부 업로드가 되지 않는 현상이 발생하는 이유는 처음에는 html5의 File Api가 아니기 때문이라고 생각했습니다. 지원되므로 업로드된 이미지가 표시되지 않으며 추후 각종 디버거를 사용하게 되는 이유는 입력태그의 변경이벤트가 발생하지 않아 방법이 없기 때문입니다. 이 문제를 해결하기 위해 다양한 공식 문서와 stackoverflow를 참조한 결과 type="file의 입력에 두 개의 속성을 추가할 수 있음을 발견했습니다. "는 휴대폰에 업로드된 이미지를 나타냅니다.

rree

이런 식으로 수락과 캡처를 추가한 후 문제의 Android 휴대폰에는 사진을 선택할 때 선택할 수 있는 폴더가 여러 개 있습니다. 그 중 일부는 업로드가 가능하고 일부는 항상 주의 깊게 확인하는 것으로 나타났습니다. SD 카드에 있는 사진을 가져올 수 없으며, 파일 데이터를 가져올 수 있는 루트 권한이 없기 때문에 변경 이벤트가 발생하지 않습니다. 웹이 브라우저에 있고 권한이 낮기 때문에 이것은 또 다른 해결 불가능한 문제입니다. (웹 권한 문제에 대해 불평해야합니다. 젠장.) 문제를 해결하는 방법은 무엇입니까? ? ? 즉, 귀하의 페이지가 귀하의 회사 자체 앱에 중첩되어 있는 경우 앱이 귀하를 도울 수 있도록 하십시오. 그러면 우리 프로젝트는 WeChat에 의해 확산되고 WeChat 브라우저에 있어야 하므로 WeChat의 JSSDK 옵션을 호출할 수 있습니다 인터페이스 는 이러한 권한을 우회할 수 있으며, 또 다른 장점은 Pit 1의 문제를 해결한다는 것입니다. 즉, 세로 화면을 업로드할 때 실제 가로 화면이 업로드되는 문제를 처리할 수 있습니다. 세로 화면인데 비용이 적지 않네요. 사진을 선택하고 키를 얻은 다음 계속 SDK를 호출하여 WeChat 서버로 전송하고 서버 ID를 얻은 다음 이 ID를 귀하의 서버인 경우 이 ID를 사용하여 WeChat에서 자체 서버로 사진을 다운로드하고 URL을 귀하에게 반환하도록 하십시오. 과정이 매우 힘들고 다운로드 수가 제한되어 있습니다(WeChat으로 로딩 제한을 신청할 수 있습니다).

참고: WeChat js sdk 이미지 선택 인터페이스

3. 위의 문제를 해결한 후 처음에 사용한 해결 방법은 다음과 같습니다. base64, img에 값을 할당한 후 img에서 프레임을 이동하고 좌표를 계산한 다음 잘라냅니다. PC 측에서는 전혀 문제가 없으며 WeChat에서 테스트해 보면 효율성이 매우 높습니다. 문제가 발견되었습니다(젠장, 휴대폰 쪽이 함정), 기능은 하나, 질문은 3개), 첫 번째 질문은 요즘 휴대폰은 픽셀이 높고 사진도 작지 않다는 것을 모두가 알고 있다는 것입니다. img의 src에 넣는 것도 실제로는 메모리에 있으므로 전체 WeChat이 특히 충돌하기 쉽습니다(충돌하고, 충돌하고, WeChat이 3번 충돌합니다). 터치 이벤트를 바인딩하기 위해 Vue를 사용하면 응답이 매우 느리고 움직임이 전혀 부드럽지 않습니다. 또한 충돌이 발생합니다. 예, 다시 충돌합니다. 세 번째 문제는 회전을 위해 캔버스 변환을 사용해야 한다는 점입니다. 변환이 완료된 후 이미지 src에 값을 할당해야 하는데 이는 매우 번거로운 작업입니다.

해결 방법: 캔버스를 균일하게 사용하고 더 이상 img를 사용하지 말고 자르기가 완료될 때까지 img의 base64를 가져오고 내보낼 때 png 대신 jpeg를 사용하면 이미지 품질이 다소 저하됩니다. 완전히 있다고 생각합니다. 영향이 없습니다. 즉, 이미지의 자르기 및 회전이 모두 캔버스이므로 기본적으로 이벤트를 직접 바인딩하는 것이 좋습니다.

4. 회전의 함정. 원본 이미지의 데이터를 저장한 후 캔버스를 먼저 회전해야 하고 그렇지 않으면 캔버스 자체의 이미지 데이터를 회전할 수 없다는 것이 문제입니다. 회전시킬 수 있는 방법이 없는 것 같습니다. 매트릭스 방식이 작동하지 않는 것 같습니다(아마 제가 수학을 잘 못하는 것 같습니다!!! 아시는 분은 데모해 보세요).

위 내용은 HTML5에서 로컬 이미지를 업로드할 때 발생하는 다양한 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!