为什么在调试时在画布上绘制图像但在运行时不是？ [英] Why is the image drawn in the canvas when debugging but not when running?
问题描述
我正在学习HTML5和Javascript，我正在尝试在画布上绘制图像。如果我在打破下面标记的行后单步执行代码，我有以下代码绘制图像。如果我不调试那么根本不绘制图像。我究竟做错了什么？ Firefox 10与FireBug 1.9。
I'm learning HTML5 and Javascript and I'm trying to draw an image on a canvas. I have the following code which draws the image if I step through the code after breaking on the line marked below. If I don't debug then the image is not drawn at all. What am I doing wrong? Firefox 10 with FireBug 1.9.
请注意，虽然有一个循环来处理多个图像，但我只选择了一个。我想如果一个人不工作，那么一百个也不会工作。 ; - ）
Note that although there's a loop to handle multiple images, I've only been selecting one. I figure if one doesn't work, a hundred won't work either. ;-)
<!DOCTYPE html>
<html>
<body>
<input type="file" id="files" name="files[]" multiple />
<canvas id="picCanvas" />
<script>
function handleFileSelect(evt) {
var files = evt.target.files;
// Loop through the FileList and render images
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
var img = document.createElement('img'); // <-- BREAK HERE!
img.src = e.target.result;
var canvas = document.getElementById('picCanvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
推荐答案
你必须等到图片元素满载在调用 drawImage 方法之前，通过浏览器，即使您的图像元素是从base64字符串而不是从外部文件创建的。所以只需使用图像对象的 onload 事件。快速解决方法是这样的：
You have to wait until the image element is fully loaded by the browser before calling the drawImage method, even if your image element is created from a base64 string and not from an external file. So just make use of the onload event of the image object. A quick fix would be like this:
var img = document.createElement('img');
img.onload = function()
{
var canvas = document.getElementById('picCanvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0);
}
img.src = e.target.result;
这篇关于为什么在调试时在画布上绘制图像但在运行时不是？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
