[javascript] मोबाइल वेब ब्राउज़र में इनपुट [type = 'file'] का उपयोग कर फोटो कैप्चर करने के बाद कैनवास में सही अभिविन्यास के साथ फोटो कैसे आकर्षित करें?



Answers

बेन के महान उत्तर ने मुझे सही दिशा में इंगित किया लेकिन जहां तक ​​मैं वास्तविक रोटेशन बता सकता हूं गलत है (कम से कम वे मेरे लिए थे) और सभी संभावित मामलों को शामिल नहीं करते हैं। नीचे दिया गया समाधान मेरे लिए काम किया। यह जावास्क्रिप्ट-लोड-छवि लाइब्रेरी में पाया गया है (जिसे मैंने इस महान SO प्रश्न के माध्यम से पाया) पर आधारित है। ध्यान दें कि मुझे कैनवास संदर्भ को केंद्र में भी अनुवाद करना पड़ा क्योंकि यह घूर्णन के दौरान ऊपरी बाएं कोने से निकलता है)।

fileReader.onloadend = function() {

    var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

    switch(exif.Orientation){

        case 2:
            // horizontal flip
            ctx.translate(canvas.width, 0);
            ctx.scale(-1, 1);
            break;
        case 3:
            // 180° rotate left
            ctx.translate(canvas.width, canvas.height);
            ctx.rotate(Math.PI);
            break;
        case 4:
            // vertical flip
            ctx.translate(0, canvas.height);
            ctx.scale(1, -1);
            break;
        case 5:
            // vertical flip + 90 rotate right
            ctx.rotate(0.5 * Math.PI);
            ctx.scale(1, -1);
            break;
        case 6:
            // 90° rotate right
            ctx.rotate(0.5 * Math.PI);
            ctx.translate(0, -canvas.height);
            break;
        case 7:
            // horizontal flip + 90 rotate right
            ctx.rotate(0.5 * Math.PI);
            ctx.translate(canvas.width, -canvas.height);
            ctx.scale(-1, 1);
            break;
        case 8:
            // 90° rotate left
            ctx.rotate(-0.5 * Math.PI);
            ctx.translate(-canvas.width, 0);
            break;


    }
};
Question

मैं मोबाइल में एक साधारण वेब ऐप बना रहा हूं जो एचटीएमएल 5 इनपुट [टाइप = फाइल] तत्व का उपयोग करके विज़िटर को फोटो कैप्चर करने की अनुमति देता है। फिर मैं पूर्वावलोकन के लिए इसे वेब पर प्रदर्शित करूंगा, और फिर विज़िटर अन्य प्रयोजनों के लिए मेरे सर्वर पर फोटो अपलोड करना चुन सकता है (यानी: एफबी पर अपलोड करें)

जब मैं अपने आईफोन का उपयोग करके फोटो लेता हूं और लंबवत पकड़ता हूं तो मुझे तस्वीर के अभिविन्यास पर एक समस्या मिलती है। फोटो टैग में सही अभिविन्यास में है। हालांकि, जब मैं drawImage () विधि का उपयोग करके इसे कैनवास में खींचने की कोशिश करता हूं, तो यह 90 डिग्री घुमाया जाता है।

मैंने 4 ओरिएंटेशन में फोटो लेने की कोशिश की है, उनमें से केवल एक कैनवास में एक सही छवि खींच सकती है, अन्य घुमाए गए हैं या यहां तक ​​कि ऊपर की ओर फिसल गए हैं।

खैर, मैं इस समस्या को ठीक करने के लिए सही अभिविन्यास प्राप्त करने के लिए उलझन में हूं ... मदद के लिए धन्यवाद ...

यहां मेरा कोड है, ज्यादातर एमडीएन से कॉपी करें

<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>



अगर आप exif.js का उपयोग कर ओरिएंटेशन टैग चाहते हैं:

EXIF.getData(file, function () {
    alert(this.exifdata.Orientation);
});

मेरे परीक्षणों में, आईओएस कैमरा केवल 1,3,6 या 8 लौटाता है।




Related