आईओएस 6 और सफारी फोटो अपलोडिंग - फ़ाइल एपीआई + कैनवास + jQuery अजाक्स फ़ाइलें अपलोड और आकार बदलना असीमित रूप से

Question

आईओएस 6 जारी किया गया है और मैं फोटो अपलोडिंग का परीक्षण कर रहा हूं।

यह अच्छी तरह से काम करता है, लेकिन 3 जी से अधिक बड़ी छवियों के साथ यह अपेक्षा की जाती है।

फ़ाइल एपीआई और कैनवास के लिए धन्यवाद, जावास्क्रिप्ट का उपयोग कर छवियों का आकार बदलना संभव है। मुझे उम्मीद है कि अगर मैं उन्हें अपलोड करने का प्रयास करने से पहले छवियों का आकार बदलता हूं, तो वे तेजी से अपलोड करेंगे - खुद को एक तेज उपयोगकर्ता अनुभव के लिए उधार देते हैं। स्मार्टफोन प्रोसेसर नेटवर्क की गति से तेजी से तेजी से सुधारने के साथ, मेरा मानना ​​है कि यह समाधान एक विजेता है।

निकोलस छवि का आकार बदलने के लिए एक उत्कृष्ट समाधान की पेशकश की है:

Image resize before upload

हालांकि, मैं jQuery के अजाक्स के साथ लागू सबसे कठिन समय चल रहा है। किसी भी सलाह या मदद की सराहना की जाती है, क्योंकि यह कोड शायद मोबाइल वेब एप्लिकेशन विकास पोस्ट-आईओएस 6 के लिए बेहद उपयोगी होगा।

var fileType = file.type, 
    reader = new FileReader(); 

reader.onloadend = function() { 
    var image = new Image(); 
    image.src = reader.result; 

    image.onload = function() { 

     //Detect image size 
     var maxWidth = 960, 
      maxHeight = 960, 
      imageWidth = image.width, 
      imageHeight = image.height; 
     if (imageWidth > imageHeight) { 
      if (imageWidth > maxWidth) { 
       imageHeight *= maxWidth/imageWidth; 
       imageWidth = maxWidth; 
      } 
     } else { 
      if (imageHeight > maxHeight) { 
       imageWidth *= maxHeight/imageHeight; 
       imageHeight = maxHeight; 
      } 
     } 

     //Create canvas with new image 
     var canvas = document.createElement('canvas'); 
     canvas.width = imageWidth; 
     canvas.height = imageHeight; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0, imageWidth, imageHeight); 

     // The resized file ready for upload 
     var finalFile = canvas.toDataURL(fileType); 

     if (formdata) { 

      formdata.append("images[]", finalFile); 

      $.ajax({ 
       url: "upload.php", 
       type: "POST", 
       data: formdata, 
       dataType: 'json', 
       processData: false, 
       contentType: false, 
       success: function (res) { 
        //successful image upload 
       } 
      }); 

     } 
    } 
} 
reader.readAsDataURL(file); 

Answer 1

मैंने क्लाइंट साइड कैनवास छवि आकार बदलने के लिए अभी एक jQuery प्लगइन विकसित किया है। यह अभिविन्यास और आईओएस 6 स्क्वैश छवि समस्या को भी संभालता है।

आप कोशिश कर सकते हैं: http://gokercebeci.com/dev/canvasresize

उपयोग:

$.canvasResize(file, { 
       width : 300, 
       height : 0, 
       crop : false, 
       quality : 80, 
       callback: function(dataURL, width, height){ 

         // your code 

       } 
}); 

Answer 2

मैं दूसरी आईओएस 6 बीटा रिलीज के बाद से अपलोड सुविधा के साथ काम कर रहा हूं। निम्नलिखित कोड मेरे लिए काम करता है: अपने HTML पृष्ठ के सिर में

रखें इस -

