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
|
---
title: HTMLCanvasElement.toDataURL()
slug: Web/API/HTMLCanvasElement/toDataURL
translation_of: Web/API/HTMLCanvasElement/toDataURL
---
<div>
<div>
<div>{{APIRef("Canvas API")}}</div>
</div>
</div>
<p><strong><code>HTMLCanvasElement.toDataURL()</code></strong> 方法返回一个包含图片展示的 <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> 。可以使用 <code>type</code> 参数其类型，默认为 <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> 格式。图片的分辨率为96dpi。</p>
<ul>
<li>如果画布的高度或宽度是0，那么会返回字符串“<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="Syntax" name="Syntax">语法</h2>
<pre class="syntaxbox notranslate"><var><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>);</var>
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>type</code> {{optional_inline}}</dt>
<dd>图片格式，默认为 <code>image/png</code></dd>
<dt><code>encoderOptions</code> {{optional_inline}}</dt>
<dd>在指定图片格式为 <code>image/jpeg 或</code> <code>image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量</code>。如果超出取值范围，将会使用默认值 <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>
<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="设置jpegs图片的质量">设置jpegs图片的质量</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" name="Example:_Dynamically_change_images">示例：动态更改图片</h3>
<p>可以使用鼠标事件来动态改变图片（这个例子中改变图片灰度）。</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="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</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="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p>
<div id="compat-desktop"></div>
<h2 id="See_Also" name="See_Also">参考</h2>
<ul>
<li>定义接口，{{domxref("HTMLCanvasElement")}}</li>
<li><a href="/en-US/docs/Web/HTTP">HTTP</a>引用中的<a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a></li>
</ul>
|
