コンテンツへスキップ

iOS8.0で、カメラ画像をFileReaderで読み込もうとするとエラー？

by : 2014/09/18

2014/10/1追記： iOS 8.0.2で、下記の問題は解決されました。

今日から配布が始まったiOS8.0ですが、<input type=”file”>（HTML Media Capture）とFileReaderやURL.createObjectURL()を組み合わせてカメラやカメラロールの画像を読み込もうとするとエラーにな…る…気がします。
（iOS7.1.2ではFileReaderを使ってふつーにData URLを取得し、Imageのsrcに入れたりできていました。PCのChrome37でも、下記のコードで画像を表示できています。）

ちなみに、Macにつないで開発者ツールを開くと、FileReaderでreadAsDataURL()するとNOT_READABLE_ERRが出ています。
また、Chrome for iOS (37.0.2062.52)で下記ページを動かすと、inputボタンを押して「写真を撮る」を押した瞬間に100%落ちます。

コード例：

<!doctype html>
<html>
<body>
	<input id="imgInput" type="file" accept="image/*">
	<img id="photoImg" style="width: 300px; height: 300px">

	<script>
		var imgInput = document.getElementById('imgInput');
		imgInput.addEventListener('change', function(event) {
			var file = this.files[0];
			//alertすると、それらしきURLは生成されている模様
			var blobUrl = URL.createObjectURL(file);

			var photoImg = document.getElementById('photoImg');
			photoImg.src = blobUrl;
		});
	</script>
</body>
</html>
  • acceptをimage/jpeg、image/pngのように指定してもダメでした
  • inputタグにcapture属性を付けてもダメでした
  • 上記はBlob URLを使った例ですが、FileReaderでreadAsDataURL()してもダメでした
  • files.lengthは1と返ってきていて、fileは[object File]になっています
  • Mobile Safariのプロセスをkillしたりキャッシュを消したりしてもダメでした

私がミスしているだけならいいんですが、iOS8.0のバグで動かないとかだと、痛い・・・。
とりあえずメモ。

HTML5企業Webシステムのための開発プラットフォーム

From → Memo

3件のコメント
  1. Jeffrey Jensen permalink

    I am also seeing this issue. This is the only article I could find about the issue. Let me know if you find a solution!

コメントは受け付けていません。

«
»
%d人のブロガーが「いいね」をつけました。