Error trying to get the dimensions of an .jpeg image from a buffer

https://github.com/image-size/image-size/blob/175bca5d57ceb024ecd307f7a1d70e03fafec205/lib/detector.ts#L5-L17

This constant doesn’t include .jpeg (0x41), and doesn’t want to work with a buffer from a downloaded .jpeg image… Gives the error: unsupported file type: undefined (file: undefined)(...). The buffer was a buffer, and not undefined.

I also see it is missing some other file types.

Edit: I thought all JPEG types was supported. Maybe this isn’t a bug. I read in your code that the file has to be 0xff, if not the table was corrupt… But I don’t think that is true. The picture I am trying to read is fine.

[ravo10]

@netroy I want to report back. I tried again with a URL (didn’t need a buffer…) from local tmp. storage, and that worked for me atleast it seems !

[ravo10]

@ravo10 i don’t get any errors on any of the 4 images from this zip file. can you send me a file that most definitely is throwing this error?

Sorry for wasting your time. I am not sure why I am getting errors… Those .jpeg-pictures are the only one I’ve tried, and won’t work for me. As said, I am using a buffer recived from a download-URL. I am using Google Cloud Storage. I can give you the snippet of code I am using server side with Node.JS 8 (Google Firebase Functions) to try and get the dimensions. (I also get error when trying to use exif-parser (Invalid JPEG section offset at Object.parseSections (…))).

I might for now just get the dimensions locally with JS and storing the original dimensions in the pictures custom metadata on upload, for later auto. resizing and compression on serverside.

TypeScript:

async hentUtFilPrewKjelde(fil): Promise<string> {
    const LESER = new FileReader();

    const KJELDE = await new Promise<string>(resolve => {
        LESER.addEventListener('load', (evt: any) => {
            resolve(evt.target.result);
        });

        // Start avlesning
        LESER.readAsDataURL(fil);
    });

    return KJELDE;
}

The way I am using (that works) on client side:

// Hent metadata frå fil...
mData = Object.assign(mData, await (async () => {
  return await new Promise<{
    ['original-breidde']: string,
    ['original-høgde']: string
  }>(async (resolve) => {
    const bileteMetadata = new Image();
    bileteMetadata.addEventListener('load', () => {
      // Ferdig
      resolve({
        ['original-breidde']: bileteMetadata.width + 'px',
        ['original-høgde']: bileteMetadata.height + 'px'
      });
    });

    // Sett
    const adresse = await this.asyncFilerPrewPipe.hentUtFilPrewKjelde(fil); // Returns a buffer
    bileteMetadata.src = adresse;
  });
})());

The logic I try to use on server:

const bileteDimensions = await new Promise<{
    h: number,
    w: number
} | null>(resolve => {
    if (downloadURL) {
        https.get(downloadURL, response => {
            const chunks: Buffer[] = [];

            response
                .on('data', (chunk: Buffer) => {
                    chunks.push(chunk);
                })
                .on('end', () => {
                    const buffer = Buffer.concat(chunks);
                    // Outputs a buffer
                    console.log(buffer);

                    setTimeout(() => {
                        const dimensions: {
                            width: number,
                            height: number
                        } = sizeOf(buffer);
                        console.log(dimensions);

                        setTimeout(() => {
                            // Done
                            resolve({
                                h: dimensions.width,
                                w: dimensions.height
                            })
                        }, 700);
                    }, 300);
                })
                .on('error', (e) => {
                    console.error(e);
                });
        });
    } else {
        // Done (no URL)
        resolve(null);
    }
});