files/ko/web/api/offscreencanvas/toblob/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

---
title: OffscreenCanvas.convertToBlob()
slug: Web/API/OffscreenCanvas/toBlob
tags:
  - API
  - Canvas
  - Experimental
  - Method
  - OffscreenCanvas
  - Reference
translation_of: Web/API/OffscreenCanvas/toBlob
---
<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>

<p><strong><code>OffscreenCanvas.convertToBlob()</code></strong> 메소드는 캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 생성합니다.</p>

<h2 id="구문">구문</h2>

<pre class="syntaxbox">Promise&lt;Blob&gt; OffscreenCanvas.convertToBlob(<var>options</var>);</pre>

<h3 id="매개_변수">매개 변수</h3>

<dl>
 <dt><code>options</code> {{optional_inline}}</dt>
 <dd>
 <p>객체를 {{domxref("Blob")}} 객체로 전환할 때 다양한 옵션을 줄 수 있습니다.</p>

 <pre class="brush: js">const blob = offscreenCanvas.convertToBlob({
  type: "image/jpeg",
  quality: 0.95
});</pre>

 <p>options:</p>

 <ul>
  <li><strong><code>type</code></strong>: 이미지 포맷을 가리키는 {{domxref("DOMString")}}. 상세 타입은 <code>image/png</code></li>
  <li><code><strong>quality</strong></code>: <code>type</code> 옵션이 <code>image/jpeg</code> 혹은 <code>image/webp</code> 일 때 이미지의 품질을 가리키는 <code>0</code>과 <code>1</code>사이의 {{jsxref("Number")}}. 이 매개 변수가 다른 값이라면, 이미지 품질의 기본 설정값이 적용됩니다. 다른 매개 변수들은 무시됩니다.</li>
 </ul>
 </dd>
</dl>

<h3 id="반환_값">반환 값</h3>

<p>캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 반환하는 {{jsxref("Promise")}}</p>

<h2 id="예시">예시</h2>

<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext("webgl");

// ... gl 컨텍스트를 이용해 무언가를 그립니다 ...

offscreen.convertToBlob().then(function(blob) {
  console.log(blob);
});

// Blob { size: 334, type: "image/png" }</pre>

<h2 id="상세">상세</h2>

<p>현재 작성되고 있는 중입니다: <a href="https://wiki.whatwg.org/wiki/OffscreenCanvas">OffscreenCanvas</a>.</p>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div>


<p>{{Compat("api.OffscreenCanvas.convertToBlob")}}</p>
</div>

<p> </p>

<h2 id="더_보기">더 보기</h2>

<ul>
 <li>이 메소드를 정의하는 인터페이스, {{domxref("OffscreenCanvas")}}.</li>
</ul>