<input type="file" accept="image/*"/>
タグを使用して、モバイル デバイスから写真をアップロードするための Web ページに取り組んでいます。これは、iphone と android の chrome で美しく動作しますが、問題が発生しているのは、標準の android ブラウザーです。
この問題は、ギャラリーからファイルを選択するときに発生します (カメラを使用して写真を撮る場合は正常に機能します)。さらに絞り込んで、ストック ブラウザのギャラリーから取得したデータの MIME タイプが利用できないことを確認しました (下の写真は、読み込まれているデータ URL の最初の 100 文字を示しています。目標は JPEG を強制することでした)。 , but without the MIME type we cannot know for sure how to fix this. 画像がどのようにレンダリングされるかについては、以下のコードを参照してください。
タイプなしでどのように画像をレンダリングできますか? いっそのこと、型が標準の Android ブラウザーで利用できない理由を誰か知っていますか?
編集
まず、これらは同じ画像ではありません。ほぼ同時に撮影されたものであり、それは問題ではありません。データが異なるのはそのためです (MIME タイプは、ストック ブラウザーのどの画像にも表示されないため、問題ではありません。 .
アップデート
MIME タイプが問題であることを確認し、イメージ/jpeg を chrome 上のストック ブラウザに挿入しました。残念ながら、それが jpeg になることを保証する方法がないため、実際にはそのようにすることはできません。
_readInputFile: function (file, index) {
var w = this, o = this.options;
try {
var fileReader = new FileReader();
fileReader.onerror = function (event) {
alert(w._translate("There was a problem opening the selected file. For mobile devices, some files created by third-party applications (those that did not ship with the device) may not be standard and cannot be used."))
$('#loadingDots').remove();
return false;
}
fileReader.onload = function (event) {
var data = event.target.result;
//alert(data.substring(0,100));
//var mimeType = data.split(":")[1].split(";")[0];
alert("Load Image"); //I get to this point
$('#' + w.disp.idPrefix + 'hiddenImages').append($('<img />', {
src: data,
id: "dummyImg" + index,
load: function(){
var width = dummy.width();
var height = dummy.height();
$('#dummyImg' + index).remove();
alert("Render"); // I don't get here
var resized = w._resizeAndRenderImage(data, null, null, biOSBugFixRequired, skewRatio, width, height);
alert("Image Rendered"); // I don't get here
}
}));
}
fileReader.readAsDataURL(file);
}
catch (e) {
}
}
クロム
株式ブラウザ