Wie zeichne ein Foto mit der richtigen Ausrichtung in Canvas nach Aufnahme Foto mit Eingabe [Typ = "Datei"] im mobilen Webbrowser?

Ich bin eine einfache web-app im Handy, die es erlauben Besucher zu erfassen Fotos mit html5 input[type=file] - element. Dann werde ich ihn anzeigen auf der web-Vorschau, und dann können die Besucher wählen, um das Foto hochzuladen auf meinem server für einen anderen Zweck(sprich: hochladen auf FB)

Ich finde, ein problem auf die Ausrichtung der Fotos, wenn ich Fotos mit meinem iPhone und senkrecht halten.Das Foto ist in einer korrekten Ausrichtung in den tag.
Jedoch, wenn ich versuche es zu zeichnen in canvas-Bereich mithilfe der Methode drawImage () - Methode gezeichnet wird 90 Grad gedreht.

Habe ich versucht, auf Foto 4 Lagen, nur einer von Ihnen kann zeichnen ein richtiges Bild im canvas-Bereich, andere sind gedreht oder sogar umgedreht.

Gut, ich bin verwirrt, um die richtige Ausrichtung, um dieses problem zu beheben...
Danke für die Hilfe...

hier ist mein code, meist kopieren von MDN

<div class="container">
            <h1>Camera API</h1>

            <section class="main-content">
                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>

                <p>
                    <form method="post" enctype="multipart/form-data" action="index.php">
                        <input type="file" id="take-picture" name="image" accept="image/*">
                        <input type="hidden" name="action" value="submit">
                        <input type="submit" >
                    </form>
                </p>

                <h2>Preview:</h2>
                <div style="width:100%;max-width:320px;">
                    <img src="about:blank" alt="" id="show-picture" width="100%">
                </div>

                <p id="error"></p>
                <canvas id="c" width="640" height="480"></canvas>
            </section>

        </div>


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

                if (takePicture && showPicture) {
                    //Set events
                    takePicture.onchange = function (event) {
                        showPicture.onload = function(){
                            var canvas = document.querySelector("#c");
                            var ctx = canvas.getContext("2d");
                            ctx.drawImage(showPicture,0,0,showPicture.width,showPicture.height);
                        }
                        //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);
                                }
                                catch (e) {
                                    //Display error message
                                    var error = document.querySelector("#error");
                                    if (error) {
                                        error.innerHTML = "Neither createObjectURL or FileReader are supported";
                                    }
                                }
                            }
                        }
                    };
                }
            })();
        </script>

InformationsquelleAutor der Frage Rock Yip | 2013-10-19