[1] [CODE(DOMi)@en[HTMLCanvasElement]] [[インターフェイス]]の
[CODE(DOMm)@en[[[toDataURL]]]] [[メソッド]]は、 [CODE(URI)@en[[[data:]]]]
[[URL]] による表現を返します。

* 画像形式

[16] 
[[引数]]によって[[画像形式]]を指定できます。

[17] 
省略された場合の[[既定値]]は [[PNG]] ([CODE(MIME)@en[image/png]])
です。 [[PNG]] 出力は、必ず[[実装]]しなければならないことになっています。

[18] 
[[JPEG]] [[JFIF]] ([CODE(MIME)@en[image/jpeg]])
を指定することもできます。[[実装]]は必須とはなっていませんが、
多くの [[Webブラウザー]]は対応しています。

[19] [[写真]]を扱う [[Webアプリケーション]]が [[JPEG]]
と指定していることがあります。最悪 [[PNG]] でも良いのかもしれませんが、
[[JPEG]] の方が[[ファイルサイズ]]その他の都合は良さそうです。

[20] [[JPEG]] にすると[[透過色]]は[[不透明]]になります。

* 濫用

-[24] 
[CITE@ja[ゆみやさんはTwitterを使っています: 「超・evilなスクレイピング対策として、canvasに突っ込む画像を配信する際にわざとCORS違反すると、[[canvas]]が「汚染」されてtoDataURL()が使えなくなるという手法がある https://t.co/gnSEry083G」 / Twitter]], [TIME[午後10:25 · 2023年5月28日][2023-05-28T13:25:49.000Z]], [TIME[2023-05-30T03:32:21.000Z]] <https://twitter.com/stepney141/status/1662812420333764610>
--[25] [CITE@ja[フシハラさんはTwitterを使っています: 「[[ジャンプ+]]でやってみたけど"Tainted canvases may not be exported."で弾かれた。これは対策済みという理解でいいのかな? CORSポリシーで別ドメインの画像を配置するとこうなるらしい。意図的にやればちょっと強力だな。 devtoolでチョイチョイ程度ではこれは回避出来無さそう https://t.co/XSu2UH3GY2」 / Twitter]], [TIME[午前3:24 · 2023年5月29日][2023-05-28T18:24:09.000Z]], [TIME[2023-05-30T03:32:21.000Z]] <https://twitter.com/Fushihara/status/1662887499625267200>

[26] 
悪質な人には何の対策にもならず、一般利用者には不便になるだけの「対策」。[[技術者倫理]]はどうなっているのか。


* 歴史

[3] 元々 [[Hixie]] は [CODE(DOMa)@en[[[src]]]] [[IDL属性]]が [CODE(URI)@en[[[data:]]]]
[[URL]] を返す形で [[Web Applications 1.0]] に規定しましたが、 [[Bugzilla]]
での議論を踏まえて [CODE(DOMm)@en[[[toDataURL]]]] [[メソッド]]となりました。
[WEAK[(当初の [[Hixie]] の案では [CODE(DOMi)@en[[[HTMLCanvasElement]]]] は [CODE(DOMi)@en[[[HTMLImageElement]]]] を[[継承]]していました。今はしていません。)]]

[2] [CITE[Bug 291218 – Canvas .toDataURL() method (was: src attribute)]]
( ([TIME[2011-01-20 00:01:18 +09:00]] 版))
<https://bugzilla.mozilla.org/show_bug.cgi?id=291218>

[4] この議論を経て [[Gecko]] に実装されたのが2005年4月以降のことでした。

[5] ちょうど2005年3月に [CODE(HTML)@en[[[<input type=uri>]]]] が 
[CODE(HTML)@en[[[<input type=url>]]]] に改名されています。それと関係あるのか無いのか、
>>2 では [[URI]] にしようという案は出ていません。

[7] [[Web Applications 1.0]] 仕様にはじめて入ったのは2005年4月21日版です。

;; <http://replay.waybackmachine.org/20050422013652/http://whatwg.org/specs/web-apps/current-work/#todataurl>



[6] 
[[Android]] の [[Webブラウザー]]はなぜか常に [CODE(URI)@en[[[data:,]]]] を返します。
[[iPhone]] の [[Mobile Safari]] では問題ないので、 [[WebKit]]
の不具合ではなさそうです。 [TIME[2011-01-19T15:09:24.600Z]]

[8] >>6 は [[Android]] 版のブラウザが古い [[WebKit]] から派生しているためらしいです。

[9] [[ニンテンドー3DS]] の[[インターネットブラウザー]]でも正しく動作しない模様です。

[FIG(quote)[
[FIGCAPTION[
[10] [CITE@en-US[HTMLCanvasElement.toDataURL() - Web API Interfaces | MDN]]
([TIME[2015-06-21 09:00:07 +09:00]] 版)
<https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL>
]FIGCAPTION]

> Chrome also supports the image/webp type.

]FIG]


[11] [CITE[Issue 170565 - chromium - ''''''[''''''Canvas'''''']'''''' toDataURL does not export WEBP with alpha channel - An open-source project to help move the web forward. - Google Project Hosting]]
([TIME[2015-06-24 00:57:24 +09:00]] 版)
<https://code.google.com/p/chromium/issues/detail?id=170565>

[FIG(quote)[
[FIGCAPTION[
[12] [CITE@en[Safari 4.0]]
([TIME[2015-11-04 22:55:25 +09:00]] 版)
<https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_4_0.html#//apple_ref/doc/uid/TP40014305-CH4-SW18>
]FIGCAPTION]

> WebKit now implements the HTML5 canvas pixel manipulation standard along with the toDataURL() method standard.

]FIG]


[13] [CITE@en[Use USVString for all URLs]]
( ([[domenic]]著, [TIME[2016-05-20 22:02:29 +09:00]]))
<https://github.com/whatwg/html/commit/018b983b77b2cd908f6d00100e7e0abe893dd2c3>

[14] [CITE@en[Make quality an explicit argument for canvas image conversion]]
([[domenic]]著, [TIME[2016-08-27 03:42:08 +09:00]])
<https://github.com/whatwg/html/commit/7d25c4c2452b705220417ffb951c9b89e04ba50b>

[15] [CITE@en[Define encoder failure actions for toDataURL/toBlob]]
([[junov]]著, [TIME[2017-02-11 23:42:36 +09:00]])
<https://github.com/whatwg/html/commit/93c0a157dbe238582584a0e8c2f621958bb39a45>

[21] [CITE@en[Give toDataURL() and toBlob() default parameter values]]
([[GloverDonovan]]著, [TIME[2019-01-31 05:57:14 +09:00]])
<https://github.com/whatwg/html/commit/b799322188cf33c7caef336bb27fe9223d995b24>

[22] [CITE@en[Give <canvas>'s toDataURL() and toBlob() default parameter values · Issue #3430 · whatwg/html]]
([TIME[2020-08-31 18:22:17 +09:00]])
<https://github.com/whatwg/html/issues/3430>

[23] [CITE@en[Give toDataURL() and toBlob() default parameter values by GloverDonovan · Pull Request #3477 · whatwg/html]]
([TIME[2020-08-31 18:22:41 +09:00]])
<https://github.com/whatwg/html/pull/3477>