iOSのカメラアプリで撮影を行うとSafari上で「問題が起きたため、このWebページを再度読み込みました。」と表示されて、ページの再読み込みが発生し撮影した画像が消えてしまう。

###前提・実現したいこと
使用機種：iPad Air 2
iOSバージョン：10.3.2
使用ブラウザ:Safari、Chrome 59

ページの再読み込みが発生しないようにしたい

###発生している問題・エラーメッセージ
問題が起きたため、このWebページを再度読み込みました。

###試したこと
[1]該当ページを画像を10枚撮影するごとに再読み込み
[2]iPadを半日使用したら再起動

###補足情報(言語/FW/ツール等のバージョンなど)
PHPとJavascriptにて実際にプログラムを書き、
PHPで記述されたHTMLページのボタンからJavascriptの関数"upload"を複数回(一回～数十回)実行すると、エラーメッセージが表示されて撮影した画像が消えてしまいます。
問題が発生するタイミングは不定期で規則性はありません。
一回撮影しただけで発生することもありますし、何十回撮影しても発生しないこともあります。

問題が発生する箇所は決まって、input fileボタンを押しカメラアプリが起動してシャッターを押した直後です。

###読み込み元ソース

PHP
1
2<!DOCTYPE html>
3<html>
4	<head>
5		<title></title>
6		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7		<meta http-equiv="Content-Style-Type" content="text/css">
8		<link href="./css/gazouTouroku.css" rel="stylesheet" type="text/css" />
9		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
10		<script type="text/javascript" src="./js/utility.js"></script>
11		<script type="text/javascript" src="./js/gazouTouroku.js"></script>
12	</head>
13	<body bgcolor="#ffffee">
14		<div class="infomation_label margin_new_item">
15			<input type="button" value="閉じる" onClick="window.open('about:blank','_self').close()">
16		</div>
17		<div class="margin_new_item">
18			<span class="font_bold"></span>
19		</div>
20		<table border="0" cellspacing="0" cellpadding="0" class="list">
21			<tr>
22				<th colspan="5"></th>
23			</tr>
24			<?php
25				for( $i=0; $i<30; $i++ ) {
26			?>
27			<tr>
28				<td class="image_view_area valign_top">
29					<div id="line_status_pictures<?php echo $j; ?>">
30						<span class="list_item_bg_color font_type_large">
31							<?php
32								echo $j;
33							?>
34						</span>
35						<span class="subject_readme">
36							<?php
37								if($j == 19) {
38									echo "****";
39								} else if($j == 20) {
40									echo "*****";
41								}
42							?>
43						</span><br>
44						<input id="pictures<?php echo $j; ?>" type="file" accept="image/*" size="140" onChange="upload('<?php echo $a; ?>', '<?php echo $j; ?>');"><br>
45						<span id="status_pictures<?php echo $j; ?>"></span>&#32;&#32;
46						<input id="resend<?php echo $j; ?>" type="button" size="140" value="再送信" onClick="upload('<?php echo $a; ?>', '<?php echo $j; ?>');" style="display: none;"><br>
47						<?php
48							echo $imgTag;
49						?>
50					</div>
51				</td>
52				<?php
53					}
54				?>
55			</tr>
56			<?php
57				}
58			?>
59		</table>
60		<div id="dst"></div>
61	</body>
62</html>
63

###定義関数

