Tự động thêm hình ảnh vào canvas

Question

Những người bạn tốt trong ngày.

Tôi tự hỏi có cách nào để tự động thêm hình ảnh từ máy tính người dùng vào canvas không.

Ví dụ tôi có:

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

Nếu hình ảnh người sử dụng lựa chọn với đầu vào nó được thêm vào vải.

Chỉ cho tôi bất kỳ con đường nào để theo dõi, vui lòng.

Cảm ơn bạn!

Answer 1

Để làm điều này, bạn nên làm quen với HTML5 Canvas API và API tệp. Và tất nhiên, tính năng này có sẵn trong các trình duyệt chỉ hỗ trợ cả API HTML5.

Quá trình này để làm điều này là:

1. Công văn một sự kiện change nộp yếu tố đầu vào.
2. Tải tệp được tải lên từ trình xử lý sự kiện và nhận URL dữ liệu bằng cách sử dụng đối tượng FileReader .
3. Tạo thành phần img với URL dữ liệu và vẽ nó trên canvas.

Tôi đã tạo đơn giản example trên jsfiddle. Mã này trông như thế này:

<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> 

Có rất nhiều bài hướng dẫn tốt về API file như this hoặc this.