動態添加圖像到畫布

Question

美好的一天人。

我想知道是否有任何方法來動態添加圖像從用戶計算機到畫布。

比如我有：

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

如果與輸入的用戶選擇圖片它添加到畫布上。

請告訴我任何要遵循的路徑。

謝謝！

Answer 1

爲此，您應該熟悉HTML5 Canvas API和File API。當然，這個功能在瀏覽器中只支持HTML5 API。

的方法做到這一點是：

1. 分派change事件到文件輸入元件。
2. 從事件處理程序獲取上傳的文件，並使用FileReader 對象獲取數據URL。
3. 使用數據URL製作一個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> 

有大量的有關文件API像this或this良好的教程。