だいたいそれでいいんじゃないの

つれつれなるkixixixixiの技術的なストック。http://reload.co.jp

Android browserでFile APIを使って画像を読み込んで表示させる

スマホ向けサイトでユーザが画像投稿する際に画像のプレビューを表示させる機能の実装する機会がありました。
FileReaderを使って読み込む仕組みにしたんですが、iOSやPCでは動くのにAndroidでは動かない。。。
AndroidでもChromeなら動くのですが、標準のAndroid browserではうごかない。
これではガワアプリのWebviewでは動かないので困る。
よく見てみるとロードはできているみたいだが、描画ができていない様子。
ロードした内容をよく見てみると、base64は読み込めるけど、typeの記述がない!
ということで無理やりjpegの文字列を挿入してあげると表示できた。
多分typeを判別させて付与させてあげないといけないし、無理矢理すぎる実装なのでいい感じにtypeを付与してくれる機構があるはず。
だけど、とりあえず問題の原因がわかったので備忘録として。

$(function(){
    $('input[name="thumbnail"]').on('change', function(e){
        var f = e.target.files[0];
            var reader = new FileReader();
            reader.onload = (function(event){
            var str = event.target.result;
            if(str.indexOf('data:image'))
            {
                str = str.substr(0, 5) + 'image/jpeg;' + str.substr(5, event.target.result.length -5);
            }
            var img = document.createElement("img");
                img.src = str;
                $('img#preview').css('background-image', 'url('+str+')');
            });
            reader.readAsDataURL(f);
    });
});

以上!