Jquery 动态地将图像添加到画布

大家好

我想知道是否有任何方法可以动态地将图像从用户计算机添加到画布

例如，我有：

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

如果用户选择带有输入的图像，它将添加到画布中

请给我指路

---

谢谢大家!

要做到这一点，您应该熟悉HTML5画布API和文件API。当然，该功能在浏览器中可用，仅支持HTML5API

实现这一点的过程是：

将

change

事件分派到文件输入元素

从事件处理程序获取上载的文件，并使用 反对

使用数据URL创建一个

img

元素，并将其绘制在画布上

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

$（函数（）{
$（“#文件输入”）.change（函数（e）{
var file=e.target.files[0]，
imageType=/image.*/；
如果（！file.type.match（imageType））
返回；
var reader=new FileReader（）；
reader.onload=文件onload；
reader.readAsDataURL（文件）；
});
函数fileOnload（e）{
变量$img=$（'

---

关于文件API有很多很好的教程，比如or。

Wow，你是live wiki。谢谢！很好的信息，只是content.drawimage应该运行在$img.load（function（）{…}）；-一些较大的图像必须加载才能正确地绘制到画布上。