Resmi dinamik olarak tuval üzerine ekleyin

Question

İyi günler millet.

Kullanıcı bilgisayarından tuvale dinamik olarak görüntü eklemenin bir yolu olduğunu merak ediyorum.

Örneğin ben vardır: o tuvale de eklenir

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

girişli kullanıcı seçim görüntü edin.

İzlenecek yolu göster bana, lütfen.

Teşekkür ederiz!

Answer 1

Bunu yapmak için HTML5 Canvas API'sine ve Dosya API'sine aşina olmalısınız. Ve elbette, bu özellik tarayıcılarda sadece HTML5 API'lerini desteklemektedir. Bunu yapmak için

süreçtir:

1. giriş elemanını dosyaya bir change olayı gönder.
2. Yüklenen dosyayı olay işleyicisinden alın ve FileReader nesnesini kullanarak bir veri URL'si alın.
3. img öğesini veri URL'siyle yapın ve tuval üzerine çizin.

Basit bir example jsfiddle üzerinde yaptım. Kod şöyle görünür:

<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 veya this gibi Dosya API hakkında iyi öğreticiler bol vardır.