画像形式

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

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

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

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

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

濫用

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

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

歴史

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

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

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

[5] ちょうど2005年3月に <input type=uri> が <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ブラウザーはなぜか常に data:, を返します。 iPhone の Mobile Safari では問題ないので、 WebKit の不具合ではなさそうです。 2011-01-19T15:09:24.600Z

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

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

[10]

HTMLCanvasElement.toDataURL() - Web API Interfaces | MDN (2015-06-21 09:00:07 +09:00 版) https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Chrome also supports the image/webp type.

[11] 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 (2015-06-24 00:57:24 +09:00 版) https://code.google.com/p/chromium/issues/detail?id=170565

[12]

Safari 4.0 (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

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

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

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

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

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

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

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