处理图像加载的Javascript-event.target.result为空

Javascript handling image loading - event.target.result is empty

本文关键字：target result 为空 Javascript-event 图像 加载 处理      更新时间：2023-09-26

尝试分离画布上的图像加载功能。它就像一样完美

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

相关文章：