Chrome 50에 캔버스 toBlob() 지원 추가

Paul Lewis

Chrome 50부터 캔버스 요소가 업그레이드됩니다. 이제 toBlob() 메서드를 지원합니다. 이는 클라이언트 측에서 이미지를 생성하고 이를 서버에 업로드하거나 나중에 사용할 수 있도록 IndexedDB에 저장하려는 모든 사용자에게 좋은 소식입니다.

function sendImageToServer (canvas, url) {

    function onBlob (blob) {
    var request = new XMLHttpRequest();
    request.open('POST', url);
    request.onload = function (evt) {
        // Blob sent to server.
    }

    request.send(blob);
    }

    canvas.toBlob(onBlob);
}

toBlob()를 사용하면 toDataURL()에서 가져온 base64로 인코딩된 문자열을 조작하는 대신 인코딩된 바이너리 데이터를 직접 사용할 수 있으므로 유용합니다. 데이터 URI보다 작으며 더 많은 사용 사례에 적합합니다.

이미지 블롭을 다른 캔버스 컨텍스트에 그릴 수 있는지 궁금하다면 Firefox와 Chrome에서는 물론 그릴 수 있습니다. Chrome 50에도 제공되는 createImageBitmap() API를 사용하면 됩니다.