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




3 Answers

आपको एक्सिफ डेटा को पढ़ने और जांचने की आवश्यकता होगी कि क्या exif.Orientation निम्न में से एक है:

fileReader.onloadend = function() {

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

    switch(exif.Orientation){

       case 8:
           ctx.rotate(90*Math.PI/180);
           break;
       case 3:
           ctx.rotate(180*Math.PI/180);
           break;
       case 6:
           ctx.rotate(-90*Math.PI/180);
           break;


    }
};

मैं मोबाइल में एक साधारण वेब ऐप बना रहा हूं जो एचटीएमएल 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() {
  var orientation = EXIF.getTag(this,"Orientation");
  var can = document.createElement("canvas");
  var ctx = can.getContext('2d');
  var thisImage = new Image;
  thisImage.onload = function() {
    can.width  = thisImage.width;
    can.height = thisImage.height;
    ctx.save();
    var width  = can.width;  var styleWidth  = can.style.width;
    var height = can.height; var styleHeight = can.style.height;
    if (orientation) {
      if (orientation > 4) {
        can.width  = height; can.style.width  = styleHeight;
        can.height = width;  can.style.height = styleWidth;
      }
      switch (orientation) {
      case 2: ctx.translate(width, 0);     ctx.scale(-1,1); break;
      case 3: ctx.translate(width,height); ctx.rotate(Math.PI); break;
      case 4: ctx.translate(0,height);     ctx.scale(1,-1); break;
      case 5: ctx.rotate(0.5 * Math.PI);   ctx.scale(1,-1); break;
      case 6: ctx.rotate(0.5 * Math.PI);   ctx.translate(0,-height); break;
      case 7: ctx.rotate(0.5 * Math.PI);   ctx.translate(width,-height); ctx.scale(-1,1); break;
      case 8: ctx.rotate(-0.5 * Math.PI);  ctx.translate(-width,0); break;
      }
    }

    ctx.drawImage(thisImage,0,0);
    ctx.restore();
    var dataURL = can.toDataURL();

    // at this point you can save the image away to your back-end using 'dataURL'
  }

  // now trigger the onload function by setting the src to your HTML5 file object (called 'file' here)
  thisImage.src = URL.createObjectURL(file);

});

अभिविन्यास ब्लॉक (अनुवाद और घुमाव का उपयोग करके) को https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-orientation.js से कॉपी किया गया है और इसलिए मैं इसे अच्छी तरह से साबित करता हूं। यह निश्चित रूप से मेरे लिए पूरी तरह से काम किया, जबकि अन्य दृष्टिकोण नहीं था।




आपके उत्तरों के आधार पर, मैंने आईफोन फोटो को सही दिशा में घुमाने के लिए एक फ़ंक्शन बनाया है।
बस इनपुट.फाइल [0] और वैकल्पिक अधिकतम चौड़ाई या ऊंचाई में गुजरें, यह फॉर्म सबमिट के लिए प्रयुक्त ब्लॉब आउटपुट करेगा।
https://github.com/gonnavis/iphone_photo_rotation_adjust




Related

javascript html5 canvas html5-canvas drawimage