Chrome 50에 캔버스 toBlob() 지원 추가
bookmark_borderbookmark
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
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를 사용하면 됩니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2016-03-14(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2016-03-14(UTC)"],[],[]]