动态添加图像到画布

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. img使用数据URL创建一个元素并在画布上绘制它.

我在jsfiddle上做了一个简单的例子.代码如下所示:

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

有很多关于File API的好教程,比如这个或者这个.