वेब अनुप्रयोगों में वेबकैम या मोबाइल कैमरा से चित्र लें

Question

मैं एक वेब एप्लिकेशन विकसित कर रहा हूं जो स्थानीय से चित्र ब्राउज़ और ले लेता है और मैं कैमरे के माध्यम से छवियों को कैप्चर करना चाहता हूं। मैं निम्नलिखित कोड का उपयोग कर रहा हूं और मैं डिवाइस कैमरा कैप्चर कर सकता हूं।

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput"> 

अब, मैं छवि और एक्सचेंजेंट प्राप्त करना चाहता हूं, बेस 64 में परिवर्तित करना चाहता हूं और उस पृष्ठ में स्वयं दिखाना चाहता हूं।

कृपया मुझे लोगों की मदद करें!

Answer 1

आप इस तरह यह कर सकते हैं:

$('#cameraInput').on('change', function(e){ 
$data = e.originalEvent.target.files[0]; 
    $reader = new FileReader(); 
    reader.onload = function(evt){ 
    $('#your_img_id').attr('src',evt.target.result); 
    reader.readAsDataUrl($data); 
}}); 

Answer 2

मीलों एरिक्सन और Henock Bongi, आप reader.readAsDataUrl ($ डेटा) लेने के लिए की जरूरत है; ऑनलोड आग के बाहर अधिभार समारोह से बाहर।

आप उपयोग करना jQuery नीचे देखें नहीं करना चाहते हैं:

function readFile(file) {              
 
    var reader = new FileReader(); 
 
    reader.onload = readSuccess;            
 
    function readSuccess(evt) {  
 
     document.getElementById("your_img_id").src = evt.target.result     
 
    }; 
 
    reader.readAsDataURL(file);            
 
} 
 

 
document.getElementById('cameraInput').onchange = function(e) { 
 
    readFile(e.srcElement.files[0]); 
 
};

[कैसे एक वेब एप्लिकेशन से एक मोबाइल के कैमरे का उपयोग करने की?] की