• Binary data to RGB in canvas :: 마이구미
    Javascript 2018. 11. 5. 21:05

    이 글은 javascript 로 원시 이진 데이터(raw binary data)를 조작하여 canvas 를 통해 이미지를 출력한다.

    흔하게 경험하는 것도 아니고, 사용하는 일도 많지는 않다.

    하지만 글을 통해 기본적인 canvas 원리와 binary 이해에 도움이 되리라 생각한다.


    raw 데이터로써, 바이너리 형태인 파일이 존재한다.

    즉, 이 raw 데이터의 파일은 이미지 포맷(png, jpg, etc..) 형태도 아닌, RGB 형태도 아니다.

    이러한 raw 데이터를 가지고, 흑백 이미지를 출력할 것이다.


    대부분 이미지 포맷이 된 형태의 파일을 넘겨받기 때문에, 앞단에서는 대부분 이러한 행위를 하지 않는다.

    하지만 자바스크립트에서 raw 데이터를 조작하는 것이 점차 늘어가고 있고, 늘어갈 것이다.

    아무튼 이 글에서는 이미지 포맷 형태가 아닌 raw 데이터 형태를 이미지로 만드는 것을 의미한다.


    우선 이러한 행위를 위해서는 이진 데이터를 조작해야한다.

    자바스크립트에서는 이진 데이터를 접근하기 위해 형식화 배열(typed array) 을 제공한다.

    그리고 이진 데이터 접근을 위한 API 인 FileReader.prototype.readAsArrayBuffer() 를 사용할 수 있다.

    다음 예제처럼 사용할 수 있다.


    See the Pen readAsArrayBuffer by leejunghyun (@mygumi) on CodePen.


    파일 업로드 시 콘솔창을 통해 typedArray 형태의 값이 출력되는 것을 볼 수 있다.


    지금부터 실제 예제를 통해 진행해본다.


    본인이 사용할 raw 데이터 파일을 업로드할 경우, 아래와 같은 형태의 이진 데이터를 볼 수 있다.

    이 때 raw 데이터가 있는 파일은 어떻게 쓰여졌는 지 알고 있어야, 정확하게 읽을 수 있다.

    raw 데이터를 위한 파일은 생성할 당시, 다음과 같이 쓰여졌다고 가정한다.

    • 이미지 사이즈 추출을 위해 먼저 width, height, datasize 를 int 형(4byte)으로 쓴다.
    • 그 후, 이미지 데이터는 width * height * unsigned short 형(2byte)으로 쓴다.


    파일 업로드 시 다음과 같이 형식화 배열 뷰를 출력된다.


    ArrayBuffer


    다음과 같이 형식화 배열 뷰를 제공하여 쉽게 조작할 수 있다. (공식 문서 참고)


    형식화 배열 뷰


    타입에 따라 이진 데이터를 확인할 수 있고, 맨 앞 요소들은 width, height, datasize 를 표현하고 있는 걸 확인할 수 있다.

    예를 들어, Int16Array 유형에서는 width - [352, 0], height - [286, 0], datasize - [2, 0].

    Int32Array 유형에서는 width - 352, height - 286, datasize - 2 인 것을 확인할 수 있다.


    이전 raw 데이터를 위한 파일이 쓰여질 때 사용한 타입인 unsigned short 형을 위해 Uint16Array 를 사용한다.

    실제 이미지 raw 데이터만을 사용하기 위해 6byte(width, height, datasize) 를 짜른 후 사용한다.


    const raw = fr.result; const rawBytes = new Uint16Array(raw).slice(6);


    결과적으로 실제 이미지를 위한 raw 데이터인 352 * 286 = 100672 크기의 배열(rawBytes)이 준비되었다.



    각 배열의 요소의 값은 1 픽셀에 대한 값을 의미한다.

    그렇기에, raw 데이터 값을 이미지 출력 형태의 값으로 변환하면 된다.

    이 과정을 canvas 를 이용하여 RGB 형태의 값으로 변환하여 이미지를 출력할 수 있다.


    const canvas = document.getElementById('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); const imgData = ctx.createImageData(width, height); const len = imgData.data.length; // width * height * 4;

    const min = rawBytes.reduce((p, v) => { return (p < v ? p : v); }); const max = rawBytes.reduce((p, v) => { return (p > v ? p : v); });

    for (let i = 0, k = 0; i < len; i += 4, k++) { const n = rawBytes[k] / (max - min); // normalize imgData.data[i + 0] = imgData.data[i + 1] = imgData.data[i + 2] = 255 * n; imgData.data[i + 3] = 255; } ctx.putImageData(imgData, 0, 0);


    1 픽셀은 RGBA 형태의 값을 가져야함으로써, 전체 크기는 기존 rawBytes * 4 를 가지게 된다.

    이 RGB의 값은 0 ~ 255 로 표현되기 때문에, 255 * 노멀라이즈 한 값을 넣는다.

    결과적으로 raw 데이터를 RGB 형태로 변환한 후, 이미지를 출력할 수 있다.


    raw binary data to rgb


    형식화 배열 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Typed_arrays

    canvas - https://www.w3schools.com/tags/canvas_createimagedata.asp

    댓글 0

Designed by Tistory.