尝试分离画布上的图像加载功能。它就像一样完美
html
<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />
<canvas id="imageCanvas"></canvas>
javascript
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
http://jsfiddle.net/influenztial/qy7h5/
但当我试图将其分离时,由于某种原因,它会因为event.target.result
而变为undefind
而卡住。
代码在这里
http://jsfiddle.net/qy7h5/1840/
怎么了?这方面有什么最佳实践吗?
您首先需要理解代码。试试我的代码,它运行良好。在我删除事件强制转换和Image onload强制转换的地方,还删除了Image作为参数,该参数曾被用作事件而非图像对象。
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
onReaderLoad(event);
}
reader.readAsDataURL(e.target.files[0]);
}
var onReaderLoad = function(event) {
var image = new Image();
image.onload = function() {
onImageLoad(image);
}
image.src = event.target.result;
}
var onImageLoad = function(img) {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
我在这里更新fiddle