动态添加图像到画布

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良好的教程。