Javascript
1
2/**
3 * dataURL画像情報からExifのOrientation(回転情報)を取得する
4 * @param
5 * imgDataURL: 画像データを示すdataURL
6 */
7function getOrientation(imgDataURL){
8	var byteString = atob(imgDataURL.split(',')[1]);
9	var orientation = byteStringToOrientation(byteString);
10	return orientation;
11
12	function byteStringToOrientation(img){
13		var head = 0;
14		var orientation;
15		while (1){
16			if (img.charCodeAt(head) == 255 & img.charCodeAt(head + 1) == 218) {break;}
17			if (img.charCodeAt(head) == 255 & img.charCodeAt(head + 1) == 216) {
18				head += 2;
19			}
20			else {
21				var length = img.charCodeAt(head + 2) * 256 + img.charCodeAt(head + 3);
22				var endPoint = head + length + 2;
23				if (img.charCodeAt(head) == 255 & img.charCodeAt(head + 1) == 225) {
24					var segment = img.slice(head, endPoint);
25					var bigEndian = segment.charCodeAt(10) == 77;
26					var count;
27					if (bigEndian) {
28						count = segment.charCodeAt(18) * 256 + segment.charCodeAt(19);
29					} else {
30						count = segment.charCodeAt(18) + segment.charCodeAt(19) * 256;
31					}
32					for (i=0; i < count; i++){
33						var field = segment.slice(20 + 12 * i, 32 + 12 * i);
34						if ((bigEndian && field.charCodeAt(1) == 18) || (!bigEndian && field.charCodeAt(0) == 18)) {
35							orientation = bigEndian ? field.charCodeAt(9) : field.charCodeAt(8);
36						}
37					}
38					break;
39				}
40				head = endPoint;
41			}
42			if (head > img.length){break;}
43		}
44		return orientation;
45	}
46}
47
48// 画像登録後、非同期で再読み込みするため、画像パスに付与するダミーの日付
49var dummyDate = new Date();
50
51/**
52 * 画像を読み込んでS3へアップロード
53 * @param
54 * a: *****
55 * b: *****
56 */
57function upload(a, b) {
58	// 画像ファイルを読み込むためのFileReaderオブジェクト
59	var reader = new FileReader();
60	// 画像サイズを取得するためのImageオブジェクト
61	var img = new Image();
62	
63	// 二重登録を防止するため登録中のファイル選択、再送信ボタンを無効化
64	changeButtonStatus(false, b);
65	// 枠内に送信状況を表示
66	
67	//POST送信を行う途中であることをユーザーに通知
68	
69	// 画像読み込み時に渡すプロパティ
70	reader.name = a + "," + b;
71	
72	// フォーム画像パラメータ
73	var photoParam;
74	
75	// Base64 画像データ(元画像)
76	var imgSrc;
77	
78	// Base64 画像データ(縮小済み画像)
79	var Base64Img;
80	
81	// 回転情報
82	var ori;
83	
84	// 画像サイズ
85	var width;
86	var height;
87	
88	// 画像縮小、および画像データ転送
89	img.onload = function() {
90		console.log("img complete");
91	
92		//画像サイズを取得
93		width = this.width;
94		height = this.height;
95		
96		Base64Img = scaleDownImage(img, imgSrc.length, width, height, ori);
97		
98		// 送信パラメータ設定
99		params = { 
100						action: 'post', 
101						car_id : photoParam[0],
102						img_no : photoParam[1],
103						image_base64 : Base64Img,
104						orientation : ori
105					}
106					
107		// Ajaxで画像送信
108		$.ajax({
109			url: 'send.php',
110			type:'post',
111			dataType: 'json',
112			data: params,
113			timeout: 10000,
114			cache: false
115		// 登録成功時
116		}).done(function(data) {
117			console.log(data);
118			
119			// POST送信成功時
120			if(data['is_success'] == true) {
121				// 画像URL、再読み込みするため末尾にダミーの日付を付与
122				var imageUrl = "*****" + data['response']['bucket_name']
123								+ "/images/" + data['response']['img_dir'] + photoParam[0] + "-" + photoParam[1] + ".jpg?" + dummyDate.getTime();
124				// 当該画像のaタグID
125				var imageTag = $("#image" + data['response']['img_no']);
126				// リンク先のURL設定
127				imageTag.attr("href", imageUrl);
128				// 画像パス設定
129				imageTag.html('<img src="' + imageUrl + '" height="120" border="0">');
130				// 枠内に送信状況を表示
131
132				//POST送信に成功したことをユーザーに通知
133			
134			// POST送信失敗時
135			} else {
136				//POST送信に失敗したことをユーザーに通知
137			}
138			// 送信ボタンを有効化
139			changeButtonStatus(true, b);
140		
141		// 画像送信失敗時
142		}).fail(function(jqXHR, textStatus, errorThrown) {
143			//POST送信に失敗したことをユーザーに通知
144			
145			// 送信ボタンを有効化
146			changeButtonStatus(true, b);		
147		});
148	}
149	
150	// 撮影画像データ読み込み成功時のイベントハンドラ
151	reader.onload = function(e) {
152		console.log("reader complete");
153		// src属性取得
154		imgSrc = e.target.result;
155		
156		// *****, *****を分解
157		photoParam = e.target.name.split(",");
158		
159		//回転情報を取得
160		ori = getOrientation(imgSrc);
161		// src属性にURLを設定。設定すると即座に非同期のリクエストが飛ぶ
162		img.src = imgSrc;
163	}
164	
165	// 画像ファイルをDataURLとして読み込み
166	reader.readAsDataURL($("#pictures" + b)[0].files[0]);
167}
168
169/**
170 * 画像の送信状況（枠色、メッセージ）を表示し、
171 * @param
172 * stauts: {
173 *  frameStatus: 送信状況のメッセージ
174 *  addClass: 表示したい送信状況のクラス名
175 *  removeClass: 削除したい送信状況のクラス名（複数の場合はスペースで区切る）
176 *  b: 画像番号
177 *  showResend: 再送信ボタン表示・非表示
178 * }
179 */
180function changeImageStatus(status) {
181	with(status) {
182		// 枠内に送信状況のメッセージを表示
183		$("#status_pictures" + b).html(frameStatus);
184		// 表示したい送信状況のクラス
185		$("#line_status_pictures" + b).addClass(addClass);
186		// 削除したい送信状況のクラス
187		$("#line_status_pictures" + b).removeClass(removeClass);
188		// 再送信ボタンの表示・非表示設定
189		$("#resend" + b).css("display", showResend);
190	}
191}
192
193/**
194 * 「ファイルを選択」ボタン、再送信ボタンの表示・非表示を変更する
195 * @param
196 * showFlag: 表示フラグ
197 * true: 表示、false: 非表示
198 * b: 画像番号
199 */
200function changeButtonStatus(showFlag, b) {
201	// 「ファイルを選択」ボタ
202	$("#pictures" + b).prop("disabled", !showFlag);
203	// 再送信ボタン
204	$("#resend" + b).prop("disabled", !showFlag);
205}
206
207/**
208 * 縦横比を判断して縮小
209 * @param
210 * image: Imageオブジェクト
211 * base64length: データサイズ
212 * width: 画像サイズ(幅)
213 * height: 画像サイズ(高さ)
214 * orientation: 画像回転情報 
215 */
216function scaleDownImage(image, base64length , width, height, orientation) {	
217	//回転情報が含まれていない
218	if(orientation==undefined){
219		console.log("PC");
220
221		//高さより幅が大きい画像
222		if(height < width ){
223			var scaleWidth = 960;
224			var scaleHeight = 960 / width * height;
225		}
226		//幅より高さが大きい画像
227		else {
228			var scaleWidth = 960;
229			var scaleHeight = 960 / height * width;
230		}
231	}
232	//回転情報が含まれている
233	else {
234		console.log("iPad");
235		
236		//高さより幅が大きい画像
237		if(height < width ){
238			var scaleWidth = 960;
239			var scaleHeight = 960 / width * height;
240		}
241		//幅より高さが大きい画像
242		else {
243			var scaleWidth = 960 / height * width;
244			var scaleHeight = 960;
245		}
246	}
247	
248	if(1398101 < base64length) {
249		//canvas生成
250		var canvas = $('<canvas></canvas>');
251		var context = canvas[0].getContext('2d');
252		canvas[0].width = Math.floor(scaleWidth);
253		canvas[0].height = Math.floor(scaleHeight);
254		
255		//画像縮小
256		context.drawImage(image, 0, 0, image.width, image.height, 0, 0, scaleWidth, scaleHeight);
257	}
258	else {
259		//canvas生成
260		var canvas = $('<canvas></canvas>');
261		var context = canvas[0].getContext('2d');
262		canvas[0].width = image.width;
263		canvas[0].height = image.height;
264		
265		//画像縮小
266		context.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
267	}
268	
269	return canvas[0].toDataURL();
270}
271

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

回答1件

参考になるかわかりませんが
Iphoneで撮影した画像をCANVASに描画するプラグインを作成した時よく出ていました
メガピクセルの画像で重いのだと出やすかったような？
やった事
１．サファリのonloadの書き方が他と少し違うのを修正
２．Tryを使用しエラー表示
Iphone safariはエラーに弱い気がする
３．処理の分散化、軽量化

エラーが出ていた時のコードを保存してないので
なぜエラーがでなくなったのかは不明です

投稿2017/08/02 15:23

退会済みユーザー

総合スコア0