inspirit / jsfeat

JavaScript Computer Vision library.
MIT License
2.74k stars 372 forks source link

IE10 ArrayBuffer is undefined #36

Open arlg opened 9 years ago

arlg commented 9 years ago

Hi, First, thanks for this great lib.

When i want to use your examples, IE10 tells me : "Typed array constructor argument is invalid' at this line : var data_u32 = new Uint32Array(imageData.data.buffer);

It happends everytime it uses the imageData.data.buffer.

In IE 10, imageData.data.buffer is undefined, in other browsers it's an ArrayBuffer {}

Is there a polyfill, or a solution to this issue ?

inspirit commented 9 years ago

well i dont need this kind of data inside library. in the demos i use Array buffer casting for rendering results. so u just need to change it to smth that will work in IE10 to make result render work

arlg commented 9 years ago

Thanks for your answer. Instead of :

var data_u32 = new Uint32Array(imageData.data.buffer);

I tried :

 var data_u32 = new Uint32Array(W*H*4);
for(var a=0;a<imageData.data.length;a++){
    data_u32[a]=imageData.data[a];
}

To get data, but the effect doesn't work, and i don't have any errors. Is there something wrong with this replacement ?

inspirit commented 9 years ago

can u please tell me which example u are trying to run and where IE failing?

arlg commented 9 years ago

It's on IE10, with the sobel_derivatives example, for example ( I also use Canny edge detector and result is the same ). Given that I can't use webcam to test on IE, I use a picture send via an input and drawn on a canvas.

inspirit commented 9 years ago

IE Returns so called CanvasPixelArray instead of typed array. so u have to use with it channel-by-channel

// render result back to canvas
var data_u8 = imageData.data;
var i = img_u8.cols*img_u8.rows, pix=0, gx = 0, gy = 0;
while(--i >= 0) {
    gx = Math.abs(img_gxgy.data[i<<1]>>2)&0xff;
    gy = Math.abs(img_gxgy.data[(i<<1)+1]>>2)&0xff;
    pix = ((gx + gy)>>1)&0xff;
    data_u8[i*4+0] = gx;  // RED
    data_u8[i*4+1] = 0;    // GREEN
    data_u8[i*4+2] = gy;  // BLUE
    data_u8[i*4+3] = pix; // ALPHA
}

ctx.putImageData(imageData, 0, 0);
arlg commented 9 years ago

The image result is full white with this replacement.. I don't know what can I do to fix this. ..

inspirit commented 9 years ago

and what if u dont process image but just get image data and then render it? do u actually load it and draw to context?

arlg commented 9 years ago

I draw the image, then i get the image data, then process different filters and i redraw the final result on the canvas.

inspirit commented 9 years ago

what i am saying do u really get the image data before processing it with jsfeat? what will happen if u just get image data and then set all pixels in it to RED and put it back to context. will u see all RED pixels?

InsOpDe commented 9 years ago

Having the same issue here. Your approach does give me back http://puu.sh/j2xlU/3718637a0a.png instead of http://puu.sh/j2xmT/c83dfb79f0.png

InsOpDe commented 9 years ago

I used this code, tho:

//        var alpha = (0xff << 24);
        var data_u8 = imageData.data;
        var i = img_u8.cols*img_u8.rows, pix=0, gx = 0, gy = 0;
        while(--i >= 0) {
            gx = Math.abs(img_u8.data[i<<1]>>2)&0xff;
            gy = Math.abs(img_u8.data[(i<<1)+1]>>2)&0xff;
            pix = ((gx + gy)>>1)&0xff;
            data_u8[i*4+0] = gx;  // RED
            data_u8[i*4+1] = 0;    // GREEN
            data_u8[i*4+2] = gy;  // BLUE
            data_u8[i*4+3] = pix; // ALPHA
//            pix = img_u8.data[i];
//            data_u8[i] = alpha | (pix << 16) | (pix << 8) | pix;
        }

because I couldnt figure out what img_gxgy was