代码之家 › 专栏 › 技术社区 › Micke

getImageData返回以前上传的图片中的值不是当前值

getimagedata canvas javascript

0

Micke · 技术社区 · 9 年前

当下面的代码返回以前上传的图片而不是当前图片的值时,有人能告诉我哪里出错了吗?

    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>

1 回复 | 直到 9 年前

1

guest271314 9 年前

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> 负载 事件处理程序。

您还可以设置 .value 属于 <input type="file"> 元素到 "" 删除对当前上传内容的引用 File 来自元素的 .files 所有物