相机点击某些Android设备后图像不显示

时间:2015-03-21 06:38:59

标签: input

我在我的网站上使用相机,在手机浏览器中我遇到了一些问题,在点击相机后的某些手机浏览器中,图片未显示,其显示空白图片图标。

你可以找出我代码中的问题吗?

(function () {
    var takePicture = document.querySelector("#take-picture"),
        showPicture = document.querySelector("#show-picture");

    if (takePicture && showPicture) {
        // Set events
        takePicture.onchange = function (event) {
            // Get a reference to the taken picture or chosen file
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    // Get window.URL object
                    var URL = window.URL || window.webkitURL;

                    // Create ObjectURL
                    var imgURL = URL.createObjectURL(file);

                    // Set img src to ObjectURL
                    showPicture.src = imgURL;

                    // Revoke ObjectURL
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // Fallback if createObjectURL is not supported
                        var fileReader = new FileReader();
                        fileReader.onload = function (event) {
                            showPicture.src = event.target.result;
                        };
                       // fileReader.readAsDataURL(file);
                       fileReader.readAsBinaryString(file);
                       var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

                                    switch(exif.Orientation){

                                       case 8:
                                           showPicture.rotate(90*Math.PI/180);
                                           break;
                                       case 3:
                                           showPicture.rotate(180*Math.PI/180);
                                           break;
                                       case 6:
                                           showPicture.rotate(-90*Math.PI/180);
                                           break;
                                    }
                    }
                    catch (e) {
                        // Display error message
                        var error = document.querySelector("#error");
                        if (error) {
                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();
<input type="file" id="take-picture" accept="image/*">

  <div id="mobilecameraOutput"> <img src="about:blank" alt="" id="show-picture" /></div>

0 个答案:

没有答案