बाद के HTML5 CreateObjectURL ब्लॉब छवि पूर्वावलोकन और क्रॉपिंग बग

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि मेरा कोड गलती है या वर्तमान HTML5 फ़ाइल API कार्यान्वयन है या नहीं।

से नीचे का कोड काम करता है। एक बार छवि को पहले से लोड करने के बाद प्रक्रिया को दोहराते समय बग प्रकट होता है।

दूसरी बार फ़ाइल को छवि ब्लॉब लोड का चयन किया जाता है, फिर एक झिलमिलाहट होती है और छवि गायब हो जाती है। इसके बाद के बाद के चयन आमतौर पर ठीक काम करते हैं (कभी-कभी फ़ाइल बड़ी होती है तो अनियमित व्यवहार होता है)। एक ही फ़ाइल चयन के लिए प्रक्रिया को दोहराना आम तौर पर काम करता है (एक फिक्स के रूप में)।

किसी भी मदद की सराहना की जाएगी।

JavaScript लाइब्रेरी

• JQuery 1.7.1

• JQuery उपकरण 1.2.6

• इस्तेमाल किया JCrop 0.9.9

कदम - Summ ary

1. उपयोगकर्ता पारंपरिक <input type="file" /> संवाद के माध्यम से एक फ़ाइल का चयन करता है। यदि एक फ़ाइल किया गया था, चयनित यदि हां, तो फिर पुष्टि करता है कि MIME प्रकार image/jpeg या छवि/png और है कि चयनित फ़ाइल आकार 250kb से छोटी है है

2. एक onchange हैंडलर इनपुट और जांच के लिए निष्पादित करता है। यदि यह सत्यापन विफल रहता है तो यह चयन को रीसेट करता है।

3. इस बिंदु पर फ़ाइल (छवि) अपलोड करने के लिए मान्य है। अगला यह चेकों ब्राउज़र if (typeof window.URL == 'undefined') return; के माध्यम से फ़ाइल एपीआई CreateObjectURL समर्थन करता है तो

4. यह वर्तमान चित्र पूर्वावलोकन में छवि ब्लॉब लोड करता है (एक इस्तेमाल किया वर्तमान प्रदर्शित करने के लिए (यदि ऐसा नहीं होता, लिए अगले कदम को छोड़ देता है) छवि) और गतिशील रूप से जेनरेट किए गए छवि तत्व में भी जो jqurop फसल कार्यक्षमता के साथ एक jquery टूल 'ओवरले में जोड़ा गया है।

5. उपयोगकर्ता तो jcrop के माध्यम से छवि फसलों और बंद कर देता है ओवरले, छवि के फसली पूर्वावलोकन देखकर अपलोड करने की ( ब्राउज़र CreateObjectURL का समर्थन करता है केवल अगर और उपयोगकर्ता छवि क्रॉप)

कोड

एचटीएमएल

<div style="height: 100px; overflow: hidden; width: 100px; margin-bottom: 5px;"> 
    <img id="PhotoPreview" alt="Photo" src="/Content/no-photo.png" /> 
</div> 
<input type="file" id="Photo" name="Photo" onchange="photoChanged(this.files)" /> 
<input type="hidden" id="PhotoCrop" name="PhotoCrop" value="" /> 

जावास्क्रिप्ट window.URL = window.URL || खिड़की।webkitURL; (के लिए कोई मदद यहां प्राप्त मेरे योगदान)

function photoChanged(files) { 
    if (!files.length) return; 
    var file = files[0]; 
    if (file.type != 'image/jpeg' && file.type != 'image/png') { 
     alert('The photo must be in PNG or JPEG format'); 
     $("#Photo").val(''); 
     return; 
    } 
    var fileSizeLimit = 250; 
    var fileSize = file.size/1024; 
    if (fileSize > fileSizeLimit) { 
     var fileSizeString = fileSize > 1024 ? (fileSize/1024).toFixed(2) + "MB" : (fileSize).toFixed(2) + "KB"; 
     alert("The photo file size is too large, maximum size is " + fileSizeLimit 
       + "KB. This photos' file size is: " + fileSizeString); 
     $("#Photo").val(''); 
     return; 
    } 

    if (typeof window.URL == 'undefined') return; 

    var preview = document.getElementById('PhotoPreview'); 
    $(preview).removeClass('profile-photo'); 
    preview.src = window.URL.createObjectURL(file); 
    preview.onload = function() { 
     var img = new Image(); 
     $("#PhotoOverlay div").empty().append(img); 
     window.URL.revokeObjectURL(this.src); 
     img.src = window.URL.createObjectURL(file); 
     img.onload = function() { 
      window.URL.revokeObjectURL(this.src); 
      $(this).Jcrop({ 
       onSelect: onImageCropSelect, 
       aspectRatio: 
       310/240, 
       minSize: [100, 100], 
       setSelect: [0, 0, 100, 100] 
     }); 

     $("#PhotoOverlay") 
      .css({ width: this.width + 'px', : 'auto'}) 
      .overlay() 
      .load(); 
     }; 
    }; 
} 

function onImageCropSelect(e) { 
    $("#PhotoCrop").val(e.x + ',' + e.y + ',' + .x2 + ',' + e.y2); 

    var rx = 100/e.w; 
    var ry = 100/e.h; 

    var height = $("#PhotoOverlay div img").height(); 
    var width = $("#PhotoOverlay div img").width(); 

    jQuery('#PhotoPreview').css({ 
     width: Math.round(rx * width) + 'px', 
     height: Math.round(ry * height) + 'px', 
     marginLeft: '-' + Math.round(rx * e.x) + 'px', 
     marginTop: '-' + Math.round(ry * e.y) + 'px' 
    }); 
} 

$(function() { 
    $("#PhotoOverlay").overlay({ 
     mask: { 
      color: '#ebecff', 
      loadSpeed: 200, 
      opacity: 0.9 
     } 
    }); 
}); 

कोड का उपयोग करने के लिए स्वतंत्र महसूस।

अद्यतन

मैं ने वही समस्या (छवि लोड तो गायब) JCrop के उपयोग के संबंध में के बारे में stackoverflow पर एक और सवाल भर में आ गए हैं। मैं वर्तमान में जेक्रॉप पर अपराधी होने पर सट्टेबाजी कर रहा हूं।

मैंने यह भी पढ़ा है कि जब img.onload छवि को निष्पादित करता है तो हमेशा 'तैयार' नहीं होता है, इसलिए अजीब व्यवहार और अतिरिक्त चेक .actualWidth/.actualHeight एक सेटटाइमआउट के साथ समस्या को हल कर सकता है। मैं इसकी जांच करूंगा।

अद्यतन

मैं एक FileReader और readAsDataUrl का उपयोग कर के बजाय CreateObjectURL का उपयोग कर और एक कैनवास का उपयोग कर एक पूर्वावलोकन के बजाय के अंतर के आधार अतिप्रवाह आकर्षित करने के लिए अवधारणा का एक काम कर सबूत है: छिपा समाधान। कुछ परिशोधन की आवश्यकता है तो मैं यहां कोड पोस्ट करूंगा।

Answer 1

अक्सर अनियमित व्यवहार तब होता है जब आप img.src सेट से पहले घोषित img.onload

function imageLoadHandler() { ... } 

var img = new Image(); 
img.onload = function() { imageLoadHandler() } 
img.src = window.URL.createObjectURL(file); 
if(img.complete) { imageLoadHandler() } //fix for browsers that don't trigger .load() event with image in cache 

आशा है कि यह मदद करता है