<script>window.onload = function() { 
var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext("2d"); 

var fileSelect = document.getElementById("fileSelect"), 
    input = document.getElementById("input"); 

    input.addEventListener("change", handleFiles); 

    //hides ugly default file input button 
    fileSelect.addEventListener("click", function (e) { 
     if (input) { 
      input.click(); 
     } 
     e.preventDefault(); 
    }, false); 

function handleFiles(e) { 
    var reader = new FileReader; 
    reader.onload = function (event) { 
     var img = new Image(); 
     img.src = reader.result; 
     img.onload = function() { 
      var maxWidth = 320, 
       maxHeight = 350, 
       imageWidth = img.width, 
       imageHeight = img.height; 

      if (imageWidth > imageHeight) { 
       if (imageWidth > maxWidth) { 
        imageHeight *= maxWidth/imageWidth; 
        imageWidth = maxWidth; 
       } 
      } else { 
       if (imageHeight > maxHeight) { 
        imageWidth *= maxHeight/imageHeight; 
        imageHeight = maxHeight; 
       } 
      } 
      canvas.width = imageWidth; 
      canvas.height = imageHeight; 

      ctx.drawImage(this, 0, 0, imageWidth, imageHeight); 

      // The resized file ready for upload 
      var finalFile = canvas.toDataURL("image/png"); 

      var postData = 'canvasData=' + finalFile; 
      var ajax = new XMLHttpRequest(); 
      ajax.open('POST', 'save.php', true); 
      ajax.setRequestHeader('Content-Type', 'canvas/upload'); 

      ajax.onreadystatechange = function() { 
       if (ajax.readyState == 4) { 
        //just to visually confirm it worked... 
        window.open(canvas.toDataURL("image/png"), "mywindow"); 
       } 
      } 
      ajax.send(postData); 
     } 
    } 
    reader.readAsDataURL(e.target.files[0]); 
} 
} 
</script> 

यहाँ एचटीएमएल है -

<?php 
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
{ 
    // Get the data 
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA']; 

    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to check image type 
    $filteredData=substr($imageData, strpos($imageData, ",")+1); 

    // Need to decode before saving since the data we received is already base64 encoded 
    $unencodedData=base64_decode($filteredData); 

    // Save file. This example uses a hard coded filename for testing, 
    // but a real application can specify filename in POST variable 
    $fp = fopen('users/user_photo.png', 'wb'); 
    fwrite($fp, $unencodedData); 
    fclose($fp); 
} 
?> 

-

<div style="width:320px;position:absolute;z-index:9;top:387px;"> 
<button style="width:60px;" id="fileSelect">upload</button> 
<input type="file" id="input" name="input" accept="image/*" style="display:none;"></div> 

यहाँ पीएचपी है एकमात्र मुद्दा जिसके साथ मैंने लड़ाई की है, छवियों को 9 0 डिग्री घूर्णन किए बिना कैमरे से लोड करने के लिए मिल रही है।

उम्मीद है कि यह मदद करता है, अगर आपको कोड के साथ कोई समस्या है (यह मेरी पहली पोस्ट है) तो मुझे बताएं।

Answer 3

को देखते हुए हम बड़ी छवियों और एक मोबाइल ब्राउज़र पर स्मृति मुद्दों के साथ काम कर रहे हैं, मैं अगर एक हल्के वजन समाधान कर सकते हैं देखना चाहता था पाया जा सकता है कि एक डुप्लिकेट कैनवास बनाने से बचाता है और केवल पहचान और आकार बदलने के लिए अन्य छवि संचालन करता है।

ऐसा लगता है कि मोबाइल सफारी एक छवि को लंबवत रूप से स्क्वैश करता है जो कि बहुत बड़ा है, अनुपात यह कितना करता है, वही रहता है।

तो अभी इससे पहले कि मैं भी कैनवास पर छवि प्रस्तुत करना, मैं अंगूठे का एक बहुत तेजी से नियम का उपयोग करता है, तो ब्राउज़र एक मोबाइल iDevice navigator.userAgent.match(/(iPod|iPhone|iPad)/) है जिससे मैं बस की जाँच ...और छवि ऊंचाई या चौड़ाई 2000 पिक्स से बड़ी है, इस मामले में मुझे पता है कि यह squashed होगा। उस स्थिति में, canvasContext.drawImage() में मैं छवि ऊंचाई को 4x लंबा होने के लिए निर्दिष्ट करता हूं जो सामान्य रूप से दिए गए छवि आकार बदलने के उद्देश्य से किया जाना चाहिए था। मैंने जो देखा है उसके आधार पर, मोबाइल सफारी 4 के कारक द्वारा छवि को स्क्वैश करता है।

तब मैं छवि प्रस्तुत करता हूं, और यह पहली बार बिना किसी पूर्व-चित्रित छवि को स्क्वैश करता है, जो तब होता है एक सामान्य एक्स: वाई अनुपात। किसी भी अतिरिक्त कैनवास तत्वों या संदर्भों या परीक्षण रेंडर या पिक्सेल पुनरावृत्तियों के बिना ऊपर वर्णित 100% समाधान का उपयोग करता है।

मुझे यकीन है कि कुछ किनारे के मामले हो सकते हैं, और छवि आकार सीमा सटीक नहीं हो सकती है, लेकिन मेरे ऐप के लिए मैं एक समाधान चाहता था जो तेज़ था।