canvasで描画したデータをtoDataURL()メソッドで<img>のsrc属性に指定後、画像の保存ができない！

canvasで描画したデータをtoDataURL()メソッドを使って、<img>のsrc属性に指定しています。

Andoroidの標準ブラウザで、その<img>を長押しして画像の保存しようと思っても、ブラウザが落ちてしまい、保存できません。

解決策はありますでしょうか？

何かご存知のかた、ご教授いただきたいです。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

Androidの標準ブラウザでは未検証ですが、
使用可能であればBlob URL Schemeをお試し下さい。

canvasのtoDataURLメソッドから取得した文字列をBlobに変換して、BlobのURLを作成します。
一時的に作成した画像への参照となる為、URLの文字列も短くなります。
これにより、ブラウザのクラッシュを回避できるかもしれません。

簡単な使用例は以下の通りです。
未対応のブラウザでは動作しません。

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5		<title>Canvas -&gt; Image</title>
6		<script type="text/javascript">
7			function init() {
8				var canvas = document.getElementById("base");
9				var context = canvas.getContext("2d");
10				context.lineWidth = 10;
11				context.strokeRect(0, 0, 40, 40);
12
13				var data = canvas.toDataURL("image/png");
14				document.getElementById("data").src = data;
15
16				var bin = atob(data.split(',')[1]);
17				var buffer = new Uint8Array(bin.length);
18				for (var i = 0; i < bin.length; i++) {
19					buffer[i] = bin.charCodeAt(i);
20				}
21				document.getElementById("blob").src = window.URL.createObjectURL(new Blob([buffer], {type:"image/png"}));
22			}
23		</script>
24	</head>
25	<body onload="init();">
26		<h1>Canvas -&gt; Image</h1>
27		<h2>Canvas</h2>
28		<p>
29			<canvas id="base" width="40" height="40"></canvas>
30		</p>
31		<h2>Data URI Scheme</h2>
32		<p>
33			<img id="data" src="">
34		</p>
35		<h2>Blob URL Scheme</h2>
36		<p>
37			<img id="blob" src="">
38		</p>
39	</body>
40</html>