Question

尝试在画布功能上分离图像加载。它完美无缺

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/

什么错了？那是否有一些最好的做法？

Answer 1

您需要先了解代码。试试我的代码工作正常。我删除事件强制转换和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);
}

我更新小提琴here

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

1 个答案: