将图像动态添加到画布

Posted

技术标签:

【中文标题】将图像动态添加到画布【英文标题】:Dynamically add image to canvas 【发布时间】:2011-10-20 03:19:16 【问题描述】:

大家好。

我想知道有没有办法将图像从用户计算机动态添加到画布。

例如我有:

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

如果用户选择带有输入的图像,则将其添加到画布中。

请告诉我任何可以遵循的路径。

谢谢!

【问题讨论】:

【参考方案1】:

为此,您应该熟悉 html5 Canvas API 和 File API。当然,此功能在仅支持两种 HTML5 API 的浏览器中可用。

这样做的过程是:

    change 事件发送到文件输入元素。 从事件处理程序中获取上传的文件并使用FileReader获取数据URL 对象。 使用数据 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。

【讨论】:

哇,你是现场维基。谢谢! 好信息,只是 content.drawimage 应该在 $img.load(funciton() ... ); 上运行- 一些较大的图像必须加载才能正确绘制到画布上。

以上是关于将图像动态添加到画布的主要内容,如果未能解决你的问题,请参考以下文章

如何在画布元素中添加超链接到图像?

动态图处理

将图像动态加载到覆盖的画布中并调整它们的大小

只需要一些关于画布上动态可拖动输入元素的指导

如何将边框图像添加到动态创建的图像?

如何使用图像组件将图像动态添加到 Gatsby 中的页面?