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

캔버스 요소는 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);
}

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

다른 캔버스 컨텍스트에 이미지 blob을 그릴 수 있는지 궁금하다면 Firefox와 Chrome에서 가능합니다. 이 작업은 Chrome 50에서 추가로 제공되는 createImageBitmap() API를 사용하여 수행할 수 있습니다.