当下面的代码返回上一张上传图片中的值而非当前代码时,有人能告诉我出错的地方吗?
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]);
var imageWidth = canvas.width;
var imageHeight = canvas.height;
var imageData = ctx.getImageData(0,0,imageWidth,imageHeight);
var data = imageData.data;
console.log("imageWidth=" +imageWidth);
图像通过以下输入上传:
<canvas id="imageCanvas"></canvas>
<br>
<input type='file' id="imageLoader" name="imageLoader"/>
<br>
有什么想法吗?
答案 0 :(得分:1)
load
FileReader
和<img>
的事件都是异步的。放置
var imageWidth = canvas.width;
var imageHeight = canvas.height;
var imageData = ctx.getImageData(0,0,imageWidth,imageHeight);
var data = imageData.data;
console.log("imageWidth=" +imageWidth);
在<img>
load
事件处理程序中。
您还可以将.value
元素的<input type="file">
设置为""
,以从元素“File
属性中删除对当前上传的.files
对象的引用。” p>