गतिशील रूप से कैनवास

Question

अच्छा दिन लोगों को छवि जोड़ें।

मुझे आश्चर्य है कि उपयोगकर्ता कंप्यूटर से कैनवास में छवि को गतिशील रूप से जोड़ने का कोई तरीका है।

उदाहरण के लिए मेरे पास है: यह कैनवास रख दिया जाता है

<canvas id="canvas"></canvas> 
<input type="file" id="image-chooser"> 

इनपुट के साथ, तो उपयोगकर्ता पिकअप छवि।

कृपया मुझे अनुसरण करने के लिए कोई रास्ता दिखाएं, कृपया।

धन्यवाद!

Answer 1

ऐसा करने के लिए आपको HTML5 कैनवास एपीआई और फ़ाइल एपीआई से परिचित होना चाहिए। और निश्चित रूप से, यह सुविधा ब्राउज़र में उपलब्ध है केवल एचटीएमएल 5 एपीआई दोनों का समर्थन करती है।

प्रक्रिया यह करने के लिए है:

1. इनपुट तत्व फाइल करने के लिए एक change घटना डिस्पैच।
2. ईवेंट हैंडलर से अपलोड की गई फ़ाइल प्राप्त करें और FileReader ऑब्जेक्ट का उपयोग करके डेटा यूआरएल प्राप्त करें।
3. डेटा यूआरएल के साथ img तत्व बनाएं और इसे कैनवास पर खींचें।

मैंने jsfiddle पर एक साधारण example बनाया। कोड इस तरह दिखता है:

<canvas id="canvas"></canvas> 
<input type="file" id="file-input"> 
<script> 
$(function() { 
    $('#file-input').change(function(e) { 
     var file = e.target.files[0], 
      imageType = /image.*/; 

     if (!file.type.match(imageType)) 
      return; 

     var reader = new FileReader(); 
     reader.onload = fileOnload; 
     reader.readAsDataURL(file); 
    }); 

    function fileOnload(e) { 
     var $img = $('<img>', { src: e.target.result }); 
     $img.load(function() { 
      var canvas = $('#canvas')[0]; 
      var context = canvas.getContext('2d'); 

      canvas.width = this.naturalWidth; 
      canvas.height = this.naturalHeight; 
      context.drawImage(this, 0, 0); 
     }); 
    } 
}); 
</script> 

this या this की तरह फ़ाइल API के बारे में अच्छा ट्यूटोरियल के बहुत सारे हैं।