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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: HTMLCanvasElement.toDataURL()
slug: Web/API/HTMLCanvasElement/toDataURL
translation_of: Web/API/HTMLCanvasElement/toDataURL
---
<div>{{APIRef("Canvas API")}}</div>
<p><strong><code>HTMLCanvasElement.toDataURL()</code></strong> メソッドは、 <code>type</code> パラメータ（デフォルトは<a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>形式）で指定される画像フォーマット形式の <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> を返すメソッドです。返り値となる画像の解像度は96 dpiです。</p>
<ul>
<li>キャンバスの幅か高さが、<code>0</code> もしくは <a href="/en-US/docs/Web/HTML/Element/canvas#Maximum_canvas_size">maximum canvas size</a> より大きい場合、文字列 <code>"data:,"</code>を返します。</li>
<li><code>image/png</code> 形式を指定したにもかかわらず返り値が <code>data:image/png</code> で始まる場合、要求された形式には対応していません。</li>
<li>Chrome は <code>image/webp</code> 形式に対応します。</li>
</ul>
<h2 id="構文">構文</h2>
<pre class="syntaxbox notranslate"><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>);
</pre>
<h3 id="パラメーター">パラメーター</h3>
<dl>
<dt><code>type</code> {{optional_inline}}</dt>
<dd>画像フォーマットを示す {{domxref("DOMString")}} 。 指定しなかった場合、デフォルトのフォーマット形式は <code>image/png</code> です。</dd>
<dt><code>encoderOptions</code> {{optional_inline}}</dt>
<dd><code>0</code> から <code>1</code> の間の {{jsxref("Number")}} で示す、 <code>image/jpeg</code> や <code>image/webp</code> のような非可逆圧縮を使う画像フォーマットの画質です。<br>
この引数がその他の値だった場合、デフォルトの画質が使われます。デフォルト値は <code>0.92</code> です。その他の引数は無視されます。</dd>
</dl>
<h3 id="戻り値">戻り値</h3>
<p>要求された<a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>を含む {{domxref("DOMString")}} 。</p>
<h3 id="例外">例外</h3>
<dl>
<dt><code>SecurityError</code></dt>
<dd>キャンバスのビットマップがorigin cleanではありません。少なくとも一部、ドキュメントがロードされたサイト以外のサイトからロードされた、またはロードされた可能性のあるコンテンツを含んでいます。（訳注：いわゆる「汚染されたキャンバス」の問題です。<a href="/ja/docs/Web/HTML/CORS_enabled_image">画像とキャンバスをオリジン間で利用できるようにする</a>もあわせて参照してください）</dd>
</dl>
<h2 id="例">例</h2>
<p>このような {{HTMLElement("canvas")}} 要素を用意します</p>
<pre class="brush: html notranslate"><canvas id="canvas" width="5" height="5"></canvas>
</pre>
<p>以下のコードによりキャンバスのData URLを取得できます。</p>
<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
</pre>
<h3 id="JPEGの画質を設定する">JPEGの画質を設定する</h3>
<pre class="brush: js notranslate">var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
</pre>
<h3 id="Example_Dynamically_change_images">Example: Dynamically change images</h3>
<p>You can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. color in this example):</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><img class="grayscale" src="myPicture.png" alt="Description of my picture" /></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js;highlight:[33] notranslate">window.addEventListener('load', removeColors);
function showColorImg() {
this.style.display = 'none';
this.nextSibling.style.display = 'inline';
}
function showGrayImg() {
this.previousSibling.style.display = 'inline';
this.style.display = 'none';
}
function removeColors() {
var aImages = document.getElementsByClassName('grayscale'),
nImgsLen = aImages.length,
oCanvas = document.createElement('canvas'),
oCtx = oCanvas.getContext('2d');
for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
oColorImg = aImages[nImgId];
nWidth = oColorImg.offsetWidth;
nHeight = oColorImg.offsetHeight;
oCanvas.width = nWidth;
oCanvas.height = nHeight;
oCtx.drawImage(oColorImg, 0, 0);
oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
aPix = oImgData.data;
nPixLen = aPix.length;
for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
}
oCtx.putImageData(oImgData, 0, 0);
oGrayImg = new Image();
oGrayImg.src = oCanvas.toDataURL();
oGrayImg.onmouseover = showColorImg;
oColorImg.onmouseout = showGrayImg;
oCtx.clearRect(0, 0, nWidth, nHeight);
oColorImg.style.display = "none";
oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
}
}</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
<li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> in the <a href="/en-US/docs/Web/HTTP">HTTP</a> reference.</li>
</ul>
|
