大容量の画像をbase64変換後、canvasにdrawImageしても失敗する（iOS環境）

インラインSVGを画像に変換したい時、xlink:hrefで呼び出したimageタグは事前にbase64に変換しておかないと失敗します。

なので、SVGタグに含まれる「xlink:href」をbase64に変換した後、SVGタグを画像化する処理を書いたのですが…。

大容量(1.5MBほど)の画像を取り扱う時、iOS環境に限り、canvasにdrawImageしても画像が表示されません。

html
1<input type="button" value="クリック" id="svgtoimage" />
2<canvas id="canvas" width="1000" height="1000"></canvas>
3
4<script>
5(function(){
6
7	//画像URLをbase64に変換する関数
8	function toBase64Url(url, callback){
9		var xhr = new XMLHttpRequest();
10		xhr.onload = function(){
11			var reader = new FileReader();
12			reader.onloadend = function(){
13				callback(reader.result);
14			}
15			reader.readAsDataURL(xhr.response);
16		};
17		xhr.open('GET', url);
18		xhr.responseType = 'blob';
19		xhr.send();
20	}
21	
22	//事前に画像をbase64にエンコードしておく	
23	var encode = '';
24	
25	//大容量(1.6MB)の画像URLは、サンプルのこちらの画像で検証できます↓
26	//http://www.cor-art.com/best/tenkei/down/SD002.JPG
27	toBase64Url('大容量の画像URL', function(base64Url){
28		encode = base64Url;
29		console.log(encode);
30	});
31	
32	//ボタンクリックでインラインSVGを画像化
33	document.getElementById("svgtoimage").onclick = function(){
34		var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000"><image xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="1000" height="1000" xlink:href="' + encode + '" /></svg>';
35	
36		//canvasを取得
37		var canvas = document.querySelector("#canvas");
38		canvas.width = 1000;
39		canvas.height = 1000;		
40		var ctx = canvas.getContext("2d");
41		ctx.clearRect(0, 0, 1000, 1000);
42		
43		//画像要素を生成
44		var image = new Image;
45		image.addEventListener("load", function(){
46			//ロード成功時、drawImage ここでencodeした画像がdrawImageで描画されていない時がある
47			ctx.drawImage(image, 0, 0, 1000, 1000);
48			//canvasに描画後、さらに画像に変換する
49			//dataが7桁(1874830)の場合は成功
50			//dataが5桁(23534)の場合は失敗
51			alert( canvas.toDataURL("image/png").length );
52		});
53		
54		//インラインSVGをbase64に変換し、生成した画像要素のsrcに充てる⇒↑のロード処理
55		image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svg)));
56	}
57}());
58</script>
59