Chrome 이미지 다운로드 네트워크 오류

우선 이글을 찾아오는 방문자의 경우는 2가지 케이스라고 생각한다.

1. 웹페이지 일반사용자

2. 웹페이지를 개발하는 개발자

1.의 경우라면... 인터넷 익스플로러나 파이어폭스 같은 다른 웹브라우저를 사용하길 권장하고...

해당 웹페이지 고객센터에 다운로드가 되지 않음을 얘기하길 바란다.

이 포스트는 2번 처럼.. 웹페이지를 개발하는 개발자에게 해당되는 사항이므로 참고하길 바란다.

요즘(꽤 예전부터...) Openlayers를 이용한 GIS 서비스를 개발중이다.

사용자의 요청에 따라(젠장..) 버튼을 활용한 이미지 다운로드 기능을 구현할 필요가 있었다.

이 기능을 구현하는데 많은 시행착오가 필요했다..

발생했던 문제점들은 다음과 같다.

 1. 맵의 이미지화

 2. CrossOrigin

 3. 크롬 네트워크 오류

나의 고민과 고생을 보고싶은 사람은 "더보기 클릭"

1번의 경우

Canvas Element를 직접 다룰 경험이 적었기에 삽질을 좀 했던 케이스였다. 공부가 좀 더 필요할 것 같다.

2번의 경우

GIS 서비스는 일반적으로 외부 WMS(Web Map Service)를 가져와서 사용하여야 하는 경우가 있다.

여기서 WMS란 쉽게 말해서 맵을 표현하는 이미지라고 설명할 수 있다.

국내에서 지원하는 지도 서비스 중 유명한 것이 vworld이다. vworld는 국가정책적으로 운영중이라 국내 대상 서비스 개발을 위해서는 반드시 참고 또는 활용해야한다.

하지만, vworld에서는 crossorigin문제로 데이터 접근의 어려움이 있었다. 물론, vworld에도 이미지 다운로드 버튼 기능이 있었었는데 vworld에서는 다른 방법으로 crossorgin 문제를 해결 했을수도 있었겠지만 (vworld의 서비스는 공통서비스와 지도서비스의 서버망이 분리되어있다고 한다.) 기능을 구현한 코드를 확인 해보기에는 시간이 오래 걸릴 것 같았다..

일반지도의 경우에는 vworld에서 제공하는 Proxy 서버로 우회하여 crossorigin문제를 피할 수는 있었으나 주제도는 그렇지 않았다.

현재 구현되는 서비스에서는 주제도의 종류가 많지 않아, 데이터 정제 후 사내 WMS를 구축하였다.(필요에 의해서 더욱 정합한 데이터 셋으로 새로 만들 필요는 있었기에 진행하였다.)

그 중 3번에 경우를 짧지만 상세하게 설명하고자 한다.

크롬 네트워크 문제는 종종 발생하였기에 버그를 찾아내는게 쉽지는 않았다.(5분 정도만 들여보면 해결책이 나오는 버그는 아니었음..)

크롬 네트워크 문제를 해결하기 위해 다음과 같은 문제가 있을 것이라 생각하였다.

 1. 맵 Image 렌더링 문제

-> 이게 아니었는데.. 이 문제가 아님을 명확히 확인하기 위한 많은 시간이 걸렸다.

-> Map Rendering 완료 후에 다운이 되게 기능을 바꾸고.. setTimeout을 적용해보기도 하고.. 암튼 삽질 연속..

 2. 이미지 URL Length 문제

-> 크롬에만 이미지 다운로드 기능이 종종 진행되지 않는것을 확인하였다.(맵 Image 렌더링 문제 확인하다 발견)

-> 크롬의 경우는 메모리 활용 정책이 타 브라우저와는 많이 달라 크롬에서만 발생하는 문제의 경우 메모리 문제가 클 것이라 판단하였다.

-> canvas를 이미지화하기 위한 Blob 타입의 URL의 length를 체크해본 결과... 잘되는 케이스에서는 String Length가 200만이 안되는데 반해 네트워크 오류가 발생하는 케이스에서는 String Length가 200만이 넘었다(220만에 가까움..).

여러 시행착오의 결과 최종 결론은...  URL Length에 따라 크롬에서 OutBoundMemory 에러가 발생하고 있는것은 아닐까???

그래서 URL을 압축하기로 하고 레퍼런스 검색..

다음과 같은 코드로 문제를 해결하였다.

let dataURLtoBlob = function(dataUrl) {
    let parts = dataUrl.split(','), mime = parts[0].match(/:(.*?);/)[1]
    if (parts[0].indexOf('base64') !== -1) {
        let bstr = atob(parts[1]), n = bstr.length, u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }

        return new Blob([u8arr], {type: mime})
    } else {
        var raw = decodeURIComponent(parts[1])
        return new Blob([raw], {type: mime})
    }
}

let dataUrl = URL.createObjectURL(
    dataURLtoBlob(document.getElementById('mapCanvas').toDataURL({format: 'png', multiplier: 4}))
);