캔버스에로드 된 이미지에서 이미지 방향 정보를 추출하는 방법

Question

캔버스에서 이미지를 직접 업로드 할 수있는 웹 앱을 만들고 있습니다. 경우에 따라 이미지가 iPad 또는 기타 장치에서 업로드 될 때 이미지의 방향이 다르게 나타날 수 있습니다.

방향 정보를 추출하여 캔버스에서 이미지를 회전하는 방법을 찾으려고합니다.

• 내가 EXIF ​​정보를 추출 시도했다 : :

  dataUrl = canvas.toDataURL('image/jpeg'); 
  var bin = atob(dataUrl.split(',')[1]); 
  var exif = EXIF.readFromBinaryFile(new BinaryFile(bin)); 
  alert(exif.Orientation); 
  

을하지만 undefined을 반환

것들 내가 시도했습니다.

Ref. this answer.

그것은 자료-64 PNG 파일을 읽고 반환 폭과 이미지의 높이하지만이 방법을 사용하여 이미지의 방향을 찾는 방법을 모르는 -

• 나는 this fiddle을 발견했다.

Ref. this answer

누구나 올바른 방향으로 나를 가리킬 수 있습니까? 어떤 도움이라도 대단히 감사합니다.

Answer 1

전제 조건

실제로 방향을 말할 수있는 센서를 가지고 사진을 촬영 장치에 여기에 의존성이 물론 있습니다.

일부 카메라는 그렇지 않습니다. 그리고 센서가 있어도 EXIF가 이미지에 임베드 될 것이라는 보장은 없습니다. 예를 들어 EXIF는 PNG 용으로 내장되지 않으며 일부는 개인 정보 보호 및/또는 크기 이유로 (예 : GPS 좌표 등) EXIF가 제거 된 일부 JPEG 이미지를 업로드합니다. Photoshop은 "웹용으로 저장"옵션을 사용하여 저장 한 경우 EXIF를 제거합니다.

사용중인 EXIF ​​구성 요소가 버그가있을 가능성도 있습니다 다른 EXIF ​​구성 요소

을보십시오. 이 문제를 제거하기 위해뿐만 아니라 거기에 다른 EXIF ​​리더를 시도한다 : (a ton of others가와)

• code.flickr.com
• ExifReader
exif-js

.

감지 "원시"방향을

만 (즉, 어떤 EXIF ​​정보없이 "원시"이미지가 경우

.PNG, TIFF, BMP) 적어도 이렇게하여 이미지 비트 맵 자체의 방향을 확인할 수 있습니다

function isPortrait(img) { 
    var w = img.naturalWidth || img.width, 
     h = img.naturalHeight || img.height; 
    return (h > w); 
} 

그냥 함수에 업로드 된 이미지 요소를 전달합니다. 세로의 경우는 true를 돌려, 정사각형이나 풍경의 경우는 false를 돌려줍니다.

var img = document.createElement('img'); 
img.onload = function() { 
    alert(isPortrait(img)); 
} 
img.src = <data-uri-here>; 

자동 감지

자동 내용에 따라 방향을 감지 할 수 는 매우이다

만 base64로 데이터-URI는 직접 이미지 요소의 소스로한다는 설정 인코딩 한 경우 어려운 일이며 전문적인 접근 방식과 오픈 소스 접근 방식으로이 작업을 수행하려는 많은 시도가있었습니다. 그러나 그들은 결코 100 % 일하지 않습니다.

모양, 선 및 기타 객체를 감지하고 인식하려면 알고리즘이 많이 필요합니다. 거대한 프로젝트!

그러나 피사체가 대부분 사람/얼굴 인 경우 얼굴 인식을 구현할 수 있습니다. 첫 번째 패스에서 아무 것도 감지하지 못하면 90도 회전하고 다시 시도하십시오. 만약 당신이 일치를 얻으면 이것을 기초로 "좋은 추측"을 할 수 있습니다. (this library to do face detection 참조)

Answer 2

원본 이미지를 사용하지 않아 오리엔테이션 정보를 얻을 수 없었습니다. 대신 HTML 캔버스 개체를 사용하여 압축 된 이미지를 사용하고있었습니다. 원본 업로드 이미지를 사용하여 작업을 시작했습니다.