将图像动态添加到画布
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() ... ); 上运行- 一些较大的图像必须加载才能正确绘制到画布上。以上是关于将图像动态添加到画布的主要内容,如果未能解决你的问题,请参考以下文章